在开发的过程中，我们经常会遇到在页面的底部有一排按钮，我们可以根据这些按钮切换页面，或者执行一些动作。在jquerymobile中我们可以在footer和header上添加这样的导航。下面看一个例子代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>data-role="page"</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>
<script src="jqm/jquery-1.8.2.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Home</h1>
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">Home</a></li>
<li><a href="b.html" >Credits</a></li>
<li><a href="c.html" >Contact</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>
This is the Home Page
</p>
</div>
<div data-role="footer" data-position="fixed" data-id="footernav">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">Home</a></li>
<li><a href="b.html" >Credits</a></li>
<li><a href="c.html" >Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
在使用一些手机应用的时候，在底部会有一个固定的导航或者叫做一组按钮，不会随着页面的切换而进行切换。使用jquerymobile我们也可以实现这样的效果，步骤如下：
1、在所有的页面中出现相同的footer
2、这些footer使用相同的data-id
3、在激活的页面对应的导航上添加两个class：ui-btn-active ui-state-persist
下面给出一个小例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>data-role="page"</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>
<script src="jqm/jquery-1.8.2.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="page">
<div data-role="header"><h1>a</h1></div>
<div data-role="content">
<p>
This is the a Page
</p>
</div>
<div data-role="footer" data-position="fixed" data-id="footernav">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active ui-state-persist">a</a></li>
<li><a href="b.html">b</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>data-role="page"</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.2.0.min.css"/>
<script src="jqm/jquery-1.8.2.min.js"></script>
<script src="jqm/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="page">
<div data-role="header"><h1>a</h1></div>
<div data-role="content">
<p>
This is the a Page
</p>
</div>
<div data-role="footer" data-position="fixed" data-id="footernav">
<div data-role="navbar">
<ul>
<li><a href="a.html">a</a></li>
<li><a href="b.html" class="ui-btn-active ui-state-persist">b</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>