Création d'un modèle d'en-tête/pied de page templated/persistant dans jQuery Mobile et PhoneGap

Quelque Chose comme ceci:

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

Vous pouvez simplement définir le role = footer dans le getText et vérifier simplement s'il est défini... si non, alors l'ajouter.

Si vous voulez vraiment le faire correctement, vous devez regarder dans un framework js comme Thorax ou JavascriptMVC.

Dans une application JMVC, vous pouvez le faire depuis n'importe quelle vue:

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

JQuery Mobile n'est vraiment utile que pour l'amélioration progressive du balisage et du style pour les appareils mobiles. Pour la partie MVC réelle, vous avez besoin d'un framework MVC.

Les exemples pour jQuery Mobile sont également principalement destinés à la construction de sites Web mobiles qui, puisqu'ils récupèrent des pages à partir d'un serveur, supposent votre la réutilisation du code se passe côté serveur. Une application phonegap est une bête entière puisque vous générerez ces pages à la volée ou à partir de fichiers statiques locaux. C'est là que le framework MVC intervient alors que vous construisez vos pages à l'aide de contrôleurs, de vues, d'aides de vue et de classes de modèle. Vous attachez tout cela à jQuery mobile en écoutant l'événement pagebeforeshow comme indiqué sur la page de documentation jQm sur les pages de script

Nous n'avons pas encore trouvé un bon moyen de le faire non plus. Nous gérons donc cela dynamiquement dans notre fichier JS personnalisé. Recherche du conteneur de fermeture - puis ajout dynamique du pied de page après la fermeture de la dernière div de contenu.

Dépend de la façon dont vous chargez les pages respectives.

Si vous utilisez rel="external" - sans AJAX, chaque page sera rechargée complètement.

Si vous utilisez JQM - AJAX régulier, JQM va saisir la page et l'attacher à votre DOM existant. Pensez à votre première page comme votre page "ancre", que toutes les pages suivantes sont ajoutées/supprimées.

Dans le 2ème cas, vous pouvez spécifier les données-ajouter-pour-tous-pages="true" attribut sur les éléments que vous souhaitez avoir sur chaque page.

Alors écoutez l'événement respectif (pagebeforeshow?) et ajoutez des éléments avec l'étiquette ci-dessus à la nouvelle page avant qu'elle ne soit affichée. De cette façon, les éléments ne devraient être définis que sur la première page, puis automatiquement ajoutés à toute page suivante tirée et ajoutée au DOM.

Je regarde cela en ce moment avec un formulaire de connexion, dont j'ai besoin sur chaque page en dehors de la connexion et je dois éviter de me retrouver avec une entrée en double#someID.

Modifier-solution possible

Mettre chaque élément sur la première page et ajouter des attributs uniques, comme ceci:

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

Toutes les autres pages obtiennent simplement le conteneur d'élément unique

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

Ensuite, utilisez ce 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();
            }
         });
     }); 

Bien sûr, cela signifierait que vous avez besoin du conteneur unique sur chaque page. Mais alors vous simplement porter le contenu de celui-ci le long que vous traversez à travers l'application. Devrait fonctionner pour moi et éviter d'avoir le même formulaire de connexion 2 + fois dans le DOM.

De plus, vous seriez libre de l'éditer contenu par exemple en ajoutant une classe active.

N'utilisez pas pageinit, les événements que vous devriez écouter sont pagecreate et pageshow, pagecreate est appelé la première fois qu'une page est chargée, mais pas lorsque vous revenez à la page, par exemple sur le bouton Précédent. Alors que pageshow se déclenche chaque fois qu'une page est affichée, il suffit de lier un écouteur en direct à l'événement pageshow pour chaque page où vous ajoutez votre pied de page (en supposant que votre pied de page peut changer, sinon utilisez pagecreate).

J'ai un plus exemple qui vous montre comment lier l'événement correctement dans une autre question: https://stackoverflow.com/a/9085014/737023

Et oui une bonne solution est juste d'utiliser un include PHP/CF, ce que j'utilise à la place de JS.

modifier Mon mauvais, semble pageinit est maintenant utilisé à la place de pagecreate (voir ici) , mais il reste que pageshow se déclenche chaque fois qu'une page est affichée - de sorte que vous pouvez les utiliser comme vous avez besoin