Wie behält man die gleiche Kopf- / Fußzeile über Seiten in jQueryMobile?

Gibt es eine einfache Methode, um die gleiche Kopfzeile/- Fußzeile, während die Navigation jQueryMobile Seiten? Die einzigen Lösungen, die ich stieß, so weit beruht auf der Injektion dynamicly auf der Seite ändern sich, aber das Schrauben bis die übergänge, und nur Klone, die die Elemente, ich brauche das original.

So ist es eine offiziell unterstützte Weg? Ich finde es seltsam, dass ich scheinbar die einzige, die zu kämpfen mit diesem problem?

InformationsquelleAutor der Frage Muis | 2013-05-23

  1. 14

    Der einfachste Weg ist es, fügen Sie einen "data-id" - Attribut, um die Kopf-und Fußzeilen auf allen Seiten. Um die Kopfzeile/Fußzeile "persistent", nutzen die gleiche Daten-id für alle Seiten.

    <div id="page1">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

<div id="page2">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

    Würden Sie auch wollen, fixieren Sie die Kopf-und Fußzeilen entweder mit css oder data-position="fixed".

    Hoffe, das hilft.

    InformationsquelleAutor der Antwort DRJ

  2. 9

    Eine eingebaute Lösung für dein problem gibt es nicht. jQuery Mobile nicht eine Lösung haben, teilen sich eine Kopf-und Fußzeile unter den geladenen Seiten.

    Die einzige Sache, die Sie tun können, ist die dynamische injizieren Sie oder haben Sie von Anfang an. In Ihrem Fall, Sie tun es an der falschen Zeit. Wenn Sie möchten, um richtig fügen Sie eine Kopfzeile und eine Fußzeile, die Sie brauchen, um es während der richtigen Seite event.

    Einem Beispiel arbeiten: http://jsfiddle.net/Gajotres/xwrqn/

    Wischen um die Seiten zu wechseln und zu sehen, wie es funktioniert (ich wollte nicht zu stören mit dem hinzufügen von Schaltflächen, die auf jeder Seite).

    $(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this));
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));    
});

    Wenn Sie es tun, während der pagebeforecreate dies wird NUR einmal ausgelöst, wenn eine Seite erstellt für eine erste Zeit. Dynamische Inhalte Hinzugefügt und da pagebeforecreate getriggert wird, bevor der Inhalt markup erweitert werden Sie nicht brauchen, um über Kopf-und Fußzeile styling.

    Bemerken Attribut 'data-id':'footer' Hinzugefügt, um jede Kopf-und Fußzeile, da es nur Inhalte animieren, während die Seite übergang, Kopf-und Fußzeile gleich Aussehen. Auch jsFiddle hat einen Fehler, wenn Sie swipe durch die Seiten, Sie werden springen, 1-2px. Dies wird nicht passieren, in einem real-life Beispiel.

    InformationsquelleAutor der Antwort Gajotres

  3. 0

    Ist hier, wie ich gelöst habe, ein ähnliches Problem:

            $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
            $("#header").prependTo(ui.toPage);
            $("#control-panel").appendTo(ui.toPage);
        });

    Hält die gleiche Kopfzeile/- Fußzeile, während die Navigation jQueryMobile Seiten. Spritzt es dynamicly auf Seite-ändern, Schrauben bis die übergänge, aber nicht die clone-Elemente, verleiht dem original.

    InformationsquelleAutor der Antwort Jayen

Schreibe einen Kommentar