2.1 jQuery Mobile页面结构
jQuery Mobile的许多功能效果需要借助于HTML 5的新增标记和属性，因此，页面必须以HTML 5的声明文档开始，在<head>标记中分别依次导入jQuery Mobile的样式文件、jQuery基础框架文件和jQuery Mobile插件文件，下面看一个jQuery Mobile的基本页面结构。
2.1.1 基本框架
在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个<div>标记的“data-role”属性设置为“page”，形成一个容器或视图；而在这个容器中最直接的子节点应该就是“data-role”属性为“header”、“content”、“footer”3个子容器，分别形成了“标题”、“内容”、“页脚”3个组成部分，用于容纳不同的页面内容。接下来通过一个简单实例进行展示。
实例2-1 jQuery Mobile基本的页面框架
1.功能说明
创建一个jQuery Mobile的基本框架页，并在页面组成部分中分别显示其对应内容名称。
2.实现代码
新建一个HTML页面2-1.htm，加入代码如代码清单2-1所示。
代码清单2-1 jQuery Mobile基本页面框架
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile基本页面框架</title>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>标题</h1></div>
<div data-role="content"><p>内容部分</p></div>
<div data-role="footer"><h4>页脚</h4></div>
</div>
</body>
</html>
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-1所示。
4.源码分析
本实例源码中，为了更好地支持HTML 5的新增加功能与属性，第一行以HTML 5的声明文档开始，即添加如下代码：
<!DOCTYPE html>
在<head>元素中添加一个名称为“viewport”的<meta>元素，并设置该元素的“content”属性，代码如下所示：
<meta name="viewport" content="width=device-width,initial-scale=1"/>
这行代码的功能是：设置移动设备中浏览器缩放的宽度与等级。通常情况下，移动设备的浏览器默认以“900px”的宽度显示页面，这种宽度会导致屏幕缩小，页面放大，不适合浏览。如果在页面中添加<meta>元素，并设置“content”的属性值为“width=device-width,initialscale=1”，可以使页面的宽度与移动设备的屏幕宽度相同，更加适合用户浏览。
在接下来的<body>元素中，将第一个<div>元素的“data-role”属性设置为“page”，形成一个容器；然后，在容器中分别添加3个<div>元素，依次将“data-role”属性设置为“header”、“content”、“footer”，从而形成了一个标准的jQuery Mobile页面框架。详细实现过程如代码中加粗部分所示。
图2-1 jQuery Mobile基本页面展示
2.1.2 多容器页面结构
在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。页面加载时，以堆栈的方式同时加载；容器访问时，以内部链接“#” 加对应“Id”的方式进行设置。单击该链接时，jQuery Mobile将在页面文档寻找对应Id号的容器，以动画效果切换至该容器中，实现容器间内容的访问。
实例2-2 jQuery Mobile多容器间的切换
1.功能说明
新建一个HTML页面，并在页面中添加2个“data-role”属性为“page”的<div>元素，作为2个页面容器。用户在第一个容器中选择需要查看天气预报的日期，单击某天后，切换至第二个容器，显示所选日期的详细天气情况。
2.实现代码
新建一个HTML页面2-2.htm，加入代码如代码清单2-2所示。
代码清单2-2 jQuery Mobile多容器间的切换
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile多容器页面结构</title>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>天气预报</h1></div>
<div data-role="content">
<p><a href="#w1">今天</a> | <a href="#">明天</a></p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
<div data-role="page" id="w1" data-add-back-btn="true">
<div data-role="header"><h1>今天天气</h1></div>
<div data-role="content">
<p>4～-7℃<br/>晴转多云<br/>微风</p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-2所示。
图2-2 页面中多容器间的切换
4.源码分析
在本实例页面中，从第一个容器切换至第二个容器时，采用的是“#”加对应“Id”的内部链接方式。因此，在一个页面中，不论相同框架的“page”容器有多少，只要对应的Id号唯一，就可以通过内部链接的方式进行容器间的切换。在切换时，jQuery Mobile会在文档中寻找对应“Id”的容器，然后通过动画的效果切换到该页面中。
从第一个容器切换至第二个容器后，如果想要从第二个容器返回第一个容器，有下列两种方法：
□在第二个容器中，增加一个<a>元素，通过内部链接“#”加对应“Id”的方式返回第一个容器。
□在第二个容器的最外层框架<div>元素中，添加一个“data-add-back-btn”属性。该属性表示是否在容器的左上角增加一个“回退”按钮，默认值为“false”；如果设置为“true”，将出现一个“back”按钮，单击该按钮，回退上一级的页面显示。
说明 如果是在一个页面中，通过“#”加对应“Id”的内部链接方式，可以实现多容器间的切换；但如果不是在一个页面，此方法将失去作用。因为在切换过程中，先需要找到页面，再去锁定对应“Id”容器的内容，而并非直接根据“Id”切换至容器中。
2.1.3 外部页面链接
虽然在一个页面中，可以借助容器的框架实现多种页面的显示，但是，把全部代码写在一个页面中会延缓页面被加载的时间，使代码冗余，且不利于功能的分工与维护的安全性。因此，在jQuery Mobile中，可以采用开发多个页面并通过外部链接的方式，实现页面相互切换的效果。下面通过一个简单的实例来介绍它是如何实现的。
实例2-3 jQuery Mobile外部页面链接切换
1.功能说明
在实例2-2的基础上，在Id号为“w1”的第二个容器中添加一个<em>元素。在该元素中显示“rttop.cn提供”字样。单击“rttop.cn”文本链接时，将以外部页面链接的方式加载一个名为“about.htm”的HTML页面。
2.实现代码
新建一个HTML页面2-3.htm，加入代码如代码清单2-3所示。
代码清单2-3 jQuery Mobile外部页面链接切换
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 外部页面链接</title>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>天气预报</h1></div>
<div data-role="content">
<p><a href="#w1">今天</a> | <a href="#">明天</a></p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
<div data-role="page" id="w1" data-add-back-btn="true">
<div data-role="header"><h1>今天天气</h1></div>
<div data-role="content">
<p>4～-7℃<br/>晴转多云<br/>微风</p>
<em style="float:right;padding-right:5px">
<a href="about.htm">rttop.cn</a>提供
</em>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
另外，新建一个用于外部链接的HTML页面about.htm，加入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>关于rttop</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header"><h1>关于rttop</h1></div>
<div data-role="content">
<p>
rttop.cn是一家新型高科技企业，正在努力实现飞翔的梦想。
</p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-3所示。
图2-3 外部页面链接的切换效果
4.源码分析
在jQuery Mobile中，如果单击一个指向外部页面的超级链接（如about.htm），jQuery Mobile将自动分析该URL地址，自动产生一个AJAX请求。在请求过程中，会弹出一个显示进度的提示框。如果请求成功，jQuery Mobile将自动构建页面结构，注入主页面的内容；同时，初始化全部的jQuery Mobile组件，将新添加的页面内容显示在浏览器中；如果请求失败，jQuery Mobile将弹出一个错误信息提示框，数秒后该提示框自动消失，页面也不会刷新。
如果不想采用AJAX请求的方式打开一个外部页面，只需要在链接元素中将“rel”属性设置为“external”，该页面将脱离整个jQuery Mobile的主页面环境，以独自打开的页面效果在浏览器中显示。
说明 如果采用AJAX请求的方式打开一个外部页面，注入主页面的内容也是以“page”为目标，“page”以外的内容将不会被注入主页面中；另外，必须确保外部加载页面URL地址的唯一性。
2.1.4 页面后退链接
上一节介绍了将“page”容器的“data-add-back-btn”属性设置为“true”可以后退至上一页，在jQuery Mobile页面中，还可以添加一个<a>元素，将该元素的“data-rel”属性设置为“back”，同样可以实现后退至上一页的功能。因为一旦该链接元素的“data-rel”属性设置为“back”，单击该链接将被视为后退行为，并且将忽视“href”属性的URL值，直接退回至浏览器历史的上一页面。
实例2-4 jQuery Mobile页面后退链接
1.功能说明
在新建的HTML中，添加2个“page”容器，当单击第一个容器中的“测试后退链接”链接时，切换到第二个容器；单击第二个容器中的“返回首页”链接时，将以回退的方式返回到第一个容器中。
2.实现代码
新建一个HTML页面2-4.htm，加入代码如代码清单2-4所示。
代码清单2-4 jQuery Mobile页面后退链接
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile页面后退链接</title>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>测试</h1></div>
<div data-role="content">
<p><a href="#e">测试后退链接</a></p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
<div data-role="page" id="e">
<div data-role="header"><h1>测试</h1></div>
<div data-role="content">
<p>
<a href="http://www.rttop.cn" data-rel="back">
返回首页
</a>
</p>
</div>
<div data-role="footer"><h4>?2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3.页面效果
该页面在Opera Mobile Emulator 12.0下执行的效果如图2-4所示。
图2-4 页面的后退功能
4.源码分析
在本实例的第二个“page”容器中，用户在容器中单击“返回首页”时，可以后退到上一页，方法是在添加<a>元素时，将“data-rel”属性设置为“back”，表明任何的单击操作都被视为回退动作，并且忽视元素“href”属性值设置的URL地址，只是直接回退到上一个历史记录页面；这种页面切换的效果可以用于关闭一个打开的对话框或页面。
说明 在设置回退链接属性时，除将“data-rel”属性设置为“back”外，还要尽量将“href”属性设置为一个可以访问的正确URL地址，以确保更多的浏览器可以单击该链接按钮。