Come mantenere la stessa intestazione/piè di pagina tra le pagine in jQueryMobile?

Question

Esiste un metodo semplice per mantenere la stessa intestazione/piè di pagina durante la navigazione delle pagine jQueryMobile? Le uniche soluzioni che ho trovato finora dipendono dall'iniettare in modo dinamico a cambio pagina, ma questo rovina le transizioni e semplicemente clona gli elementi, ho bisogno dell'originale.

Quindi c'è un modo ufficialmente supportato? Trovo strano che sembri l'unico a lottare con questo problema?

Answer 1

Una soluzione integrata per il tuo problema non esiste. jQuery Mobile non ha una soluzione che condividerà un'intestazione e un piè di pagina tra le pagine caricate.

L'unica cosa che puoi fare è iniettarli dinamicamente o averli dall'inizio. Nel tuo caso lo stai facendo nel momento sbagliato. Se si desidera aggiungere correttamente un'intestazione e un piè di pagina, è necessario farlo durante l'evento di pagina corretto.

Un esempio di lavoro: http://jsfiddle.net/Gajotres/xwrqn/

Swipe per cambiare pagine e vedere come funziona (non ho voglia di perdere tempo con l'aggiunta di pulsanti in ogni pagina).

$(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));  
}); 

Se lo si fa durante la pagebeforecreate questo innescherà solo una volta quando viene creata la pagina per una prima volta. Il contenuto dinamico verrà aggiunto e poiché pagebeforecreate viene attivato prima che il markup del contenuto sia stato migliorato, non sarà necessario preoccuparsi dello stile di intestazione e piè di pagina.

Si noti un attributo 'id-dati': 'footer' aggiunto a ogni intestazione e piè di pagina, poiché solo il contenuto verrà animato durante la transizione della pagina, l'intestazione e il piè di pagina avranno lo stesso aspetto. Inoltre, jsFiddle ha un bug, quando scorri tra le pagine salteranno a 1-2px. Questo non accadrà in un vero esempio di vita.

Answer 2

Il modo più semplice è aggiungere un attributo "ID dati" alle intestazioni e ai piè di pagina su tutte le pagine. Per rendere "persistente" l'intestazione/piè di pagina, utilizzare lo stesso ID dati su tutte le pagine.

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

Si desidera anche correggere intestazioni e piè di pagina con css o data position = "fixed".

Spero che questo aiuti.

Answer 3

Ecco come ho risolto un problema analogo:

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

mantiene la stessa intestazione/piè di pagina durante la navigazione nelle pagine jQueryMobile. Lo inietta dinamicamente a cambio pagina, rovina le transizioni, ma non clona gli elementi, dà l'originale.