页面

页面是jQuery Mobile的主要交互单元，用于将内容分组到一个可以在视图页面转换和输出进行动画处理的逻辑视图。 HTML文档以一个“page”和AJAX导航系统将按需加载其他页面到DOM中开始用于用户浏览。由此可见，一个HTML文件可以与它里面的多个“page”构建和框架将这些本地视图之间转换，无需从服务器请求内容。

移动页面结构

一个jQuery Mobile的网站必须有一个HTML5的doctype的开始，以充分利用所有的框架的功能。 （旧设备的浏览器无法解析HTML5将安全地忽略了“doctype”和各种自定义属性。）

在head中引用的jQuery，jQuery Mobile和手机主题CSS都是必需的。最简单的方式开始是链接到托管在jQuery的CDN或为获得最佳性能的文件，建立一个自定义包。

如何链接到CDN，其中[version]应该被替换成实际版本。详见网站下载页面。


<!DOCTYPE html> 
<html>
<head>
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
	...content goes here...
</body>
</html>

meta viewport 标签

注意在head中有个viewport的meta标签来指定浏览器显示页面的缩放级别和尺寸。如果没有设置，许多移动浏览器将使用一个“虚拟”页面，宽大约900像素，使其与现有的桌面网站一样工作，但屏幕可能会缩小或太宽。通过设置viewport的属性content="width=device-width, initial-scale=1"，这样宽度将被设置到设备屏幕的像素宽度。


<meta name="viewport" content="width=device-width, initial-scale=1">

这些设置不会禁用用户的缩放网页的功能，从一个辅助的角度来说是不错的。目前在iOS中有一个小问题，这些视窗设置改变方向时，没有正确地设置宽度，将在未来的版本修复。你可以设置其他视窗的值来禁用缩放，因为这是你的页面内容的一部分，而不是库。

body内部: Pages

在<body>标签中, 每一个视图或者“page”在移动设备上由具有 data-role="page"属性的元素(通常是div)标识。


<div data-role="page">
	...
</div>

在"page"容器内，任何合法的HTML标记都可以被使用，但对于jQuery Mobile，典型的页面中直接直接节点是具有data-role="header",class="ui-content"和data-role="footer"的div。


<div data-role="page">
	<div data-role="header">...</div>
	<div role="main" class="ui-content">...</div>
	<div data-role="footer">...</div>
</div>

页面组合：基本单页模板

全部组合到一起就是一个标准的样板页面模板，你可以从这开始项目： 


<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
显示页面模板

多页模板结构

一个单一的HTML文档可包含由多个有data-role为"page"的div堆叠在一起的多个“page”。每个“page”块都需要一个唯一的ID（id="foo"），将被用于“page”(href="#foo")之间的内部链接。当链接被点击后，jQuery Mobile将查找内部“页”的id并切换成视图。

有一个两个“page”的网站建立了两个jQuery Mobile的div通过链接到一个id放在每个页面的包装导航的例子。请注意，只需要在页面包装的ID，以支持内部页面链接，并且是可选的，如果每个页面都是一个单独的HTML文档。两个页面看起来像在body元素里面。


<body>

<!-- Start of first page -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#bar">bar</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>
查看多模板页

请注意:由于我们使用hash来跟踪导航历史记录中的所有AJAX“页面”，在jQuery Mobile中还不能一个页面上深层链接锚(index.html#foo)。因为框架会查找“page”用#foo的id而不是滚动到id所在的内容区。

所有元素的id属性不仅在所给页面上唯一，而且在网站上不同页面中也是唯一的。因为jQuery Mobile的单页导航模型允许不同的“pages”在同一时间在DOM中展示。在多页模板上也同样适用。

约定，而非要求

虽然上面列出的页面结构是建立使用jQuery Mobile标准的Web应用程序的一个推荐的方法，框架是非常灵活的文档结构。 page, header, content和footer的data-role元素是可选的，提供一些基本的格式和结构大多是有帮助的。 那个曾经被要求自动初始化工作的页面包装现在是可选的单页文件，所以没有任何需要标记的。 对于自定义布局的网页，所有这些结构元素可以省略，AJAX导航和所有控件将会就像在样板结构上工作。 在幕后，如果它不包含在标记中，因为它需要被管理页面，所以框架将注入页面的包装，但现在开始标记可以是非常简单的。

注意:在多页设置中，为了组合内容到多个页面，你需要页封装的标记

还应注意:如果body容器中不包含有data-role="page"属性的divs, jQuery Mobile会如上所述地包含整个body的内容作为页面的div。 jQuery Mobile使用jQuery的wrapAll()方法来做到这一点。通过XHR查找被包裹里面的内容的任何脚本标签，并装载每个脚本源。 如果脚本在body中显示，浏览器最终会加载两次。 因此我们强烈推荐jQuery Mobile文档中body包含data-role="page"属性的div。

预读页

当使用单页面模板的时候，你可以预取页面到DOM，使他们可以当用户访问它们的时候立即显示。为了预读页面，在指向该页面的链接上添加data-prefetch属性。 然后jQuery Mobile在主页面已经加载并在pagecreate的事件触发之后后台加载目标页面。

此链接预读页面

另外，你可以使用页面容器插件的load()的方法，以编程方式预读页面。


$( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } );

DOM缓存

在DOM中保持大量的页面会很快填满浏览器的内存，并导致一些移动浏览器的变慢，甚至崩溃。jQuery Mobile有一个简单的机制来保持DOM整洁。

当通过AJAX加载页面的时候，它会标识该页面将会在导航离开之后移除（技术上说，触发pagehide事件）。当你重新访问一个已经移除的页面，浏览器将会从缓存中恢复页面的HTML文件。如果不能，就会从服务器重新获取。（在嵌套的ListView中，jQuery Mobile在你浏览不包含列表一部分的时候移除所有的组成嵌套列表的页面。）

如果你愿意，你可以告诉jQuery Mobile在DOM中保持前面访问的页面来替代移除。这可以让你缓存页面以致于在你想返回的时候即刻显示。


$.mobile.page.prototype.options.domCache = true;

另外，您可以添加data-dom-cache="true"属性到页面的容器来缓存一个特定的页面。

为了保持DOM中的所有以前访问过的网页，在页面插件设置的domCache的选项为true，就像这样：


pageContainerElement.page({ domCache: true });

注意，第一页的页面内容不从DOM中删除，只通过AJAX加载页面。多页模板中的页面完全不受该功能影响，jQuery Mobile只影响通过AJAX加载的页面。