use*_*326 3 javascript jquery html5 css3 jquery-mobile
我正在开发一个在html页面上有数百页的项目.
我非常担心使用<a href=#ID" >子页面之间的向前移动来导航这些子页面.有没有办法在每个子页面中使用一个按钮,将我带到下一个子页面,我不必将每个子页面ID写入每个"下一步"按钮？
jQuery Mobile为每个页面上的后退按钮提供了开箱即用的解决方案.
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
此代码必须放在jQuery Mobile初始化之前,如下所示:
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
这个有点棘手,自动生成的下一个按钮只有你有1个html的多页解决方案才有效.这将为您提供下一页的信息,因此要创建下一个按钮,请使用以下代码:
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
}
});
以下是此解决方案的工作示例:http://jsfiddle.net/Gajotres/BnB7X/
如果您有更多问题,请随时提出.
| 归档时间： |
|
| 查看次数： |
4141 次 |
| 最近记录： |