Tworzenie szablonu/szablonu nagłówka/stopki w jQuery Mobile i PhoneGap

Coś takiego:

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

Możesz po prostu zdefiniować role = footer w getText i po prostu sprawdzić, czy jest zdefiniowany... jeśli nie, dodaj go.

Jeśli naprawdę chcesz to zrobić poprawnie, musisz zajrzeć do frameworka js, takiego jak Thorax lub JavascriptMVC.

W aplikacji JMVC można to zrobić z dowolnego widoku:

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

JQuery Mobile jest naprawdę przydatny tylko dla progresywnego ulepszania znaczników i stylizacji dla urządzeń mobilnych. Dla rzeczywistej części MVC potrzebujesz frameworku MVC.

Przykłady dla jQuery Mobile są również głównie przeznaczone do budowania mobilnych stron internetowych, które ponieważ pobierają strony z serwera zakładają ponowne użycie kodu odbywa się po stronie serwera. Aplikacja phonegap to zupełnie inna bestia, ponieważ będziesz generować te strony w locie lub z lokalnych plików statycznych. To było, gdy Framework MVC przychodzi jak budujesz swoje strony za pomocą kontrolerów, widoków, pomocników widoku i klas modelu. Połącz to wszystko z jQuery mobile, słuchając zdarzenia pagebeforeshow pokazanego na stronie dokumentacji jQm na stronach skryptów

Jeszcze nie znaleźliśmy na to dobrego sposobu. Tak więc w rzeczywistości obsługujemy to dynamicznie w naszym niestandardowym pliku js. Szukanie kontenera zamykającego-a następnie dynamiczne dodawanie stopki po zamknięciu ostatniej zawartości div.

Zależy, jak załadujesz odpowiednie strony.

Jeśli użyjesz rel= "external" - no AJAX, każda strona zostanie całkowicie załadowana.

Jeśli używasz zwykłego JQM-AJAX, JQM chwyci stronę i dołączy ją do istniejącego DOM. Pomyśl o swojej pierwszej stronie jako o swojej stronie "kotwicy", którą wszystkie kolejne strony są dodawane/usuwane.

W drugim przypadku możesz określić atrybut data-append-to-all-pages="true" dla elementów, które chcesz mieć na każdej stronie.

Potem po prostu posłuchaj odpowiednie wydarzenie (pagebeforeshow?) i dodać elementy z powyższą etykietą do nowej strony przed jej wyświetlaniem. W ten sposób elementy muszą być ustawiane tylko na pierwszej stronie, a następnie automatycznie dodawane do każdej kolejnej strony, która jest wciągana i dodawana do DOM.

Sprawdzam to teraz z formularzem logowania, który potrzebuję na każdej stronie poza loginem i muszę uniknąć skończenia z duplikatem input#someID.

Edycja-możliwe rozwiązanie

Put odpowiedni element na pierwszej stronie i dodać unikalne atrybuty, w ten sposób:

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

Wszystkie inne strony po prostu dostać unikalny kontener elementu

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

Następnie użyj tego skryptu:

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

Oczywiście oznaczałoby to, że potrzebujesz unikalnego kontenera na każdej stronie. Ale wtedy po prostu nosisz jej zawartość podczas przechodzenia przez aplikację. Powinno działać dla mnie i unikać tego samego formularza logowania 2 + razy wewnątrz DOM.

Dodatkowo będziesz mógł edytować to zawartość na przykład dodanie active class.

Nie używaj pageinit, zdarzenia, których powinieneś słuchać to pagecreate i pageshow, pagecreate jest wywoływany przy pierwszym załadowaniu strony, ale nie podczas powrotu do strony, np. przy przycisku Wstecz. Podczas gdy pageshow jest uruchamiany za każdym razem, gdy strona jest wyświetlana, więc po prostu powiązaj Live listener ze zdarzeniem pageshow dla każdej strony, na której dodasz stopkę (zakładając, że stopka może się zmienić, w przeciwnym razie użyj pagecreate).

Mam dłuższy przykład, który pokazuje, jak powiązać Zdarzenie prawidłowo w innym pytaniu: https://stackoverflow.com/a/9085014/737023

I tak świetnym rozwiązaniem jest po prostu użycie PHP / CF include, którego używam zamiast JS.

EDIT Mój błąd, wygląda na to, że pageinit jest teraz używany zamiast pagecreate (patrz tutaj), ale nadal stoi, że pageshow jest uruchamiany za każdym razem, gdy strona jest wyświetlana-więc możesz używać tych, których potrzebujesz