einschließlich der Kopf-und Fußzeile in jquery mobile mehrere Seite Website

Ich bin erstellen einer jquery mobile web-app, die enthält 3 Seiten, mein header/nav für diese Seiten nicht ändern, aber in allen Beispielen die Ich gesehen habe die Kopf-und Fußzeile ist auf jeder Seite. Ist es möglich nur 1 Navi und 1 Fußzeile, dann wechseln Sie einfach die Seiten, die wichtigsten Inhalte in die und aus wie diese Struktur: 

<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>

Im Grunde ist es ein Weg von nur das anzeigen/ausblenden der wichtigste content und die tun, nichts mit dem header und footer?

Irgendwelche Ratschläge über das wäre toll
Kyle

InformationsquelleAutor styler | 2011-11-25
  1. 4

    Haben Sie einen Blick auf die load() Methode in jQuery -> http://api.jquery.com/load/

    Hier ist ein Beispiel :

    $('#navigation').click(function() {
   $('#page1').load('page1.html');
});

    Dies bedeutet, dass, wenn etwas mit der id navigation geklickt wird, erfolgt ein Aufruf der load() Funktion und ersetzen Sie die div mit dem id - page1 mit dem Inhalt der geladenen Datei.

    InformationsquelleAutor ManseUK
  2. 15

    Nein, leider JQM dies nicht unterstützt (noch nicht), müssen Sie Ihre role=header und Rolle=Fußzeile auf JEDER Rolle=Seite, die Sie bekam (alle 3 von Ihnen).

    Sehen Dokumentation

    Ich würde stick zu $.mobile.changePage() da, der kümmert sich um hashing, und eine Menge anderer Veranstaltungen und nicht nur JQuery verwenden zu können .load () - neue Inhalte...

    Hoffe, das hilft

    • dies ist die richtige Antwort für jquery.mobile-Entwickler.
    • Dies sollte akzeptiert werden Antwort.
    InformationsquelleAutor Leon
  3. 0

    die Sie verwenden können .load() in jQuery

    beispielsweise auf jeder Seite haben Sie diese:

    <div data-role="footer" class="ui-footer"></div>

    nun bauen Sie diese Funktion ein:

    function goTo(pageURL, transitionType) {
  $.mobile.changePage(pageURL, transitionType);
  $('.ui-footer').load('assets/includes/footer.html');
}

    nun, wenn Sie zwischen den Seiten wechseln, versuchen onclick (oder von code, wenn Sie möchten) zu nennen:

    goTo('home.html','slideup');

    dass würde den trick tun (dies ist, was ich verwenden)

    können Sie tun das gleiche für den Header genauso.

    im Hinterkopf behalten, wenn die Kopf-oder Fußzeile änderungen der Inhalte für jede version der app (z.B. Lokalisierung) zu nennen, diese erste, dann füllen Sie die Lokalisierung von text oder irgendetwas anderes.

    Ich hoffe, dies hilft, für Ihren Zweck

    InformationsquelleAutor EMMNS
Schreibe einen Kommentar