Jak zachować ten sam nagłówek/stopkę na stronach w jQueryMobile?

Question

Czy istnieje łatwa metoda na zachowanie tego samego nagłówka/stopki podczas nawigacji na stronach jQueryMobile? Jedyne rozwiązania, jakie do tej pory spotkałem, polegają na dynamicznym wstrzykiwaniu go na zmianę strony, ale to powoduje zmianę przejść i po prostu klonuje elementy, potrzebuję oryginału.

Czy istnieje oficjalnie obsługiwany sposób? Wydaje mi się dziwne, że wydaje mi się, że jedyny boryka się z tym problemem?

Answer 1

Wbudowane rozwiązanie Twojego problemu nie istnieje. jQuery Mobile nie ma rozwiązania, które będzie współdzielić nagłówek i stopkę pomiędzy załadowanymi stronami.

Jedyne co możesz zrobić, to dynamiczne wstrzykiwać je lub mieć je od samego początku. W twoim przypadku robisz to w nieodpowiednim momencie. Jeśli chcesz poprawnie dodać nagłówek i stopkę, musisz to zrobić podczas prawidłowego zdarzenia strony.

przykład roboczych: http://jsfiddle.net/Gajotres/xwrqn/

Swipe zmianie stron i zobaczyć jak to działa (nie chciałem zajmować się dodawanie przycisków na każdej stronie).

$(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this)); 
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));  
}); 

Jeśli zrobisz to podczas tworzenia strony, to wywoła TYLKO jeden raz, gdy strona zostanie utworzona po raz pierwszy. Zawartość dynamiczna zostanie dodana, a ponieważ funkcja pagebeforecreate zostanie uruchomiona przed dodaniem znaczników zawartości, nie będziesz musiał się martwić stylizacją nagłówka i stopki.

Zwróć uwagę na atrybut "identyfikator danych": "stopka" dodana do każdego nagłówka i stopki, ponieważ tylko treść będzie animowana podczas przejścia strony, nagłówek i stopka będą wyglądać tak samo. Ponadto, jsFiddle ma błąd, przesuwając po stronach, przeskoczy 1-2px. To się nie stanie w rzeczywistym życiu.

Answer 2

Najprostszym sposobem jest dodanie atrybutu "identyfikator danych" do nagłówków i stopek na wszystkich stronach. Aby nagłówek/stopka była "trwała", używaj tego samego identyfikatora danych na wszystkich stronach.

<div id="page1"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

<div id="page2"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

Można by również chcą usunąć nagłówki i stopki albo z CSS lub dane pozycji = „Fixed”.

Mam nadzieję, że to pomoże.

Answer 3

Oto jak rozwiązać podobny problem:

 $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) { 
      $("#header").prependTo(ui.toPage); 
      $("#control-panel").appendTo(ui.toPage); 
     }); 

utrzymuje ten sam nagłówek/stopkę podczas przeglądania stron jQueryMobile. Wstrzykuje dynamicznie na zmianę strony, wkręca przejścia, ale nie klonuje elementów, podaje oryginał.