¿Cómo mantener el mismo encabezado/pie de página en las páginas de jQueryMobile?

jquery-mobile layout

Question

¿Existe un método fácil para mantener el mismo encabezado / pie de página al navegar por las páginas de jQueryMobile? Las únicas soluciones que encontré hasta ahora se basan en inyectarlas dinámicamente en el cambio de página, pero esto complica las transiciones y solo clona los elementos, necesito el original.

Entonces, ¿hay una forma oficialmente apoyada? ¿Me resulta extraño que parezca el único que lucha con este problema?

Answer 1

Aquí es cómo resolví un problema similar:

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

Mantiene el mismo encabezado / pie de página al navegar por las páginas de jQueryMobile. Lo inyecta dinámicamente en el cambio de página, arruina las transiciones, pero no clona los elementos, da el original.

Answer 2

La forma más sencilla es agregar un atributo "id de datos" a los encabezados y pies de página en todas las páginas. Para hacer que el encabezado / pie de página sea "persistente", use el mismo identificador de datos en todas las páginas.

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

También querrá arreglar los encabezados y pies de página con css o data-position = "fix".

Espero que esto ayude.

Answer 3

No existe una solución integrada para su problema. jQuery Mobile no tiene una solución que comparta un encabezado y un pie de página entre las páginas cargadas.

Lo único que puedes hacer es inyectarlos dinámicamente o tenerlos desde el principio. En tu caso lo estás haciendo en el momento equivocado. Si desea agregar correctamente un encabezado y un pie de página, debe hacerlo durante el evento de página correcto.

Un ejemplo de trabajo: http://jsfiddle.net/Gajotres/xwrqn/

Desliza para cambiar de página y ver cómo funciona (no quería molestarme en agregar botones en cada página).

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

Si lo hace durante la página antes de crear, esto solo se activará una vez cuando se cree la página por primera vez. Se agregará contenido dinámico y, dado que pagebeforecreate se activa antes de que se mejore el marcado de contenido, no tendrá que preocuparse por el estilo de encabezado y pie de página.

Observe un atributo ''id-datos'': ''pie de página'' agregado a cada encabezado y pie de página, debido a que solo el contenido se animará durante la transición de página, el encabezado y el pie de página tendrán el mismo aspecto. Además, jsFiddle tiene un error, cuando pasas las páginas saltan 1-2px. Esto no sucederá en un ejemplo de la vida real.