jquerymobile-7 导航和多页面固定导航
Posted 孟祥月
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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中更新上面的内容，只是猜测没有根据。
以上是关于jquerymobile-7 导航和多页面固定导航的主要内容，如果未能解决你的问题，请参考以下文章