2013-05-02 11 views
5

Potrzebowałem odświeżenia przy użyciu this technique. Po przejściu do nowej strony jQM poprawnie dodaje przycisk wstecz w nagłówku. Ale kiedy wracam do pierwszej strony, niepoprawnie pojawia się przycisk Wstecz. Czy można warunkowo utworzyć przycisk powrotu? Próbowałem ręcznie, tworząc przycisk wstecz i warunkowo ukrywając go na podstawie parametru w identyfikatorze URI, ale wydaje się, że po pojawieniu się przycisku nie mogę go ponownie ukryć.Przycisk z powrotem nagłówka z wymuszonym odświeżaniem

Edytuj: Oto kod, który demonstruje problem. Nie tylko nie ukrywa on niestandardowego przycisku wstecz po powrocie na stronę 1, ale nie ukrywa zawartości strony "1", gdy jesteś na stronie 2 lub odwrotnie. Wygląda na to, że jak tylko coś zostanie pokazane, nie można tego powtórzyć.

<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

Nie zmieniasz tutaj stron, dlatego wydarzenie 'pagehide' nie uruchomi się. Próbujesz pokazać/ukryć zawartość na tej samej stronie. – Omar

+0

Właściwie wygląda na to, że tak. Jeśli umieściłem 'alert ('foo');' w funkcji 'on ('pagehide')', będzie ono wywoływane przy każdej zmianie strony. – stdout

+0

Powinien wystrzelić, gdy zmieniasz strony, ale jeśli pokazujesz/ukrywasz div na tej samej stronie, nie będzie. Jednak w powyższym kodzie jest tylko jedna strona. sprawdź tę odpowiedź, daj mi znać, jeśli to jest to, czego szukasz http://stackoverflow.com/questions/16374046/jquery-mobile-back-buttons/16374970#16374970 – Omar

Odpowiedz

5

Oto poprawka. Daj przyciskowi wstecznemu klasę backButton. .hide() to, jeśli aktywna strona jest stroną główną page1, w przeciwnym razie jest to .show().

Demo

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

Jeśli masz jakieś pytania, proszę dać mi znać.

Powiązane problemy