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-7 导航和多页面固定导航_第1张图片

在使用一些手机应用的时候,在底部会有一个固定的导航或者叫做一组按钮,不会随着页面的切换而进行切换。使用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 导航和多页面固定导航)