jQuery Molibe (三) 多页面跳转 page title 设置
在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时，jQueryMobile 将在页面文档寻找对应Id号的容器，以动画效果切换至该容器中
·
在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时，jQuery Mobile 将在页面文档寻找对应Id号的容器，以动画效果切换至该容器中，实现容器间内容的访问：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>第一个页面</h1>
</div>
<div data-role="content">
<p>这是首页内容界面</p>
<a href="#back">详情页面</a>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="back" data-title="详情页面标题">
<div data-role="header">
<h1>第二个页面</h1>
</div>
<div data-role="content">
<p>内容界面</p>
<a href="#home">返回首页</a>
</div>
</div>
</body>
</html>
使用jquerymobile的时候有时候我们会在同一个页面中写多个页面，但是在切换的时候，在浏览器显示的title总是同一个。我们需要不同的页面显示不同的title，这时候我们可以在data-role后面添加data-title属性，设置自己需要的title内容：
data-title="详情页面标题"
从第一个容器切换至第二个容器后，如果想要从第二个容器返回第一个容器，有下列两种方法：
在第二个容器中，增加一个<a>元素，通过内部链接“#”加对应“Id”的方式返回第一个容器。
在第二个容器的最外层框架<div>元素中，添加一个“data-add-back-btn”属性。该属性表示是否在容器的左上角增加一个“回退”按钮，默认值为“false”；如果设置为“true”，将出现一个“back”按钮，单击该按钮，回退上一级的页面显示。
说明 如果是在一个页面中，通过“#”加对应“Id”的内部链接方式，可以实现多容器间的切换；但如果不是在一个页面，此方法将失去作用。因为在切换过程中，先需要找到页面，再去锁定对应“Id”容器的内容，而并非直接根据“Id”切换至容器中。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)