带强制刷新的标头后退按钮

我需要使用this technique强制刷新。当我导航到新页面时，jQM在我的页眉中正确添加了一个后退按钮。但是当我回到第一页时，后退按钮出现错误。是否可以有条件地创建后退按钮？我试着手动创建一个后退按钮，并根据URI中的参数有条件地隐藏它，但似乎一旦按钮出现，我再也不能隐藏它了。带强制刷新的标头后退按钮

编辑：下面是一些演示问题的代码。当您回到第1页时，它不会隐藏自定义后退按钮，但当您处于第2页时，它不会隐藏“第1页”内容，反之亦然。看来一旦有东西出现，它就不能被重新隐藏。

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
     <script> 
      var backButtonVar = null; 
      var page1Var = null; 
      var page2Var = null; 
     </script> 
    </head> 

    <body> 
     <div data-role="page" data-add-back-btn="false"> 
      <div data-role="header"> 
       <h1>Test</h1> 
       <a id="backButton" data-role="button" data-direction="reverse" data-rel="back" data-icon="arrow-l" data-iconpos="left">MyBack</a> 
      </div> 

      <div id="page1" data-role="content"> 
       <a href="index.html?id=2">Go to page 2</a> 
      </div> 

      <div id="page2" data-role"content"> 
       This is page 2 
      </div> 

      <script> 
       $(document).ready(function() { 
        jQuery(document).on('pagehide', 'div', function(event, ui) { 
         var page = jQuery(event.target); 
         page.remove(); 
        }); 

        backButtonVar = $('#backButton'); 
        page1Var = $('#page1'); 
        page2Var = $('#page2'); 
        // Is this the root? 
        if (window.location.search == '') { 
         backButtonVar.hide(); 
         page1Var.show() 
         page2Var.hide() 
        } else { 
         backButtonVar.show(); 
         page1Var.hide() 
         page2Var.show() 
        } 
       }); 
      </script> 
     </div> 
    </body> 
</html>

来源

2013-05-02 stdout

你不会在这里改变页面，因此'pagehide'事件不会触发。你要做的是在同一页面中显示/隐藏内容。 – Omar 2013-05-06 08:43:20

其实它似乎确实如此。如果我在'on（'pagehide'）'函数中放置一个'alert（'foo'）;'，它会在每次页面更改时触发。 – stdout 2013-05-06 12:40:20

它应该在更改页面时触发，但如果您在同一页面中显示/隐藏div，则不会。但是，只有上面的代码中有一个页面。检查这个答案，让我知道如果这是你要找的东西http://stackoverflow.com/questions/16374046/jquery-mobile-back-buttons/16374970#16374970 – Omar 2013-05-06 12:46:10

这是修复。给后退按钮一个类backButton。 .hide()它如果活动页面是主页page1，否则.show()它。

Demo

$('.backButton').hide(); 
$(document).on('pagebeforeshow', function() { 
var activePage = $.mobile.activePage; 
if (activePage[0].id != 'page1') { 
    $('.backButton').show(); 
} 
else { 
    $('.backButton').hide(); 
} 
});

如果您有任何疑问，请让我知道。

来源

2013-05-07 07:56:14 Omar

带强制刷新的标头后退按钮

回答

相关问题