jquerymobile-7 导航和多页面固定导航
在开发的过程中，我们经常会遇到在页面的底部有一排按钮，我们可以根据这些按钮切换页面，或者执行一些动作。在jquerymobile中我们可以在footer和header上添加这样的导航。下面看一个例子代码：
在使用一些手机应用的时候，在底部会有一个固定的导航或者叫做一组按钮，不会随着页面的切换而进行切换。使用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">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>
这样我们在这两个页面切换的时候，底部的导航栏至少在视觉上是感觉不出来动的，更深层次的我也没有研究。但是我猜测jquerymobile是固定了，然后在Dom中更新上面的内容，只是猜测没有根据。