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