2013-05-02 19 views
5

this technique'u kullanarak yenilemeyi zorlamak zorundaydım. Yeni bir sayfaya gittiğimde jQM doğru bir şekilde başlığımda bir geri düğmesi ekler. Ama ilk sayfaya geri döndüğümde, geri düğmesi yanlış görüntüleniyor. Koşullu bir geri düğmesi oluşturmak mümkün mü? Manuel olarak bir geri düğmesi oluşturmayı ve URI'deki bir parametreye göre koşullu olarak gizlemeyi denedim, ancak görüntülendiğinde, bir daha asla gizleyemediğim görülüyor.Zorla yenilemeyi sağlayan başlık geri düğmesi

Düzeltme: Sorunu gösteren bazı kodlar İşte. 1. sayfaya geri döndüğünüzde, yalnızca özel geri düğmesini gizlemekle kalmaz, aynı zamanda, sayfa 2'de veya sayfa dışındayken "sayfa 1" içeriğini de gizlemez. Görünen o ki bir şey gösterildikten sonra rehidden olamaz.

<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> 
+0

Burada sayfaları değiştirmiyorsunuz, bundan dolayı, 'pagehide' olayı tetiklenmiyor. Yapmaya çalıştığınız, aynı sayfadaki içerikleri göstermek/gizlemek. – Omar

+0

Aslında öyle görünüyor. Eğer bir 'alert (' foo ') koyarsam, '' in (' pagehide ') 'fonksiyonunda her sayfa değişikliğiyle patlar. – stdout

+0

Sayfaları değiştirdiğinizde yanması gerekir, ancak aynı sayfa içinde div gösterir/gizlerseniz, olmaz. Ancak, yalnızca yukarıdaki kodda bir sayfanız var. Bu cevabı kontrol edin, http://stackoverflow.com/questions/16374046/jquery-mobile-back-buttons/16374970#16374970 – Omar

cevap

5

İşte düzeltme. Arkadaki düğmeye backButton bir sınıf verin. .hide() etkin sayfa ana sayfa page1 ise, .show() ise. Herhangi bir sorunuz varsa Demo

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

, lütfen bana bildirin.

İlgili konular