Jquery Mobile：添加下一个和上一个按钮

时间：2022-08-24 10:42:34

I am working on a project that will have hundreds of pages into on html page.

我正在开发一个在html页面上有数百页的项目。

I am very concern about navigating this sub-pages using <a href=#ID" > to move forward between sub-pages. Is there a way to use one button into every sub-page that will take me to the next sub-page in a way that I dont have to write every sub-page ID into every "Next" button ?

我非常担心使用在子页面之间向前移动来浏览这些子页面。有没有办法在每个子页面中使用一个按钮将我带到下一个子页面以某种方式我不必将每个子页面ID写入每个“下一步”按钮?

2 个解决方案

#1

6  

Back button :

jQuery Mobile has out of box solution for a back button on every page.

jQuery Mobile为每个页面上的后退按钮提供了开箱即用的解决方案。

<script>
    $(document).on('mobileinit', function () {
        $.mobile.ignoreContentEnabled = true;
    });
</script>

This code must be placed before jQuery Mobile initialization, like this:

此代码必须放在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>

Next button :

This one is a little bit tricky, auto generated next button will only work if you have 1 html with multiple pages solution. This will provide you with an information of a next page in line, so to create next button use this code:

这个有点棘手,自动生成的下一个按钮只有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());
    }  
});

Working example :

Here's a working example of this solution: http://jsfiddle.net/Gajotres/BnB7X/

以下是此解决方案的一个工作示例:http://jsfiddle.net/Gajotres/BnB7X/

If you have more questions feel free to ask.

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

#2

0  

I solved it this way:

我这样解决了:

$(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 });
    });

});

Then place the previous/next buttons where ever you like, just make sure that the previous button class prevBtn and the next button class nextBtn.

然后将上一个/下一个按钮放在您喜欢的位置,只需确保前一个按钮类prevBtn和下一个按钮类nextBtn。

For example:

<a href="#" class="ui-btn prevBtn">Previous</a>
<a href="#" class="ui-btn nextBtn">Next</a>

#1

6  

Back button :

jQuery Mobile has out of box solution for a back button on every page.

jQuery Mobile为每个页面上的后退按钮提供了开箱即用的解决方案。

<script>
    $(document).on('mobileinit', function () {
        $.mobile.ignoreContentEnabled = true;
    });
</script>

This code must be placed before jQuery Mobile initialization, like this:

此代码必须放在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>

Next button :

This one is a little bit tricky, auto generated next button will only work if you have 1 html with multiple pages solution. This will provide you with an information of a next page in line, so to create next button use this code:

这个有点棘手,自动生成的下一个按钮只有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());
    }  
});

Working example :

Here's a working example of this solution: http://jsfiddle.net/Gajotres/BnB7X/

以下是此解决方案的一个工作示例:http://jsfiddle.net/Gajotres/BnB7X/

If you have more questions feel free to ask.

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

#2

0  

I solved it this way:

我这样解决了:

$(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 });
    });

});

Then place the previous/next buttons where ever you like, just make sure that the previous button class prevBtn and the next button class nextBtn.

然后将上一个/下一个按钮放在您喜欢的位置,只需确保前一个按钮类prevBtn和下一个按钮类nextBtn。

For example:

<a href="#" class="ui-btn prevBtn">Previous</a>
<a href="#" class="ui-btn nextBtn">Next</a>
标签：

相关文章