在使用一些手机应用的时候,在底部会有一个固定的导航或者叫做一组按钮,不会随着页面的切换而进行切换。使用jquerymobile我们也可以实现这样的效果,步骤如下:
1、在所有的页面中出现相同的footer
2、这些footer使用相同的data-id
3、在激活的页面对应的导航上添加两个class:ui-btn-active ui-state-persist
<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>