jquerymobile-5 back button和footer

使用jquerymobile的时候,我们新进入一个页面可能需要添加一个返回按钮,用户返回到上一个页面,我们可以使用上一篇文章中的方法,在Header中添加返回上一个页面的链接,但是这样有一点不好,如果这个页面有多个入口(即可以从多个页面跳入本页面),那么我们这个返回就得做判断了。在这种情况下我们可以使用jquerymobile的data-add-back-btn属性,并将其值设为true。这样jquerymobile会自动为我们记住该返回哪个页面。下面看一个例子代码:

<!DOCTYPE html>
<html>
<head>
<title>Back Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>
<div data-role="page">
	<div data-role="header"><h1>My Header</h1></div>	
	<div data-role="content">
	<p>
		<a href="#subpage">Go to the sub page...</a>
	</p>
	</div>		
</div>

<div data-role="page" id="subpage" data-add-back-btn="true">
	<div data-role="header"><h1>Sub Page</h1></div>	
	<div data-role="content">
	<p>
		<a href="" data-rel="back">Go back...</a>
	</p>
	</div>		
</div>
</body>
</html>

我们做手机应用的时候,一般会在下面添加一些按钮,这时候我们就可以在footer上添加按钮了。这里我们不使用真正的按钮,而是使用CSS来将A标签,做成按钮一下,在上面的程序中添加如下的代码:

<div data-role="footer" class="ui-bar">
  <a href="credits.html">Credits</a>
  <a href="contact.html">Contact</a>
</div>

会有如下的效果:



这里使用了一个ui-bar的样式,这个会使a标签增强为按钮的样式。
本人也刚开始学习,如果哪里写错了,还请指出。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值