Me estoy sumergiendo en escribir una aplicación móvil con jQuery Mobile / PhoneGap. Estoy usandoesta plantilla de muestra para comenzar, que usa HTML / JS para crear las páginas. En lugar de tener todas las<page> tags en un solo archivo html, lo tiene dividido para que sea más fácil de editar.

Dado que tendré un archivo separado para cada página, ¿cuál es la mejor manera de incluir el encabezado / pie de página asociado? Solo lo he visto donde necesitas copiar y pegar todo el pie de página-> código de barra de navegación en cada página HTML. Esto no parece que debería ser. Por ejemplo, si desea cambiar un elemento del menú, debe ir a cada página y cambiarlo.

¿Cuál es la solución que me falta?

Quizás no entiendo jQuery Mobile. Por ejemplo, su barra lateral que usan para sus documentos: ¿se copia y pega el código de la barra lateral en cada página? Eso no tiene sentido. Es la misma idea que la pregunta que hago aquí sobre el pie de página.

http: //jquerymobile.com/test/docs/pages/page-cache.htm

Esto es lo que tengo que no parece correcto (y$.live('pageinit') no funciona). Este HTML es lo que va en cada página HTML:

<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">

Y el JS

$.live('pageinit', function (event) {
    displayFooter();
});

function displayFooter() {
    $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +
        '<ul>' +
        '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' +
        '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' +
        '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' +
        '</ul>' +
        '</div>');
}