如何为HTML5和CSS3编程构建多页移动文档
能够精简HTML5和CSS3网页，使其适合移动设备，这是很棒的选择，但是显然，如果页面较小，则需要更多。
移动应用程序经常使用翻页的隐喻将更多数据打包到一小块屏幕空间中，而jQuery移动库还有另一个很棒的工具可以简化此操作。
到目前为止，该应用程序看起来就像您到目前为止看到的其他jQuery移动应用程序一样。
一件事是不同的，那就是标题中的按钮。
对于移动应用程序来说，在标题中具有导航按钮是很常见的。
按下一步按钮。
经过漂亮的淡入淡出过渡后，将显示下一页。
该标题中有两个按钮。
再次按Next(下一步)会将用户带到第三页。
第三页再次非常熟悉，但是这一次它在页眉左侧有一个按钮，在主内容区域中有另一个按钮。
这三页有趣的是，它们根本不是三页！总共只有一页，旨在像三个不同的页面一样工作。
这种安排有两个优点。
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以使页脚和pre元素按您希望的方式运行。
- 建立您的页面。
您可以根据需要构建任意数量的页面，但是它们都遵循相同的通用jQuery移动模式：创建具有页眉，内容和页脚div的页面div。
使用data-role属性指示每个div的角色。
- 使用id属性命名每个页面级div。
因为用户将翻阅页面，所以每个页面都需要某种标识符。
给每个页面一个唯一的id属性。
- 在标题内建立按钮。
此示例中唯一真正新的部分(除了页面翻转本身)是标题中的按钮。
跳到第2页标题，您会看到一些非常有趣的内容：
如果您在具有标题data-role的元素内定义链接，则该链接将自动成为按钮。
此外，定义的第一个此类链接将自动放置在标题的左侧，而第二个将放置在右侧。
- 强制向右按一个按钮。
如果您希望按钮位于右侧，请向该按钮添加一个类：
- 使用内部锚点在页面之间跳转。
查看所有按钮中的URL。
它们以散列开头，该散列表示文档内部的内部链接。
请记住，尽管对于用户来说，感觉就像是三个不同的页面，但实际上这只是一个大网页。
- 实验过渡。
请仔细查看第三页上的按钮：
此按钮具有特殊的数据转换属性。
默认情况下，移动页面会随着淡入淡出而交换。
您可以将过渡设置为滑动，向上滑动，向下滑动，弹出，淡入淡出或者翻转。
您还可以通过添加另一个属性来反转转换：data-direction =" reverse"。
