javascript - Jquery 手机 : Add next and previous buttons

标签 javascript jquery html css 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/

如果您有更多问题,请随时提出。

关于javascript - Jquery 手机 : Add next and previous buttons,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15121019/

相关文章:

javascript - Flickity Slider 按子类删除单元格

javascript - React + Jest - 在 IMG 标签上测试 `error` 事件

javascript - 模拟文件中的 spy 功能

jquery - 从控制台日志中删除不必要的错误?

javascript - jQuery .hide(),然后是基于文本输入的 .show()

javascript - 选择多个换行符正则表达式

jquery - 如何修复 IE6 上的不透明度

android - 强制登录 jQuery Mobile/Phonegap 应用程序重新启动

html - anchor 标记文本从 div 框溢出

python - BeautifulSoup 在每个开始和结束标签之前和之后添加额外的空白