online - pagina web con jquery mobile

Creación de plantilla de encabezado/pie de página con plantilla/persistente en jQuery Mobile y PhoneGap

Question

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

Como tendré un archivo separado para cada página, ¿cuál es la mejor manera de incluir el encabezado / pie de página generado? Solo lo he visto donde necesita copiar y pegar todo el pie de página-> código de la 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 acceder a cada página y modificarlo.

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

Quizás no entiendo jQuery Mobile. Por ejemplo, su barra lateral que usan para sus documentos: ¿ese código de la barra lateral se copia y pega 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.html

Esto es lo que tengo que no me parece correcto (y $.live(''pageinit'') no funciona). Este HTML es lo que sucede 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>'');
}

Answer 1

Algo como esto:

function getText() {
    //return footer text here
}


$("div:jqmData(role=''page'')").live("pagebeforecreate",function() {
    // get find the footer of the page
    var $footer =$(this).page().find(''div:jqmData(role="footer")'')
    // insert it where you want it... 
}

usted podría simplemente definir el rol = pie de página en el getText y simplemente verificar para ver si está definido ... si no, entonces agréguelo.

Answer 2

Depende cómo cargue las páginas respectivas.

Si usa rel = "external" - no AJAX, cada página se volverá a cargar por completo.

Si usa JQM regular - AJAX, JQM tomará la página y la adjuntará a su DOM existente. Piense en su primera página como su página "ancla", que todas las páginas posteriores se agregan / eliminan.

En el segundo caso, podría especificar un atributo data-append-to-all-pages = "true" en los elementos que desea tener en cada página.

Luego solo escuche el evento respectivo (pagebeforeshow?) Y agregue elementos con la etiqueta anterior a la nueva página antes de que se muestre. De esta forma, los elementos solo tendrían que establecerse en la primera página y luego agregarse automáticamente a cualquier página subsiguiente que se extraiga y agregue al DOM.

Estoy investigando esto ahora mismo con un formulario de inicio de sesión, que necesito en cada página fuera del inicio de sesión y tengo que evitar terminar con la entrada ##idida # duplicada.

EDITAR - posible solución

Coloque el elemento correspondiente en la primera página y agregue atributos únicos, de esta manera:

 <div data-role="navbar" data-unique="true" data-unique-id="log">
     // full navbar
 </div>

Todas las otras páginas solo obtienen el contenedor de elementos únicos

<div data-role="navbar" data-unique="true" data-unique-id="log"></div>

Luego usa este script:

$(''div:jqmData(role="page")'').live(''pagebeforehide'', function(e, data) {

    //  check page you are leaving for unique items 
    $(this).find(''div:jqmData(unique="true")'').each(function(){

         // more or less 1:1 stickyFooter
         var uniqueID = $(this).jqmData("unique-id"),
             nextPage = data.nextPage,
             nextUnique = nextPage && nextPage.find( "div:jqmData(unique-id=''"+uniqueID+"'')" ),
             nextMatches = nextUnique.length && nextUnique.jqmData(''unique-id'') === uniqueID;

         // if unique items on previous and new page are matching
         if ( uniqueID && nextMatches ) {
            nextUnique.replaceWith( uniqueID );
            $(this).jqmData("unique-id").empty();
            }
         });
     }); 

Por supuesto, esto significa que necesita el contenedor único en cada página. Pero luego solo llevarías el contenido mientras recorres la aplicación. Debería funcionar para mí y evitar tener el mismo formulario de inicio de sesión 2+ veces dentro del DOM.

Además, podría editar sus contenidos, por ejemplo, agregar una clase activa.

Answer 3

He estado tratando de abordar este problema durante unos días y me he acercado mucho a la solución. Yo uso el siguiente HTML:

<body>
    <div data-role="page" id="page">

        <div data-role="header">
            <h1 id="title">Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">  
            <p>Loading...</p>
        </div><!-- /content -->

        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" id="navbar">
            </div>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

Y he creado las siguientes funciones para cargar el menú / contenido usando ajax:

$(document).on(''pageinit'', "#page", function() {
    // for example: displayFooter();
    loadContent("main");
    loadMenu("default");
});

function loadContent(location) {
    return $(''#content'').load("views/content/"+location+".html", function() { 
        $(this).trigger(''create'');
    });
}
function loadMenu(location) {
    $("#menu").remove();
    $("#navbar").remove();

    $("#footer").html(''<div data-role="navbar" id="navbar">'');
    $("#navbar").html(''<ul id="menu"></ul>'');

    $("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); });

    return true;
}

El .trigger(''create''); y .navbar(); son los métodos necesarios para mantener el estilo JQM correcto, sin embargo, todavía hay un pequeño error. La posición del menú (que se establece con css top: ... px) a veces no es correcta y se mueve a la posición correcta después del primer toque. ¡Realmente cerca!

Editar: Al configurar #footer en la position: fixed; el error menor que mencioné anteriormente se ha ido. Además, es fácil hacer un método que calcula la top (en px) para el #footer si la posición causada por el valor top por JQM es incorrecta.

Answer 4

No use pageinit, los eventos que debe escuchar son pagecreate y pageshow, pagecreate se llama la primera vez que se carga una página, pero no cuando se vuelve a la página, por ejemplo, en el botón Atrás. Mientras que pageshow se activa cada vez que se muestra una página, simplemente enlace a un oyente en vivo con el evento pageshow para cada página donde agregue su pie de página (asumiendo que su pie de página puede cambiar, de lo contrario use pagecreate).

Tengo un ejemplo más largo que muestra cómo enlazar al evento correctamente en otra pregunta: https://.com/a/9085014/737023

Y sí, una gran solución es solo usar PHP / CF include, que es lo que uso en lugar de JS.

EDIT Mi mal, parece que pageinit ahora se usa en lugar de pagecreate (ver aquí) , pero sigue en pie que páginas se dispara cada vez que se muestra una página, para que pueda usarlas cuando lo necesite

Answer 5

Si realmente quieres hacer esto correctamente, debes buscar en un framework js como Thorax o JavascriptMVC.

En una aplicación JMVC, puedes hacer esto desde cualquier vista:

<div data-role="page">
    <%== $.View(''./header.ejs'') %>
    <div data-role="content">
    ...
    </div>
    <%== $.View(''./footer.ejs'') %>
</div>

jQuery Mobile realmente solo es útil para la mejora y el estilo de marcado progresivo para dispositivos móviles. Para la parte MVC real necesita un marco MVC.

Los ejemplos de jQuery Mobile también están orientados principalmente a la creación de sitios web móviles que, como obtienen páginas de un servidor, suponen que la reutilización de los códigos se produce en el lado del servidor. Una aplicación de phonegap es una bestia más completa ya que generará estas páginas sobre la marcha o desde archivos estáticos locales. Aquí es donde entra en juego el marco MVC, ya que usted estaría construyendo sus páginas usando controladores, vistas, ayudantes de visualización y clases de modelos. Une todo eso en jQuery mobile escuchando el evento pagebeforeshow como se muestra en la página de documentación jQm en las páginas de scripting

Answer 6

Todavía no hemos encontrado una buena manera de hacer esto. Así que en realidad estamos manejando esto dinámicamente en nuestro archivo js personalizado. Buscando el contenedor de cierre y, a continuación, agregando dinámicamente el pie de página después de que se cierre el último elemento de contenido div.