我正在开发一个项目,该项目将在 html 页面上有数百个页面。
我非常担心在子页面<a href=#ID" >
之间导航这个子页面。有没有一种方法可以在每个子页面中使用一个按钮,从而将我带到下一个子页面,而我不必将每个子页面 ID 写入每个“下一步”按钮?
我正在开发一个项目,该项目将在 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/
如果您有更多问题,请随时提问。
我是这样解决的:
$(document).ready(function() {
$('.nextBtn').click(function() {
$page = $(this).closest('div[data-role="page"]').next();
$.mobile.changePage( $page, { transition: "slide", changeHash: false });
});
$('.prevBtn').click(function() {
$page = $(this).closest('div[data-role="page"]').prev();
$.mobile.changePage( $page, { transition: "slide", reverse: true, changeHash: false });
});
});
然后将上一个/下一个按钮放置在您喜欢的位置,只需确保上一个按钮类 prevBtn 和下一个按钮类 nextBtn。
例如:
<a href="#" class="ui-btn prevBtn">Previous</a>
<a href="#" class="ui-btn nextBtn">Next</a>