W jQuery Mobile chcę załadować PageContainers z zewnętrznych plików. Mogę dodać znaczkę do mojej dom, ale problem, z którym stoję później, jest to, że tak szybko, jak przejdę do # Page2, cały # Page1-DIN znika z Domu, a zatem nie mogę nawigować z powrotem (patrz zrzuty ekranu poniżej).

dom przed kliknięciem "Przejdź do strony 2"

before

dom po kliknięciu "Przejdź do strony 2"

after

Jak widać, cały # Page1-Div zniknął na dobre. Dlaczego? jakieś pomysły? Zobacz mój znacznik i kod poniżej:

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

page1.html

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

page2.html

<div data-role="page" id="page2" class="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

Uwagi: To jest pytanie śledcze do tego: jQuery mobilne - dzielenie stron do różnych plików

3
Christian 14 sierpień 2014, 10:42

2 odpowiedzi

Najlepsza odpowiedź

JQuery Mobile usuwa strony zewnętrzne, gdy nawigujesz z nimi. Powinieneś pozostawić bazową stronę buforowaną zamiast ładowania wszystkich stron.

  • Rozwiązanie One: in Test.html, dodaj Markup HTML o stronie1.html i załaduj stronę2.html zewnętrznie.

  • Rozwiązanie Dwa: Dodaj data-dom-cache="true" do Page1 DIL, aby zachować go, nawet jeśli jest załadowany zewnętrznie.

      <div data-role="page" id="page1" data-dom-cache="true">
    

Aktualizacja

Możesz przybrać ze sobą wszystkie strony zewnętrzne bez konieczności dodania data-dom-cache do każdej strony div. Wszystko, co musisz zrobić, to globalnie ustawiony domCache Opcja widgetu strony do true na imprezie mobileinit. Kod powinien być umieszczony po jQuery.js i przed jQuery-mobile.js.

<script src="jquery.js" />
<script>
   $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.domCache = true;
   });
</script>
<script src="jquery-mobile.js" />
4
Community 20 czerwiec 2020, 09:12

W tym przypadku powinieneś spróbować ręcznie inicjować stronę

W Page1:

$(document).bind("mobileinit", function () {
    ...
    $.mobile.autoInitializePage = false;
    $.mobile.initializePage();
}); 

W Page2:

$(function () {
    $.mobile.activePage = null;
    $.mobile.initializePage();
});

To jest moje rozwiązanie do przełączania 2 stron nie w tym samym HTML.

0
Christian 14 sierpień 2014, 07:05