如何为HTML5和CSS3编程构建多页移动文档
它能够削减HTML5和CSS3网页，因此它适合移动设备，但显然如果页面较小，则需要更多。
移动应用程序经常使用页面翻转隐喻来包装更多数据在一小块屏幕房地产中，jquery移动图书馆有另一个精彩的工具来实现这一简单。
到目前为止，这个应用程序看起来就像到目前为止你见过的其他jQuery移动应用程序。
有一件事是不同的，这就是标题中的按钮。
移动应用程序在标题中具有导航按钮非常常见。
按下一个按钮。
在漂亮淡入渐渐转换后，将显示下一页。
标题中有两个按钮。
再次按下接下来将用户带到第三页。
第三页再次非常熟悉，但这次它在标题左侧有一个单个按钮，以及主内容区域中的另一个按钮。
这三页的有趣的是他们根本不是三页！这只是一个页面，旨在像三个不同的页面一样。
这种安排有几个优点。
CSS和JavaScript资源只需加载一次：这使系统保持一致并略微提高负载时间。
没有滞后时间：当文档加载时，整个东西都在内存中，即使只有一个部分一次可见。这允许我们在页面之间快速移动，而无需等待服务器访问。
当我们希望将此类型的页面视为几个较小的页面时，我们通常会实现此类机制，以便用户不必滚动。
这是一个全部内容的Multipage.html的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multiPage.html</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>
<style type = "text/css">
#foot {
font-size: 75%;
font-style: italic;
text-align: center;
}
pre {
margin-left: auto;
margin-right: auto;
background-color: white;
width: 8em;
}
</style>
</head>
<body>
<div id = "page1" data-role = "page" data-theme = "b">
<div id="head" data-role = "header">
<h1>Page One</h1>
<a href = "#page2" class = "ui-btn-right">next</a>
</div>
<div id="content" data-role = "content">
<p>
This is the index
</p>
<ul>
<li><a data-role = "button" href = "#page1">page 1</a></li>
<li><a data-role = "button" href = "#page2">page 2</a></li>
<li><a data-role = "button" href = "#page3">page 3</a></li>
</div>
<div id="foot" data-role = "footer" data-position = "fixed">
from HTML All in One for theitroad
</div>
</div>
<div id = "page2" data-role = "page" data-theme = "b">
<div id="head" data-role = "header">
<a href = "#page1">prev</a>
<h1>Page Two</h1>
<a href = "#page3">next</a>
</div>
<div id="content" data-role = "content">
<p>
The second page is much like the first, except
it isn't the first, and it has text rather than
buttons. It's the second page.
If you like the first, I suppose you can
go back, but you should really go to the next
page, because I hear it's really nice.
</p>
</div>
<div id="foot" data-role = "footer" data-position = "fixed">
from HTML All in One for theitroad
</div>
</div>
<div id = "page3" data-role = "page" data-theme = "b">
<div id="head" data-role = "header">
<a href = "#page2">prev</a>
<h1>Page Three</h1>
</div>
<div id="content" data-role = "content">
<pre>
3333333
3 3
3
33333
3
3 3
3333333
</pre>
<p>
<a href = "#page1" data-role = "button" data-transition = "flip">
Go to index
</a>
</p>
</div>
<div id="foot" data-role = "footer" data-position = "fixed">
from HTML All in One for theitroad
</div>
</div>
</body>
</html>
虽然这个例子的代码很长，但它不会打破很多新的地面。
加载jQuery移动内容。
从jQuery.com中拉入必要CSS和JavaScript文件。应用自己CSS。
即使我们从jQuery"借用"CSS代码，我们仍然可以允许我们自己添加。我们可以添加CSS以使页脚和预元素的行为我们想要的方式。构建页面。
我们可以根据需要构建尽可能多的页面，但它们都遵循相同的jQuery Mobile模式：创建页面div与标题，内容和页脚div。使用数据角色属性来指示每个div的角色。使用id属性命名每个页级div。
由于用户将翻转页面，因此每个页面都需要某种标识符。为每个页面提供唯一的ID属性。在标题中构建按钮。
此示例的唯一真正新的一部分(除了页面翻转本身)是标题中的按钮。跳过第2页标题，你会看到一些非常有趣的东西：
<a href = "#page1">prev</a> <h1>Page Two</h1> <a href = "#page3">next</a>
如果在具有标题数据角色的元素内定义一个链接，则该链接将自动成为按钮。此外，定义的第一个这样的链接将自动放置在头部的左侧，第二个将放置在右侧。
- 强制单个按钮向右。
如果我们希望按钮在右侧，请为按钮添加类：
<h1>Page One</h1> <a href = "#page2" class = "ui-btn-right">next</a>
使用内部锚点跳过页面之间。
查看所有按钮中的URL。它们以哈希开头，这表示文档中的内部链接。请记住，虽然这感觉像是用户的三个不同的页面，但它真的是所有的大网页。实验过渡。
请注意第三页的按钮：
<a href = "#page1" data-role = "button" data-transition = "flip"> Go to index </a>
此按钮具有特殊的数据转换属性。默认情况下，移动页面随逐渐转换。我们可以将转换设置为幻灯片，滑动，滑出，流行，淡入淡出或者翻转。我们还可以通过添加另一个属性来反转转换：data-direction ="反向"。
