jQuery Mobile 页面设计
现在我们来看下如何使用jQuery Mobile框架去设计页面元素。在jQuery Mobile框架设计的HTML页中，通常是一个页面中有一个页面容器，而页面容器中则存在多个页面。页面容器以date-role=“page”作标识，而普通页面以date-role=“content”作标识。在一个页面中，页面头部和尾部是可选的部分。在我们的这个应用中，有两个页面是都有头部和尾部的，一个页面没有头部和尾部，下面看示例代码：
<div data-role="page">
<div data-role="header">...</div>
<div id="contentWithHeaderAndFooter1" data-role="content">...</div>
<div data-role="footer">...</div>
<div data-role="header">...</div>
<div id="contentWithHeaderAndFooter2" data-role="content">...</div>
<div data-role="footer">...</div>
<div id="contentWithNoHeaderAndFooter" data-role="content">...</div>
</div>
<div data-role="header">...</div>
<div id="contentWithHeaderAndFooter1" data-role="content">...</div>
<div data-role="footer">...</div>
<div data-role="header">...</div>
<div id="contentWithHeaderAndFooter2" data-role="content">...</div>
<div data-role="footer">...</div>
<div id="contentWithNoHeaderAndFooter" data-role="content">...</div>
</div>
在上面的代码中，展示了如何在一个容器页面中包含了三个页面，其中有2个页面是有页头和页脚的，分别用data-role="header"和data-role="footer"标识。
在本应用中，创建帐号、通讯录列表和进度图标都是以内容页的形式出现，而在ListPage.html中将会有一个页面容器包裹着它们，而DetailPage.html中也有一个页面容器，其中包含三个页面，分别是“空的通讯录”，“已经存在的通讯录”和“提示是否删除通讯录”，下图表示了它们之间的结构关系：
▲
