创建位置固定的header和footer
工具条固定在屏幕上方或者下方是一个很常见的界面设计，你可以为footer或者header添加 data-position="fixed"来实现这一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>跨平台移动应用</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page" data-title="第一个页面">
<header data-role="header" data-position="fixed">
<h1>跨平台移动应用</h1>
</header>
<div data-role="content">
<p>Hello world</p>
<a href="#page2">第二个页面</a>
</div>
<footer data-role="footer" data-position="fixed">
<h1>第一个页面底部</h1>
</footer>
</section>
<section id="page2" data-role="dialog" data-title="第二个页面">
<header data-role="header" data-position="fixed">
<h1>第二个页面</h1>
</header>
<div data-role="content">
<p>Hello world</p>
<a href="http://www.baidu.com/">第一个页面</a>
</div>
<footer data-role="footer" data-position="fixed">
<h1>第二个页面底部</h1>
</footer>
</section>
</body>
</html>
