Dieser Artikel fasst die verschiedenen Seitenwechseleffekte und die modale Dialognutzung von HTML5 ausführlich zusammen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Seitenanimation:

Das Datenübergangsattribut kann den Animationseffekt des Seitenwechsels definieren.
Zum Beispiel: Ich öffne
Datenübergangsparametertabelle:

Parameterbeschreibung

Slide-Slide-In von rechts nach links
Slide-Up-Slide-In von unten
Slide-Down-Slide-In von oben umdrehen

Hinweis: Wenn Sie die Zurück-Schaltfläche auf der Zielseite anzeigen möchten, können Sie dem Link das Attribut data-direction="reverse" hinzufügen. Dieses Attribut ist dasselbe wie das ursprüngliche data-back="true". Ich weiß nicht, ob es in der offiziellen Version enthalten sein wird.

Modaler Dialog

Ein modales Dialogfeld ist eine pseudoschwebende Ebene mit einer abgerundeten Titelleiste und einer Schaltfläche zum Schließen, die für exklusive Ereignisanwendungen verwendet wird. Jede strukturierte Seite kann data-rel="dialog"-Links verwenden, um modale Dialoganwendungen zu implementieren. Zum Beispiel: Dialog öffnen

Dieser Seitenwechseleffekt kann auch den Datenübergangsparametereffekt des Standards nutzen Seite. Für bessere Ergebnisse wird empfohlen, die Parameter „pop“, „slideup“ und „flip“ zu verwenden.

Dieses modale Dialogfeld generiert standardmäßig eine Schaltfläche zum Schließen, um zur übergeordneten Seite zurückzukehren. Auf Geräten mit schwachen Skriptfunktionen können Sie auch einen Link mit data-rel="back" hinzufügen, um eine Schaltfläche zum Schließen zu implementieren.
Bei Geräten, die Skripte unterstützen, können Sie es direkt mit href="#" oder data-rel="back" schließen. Sie können auch die integrierte Methode „close“ verwenden, um das modale Dialogfeld zu schließen, zum Beispiel: $('.ui-dialog').dialog('close').
Da es sich bei dem modalen Dialogfeld um eine dynamisch angezeigte temporäre Seite handelt, wird diese Seite nicht in der Hash-Tabelle gespeichert, was bedeutet, dass wir nicht zu dieser Seite zurückkehren können. Wenn Sie beispielsweise auf einen Link klicken, um sie auf Seite A zu öffnen .B-Dialogfeld, der Vorgang ist abgeschlossen und das Dialogfeld wird geschlossen und springt dann zu Seite C. Wenn Sie zu diesem Zeitpunkt auf die Zurück-Schaltfläche des Browsers klicken, kehren Sie zu Seite A und nicht zu Seite B zurück.

Symbolleiste

Die Symbolleiste wird hauptsächlich in der „Kopfzeile“, „Fußzeile“ und anderen Bereichen verwendet, um die Anwendung von Geschäftsfunktionen auf der Seite zu unterstützen und umzusetzen. jQuery Mobile bietet eine relativ vollständige Lösung. Die Symbolleiste ist in drei Anwendungen unterteilt: Kopfzeile, Fußzeile und Navigationsleiste.

Der Titel und die Fußzeile verfügen über einige unterschiedliche Anwendungsmethoden auf der Seite. Diese Positionierungsmethode kann maximale Kompatibilität erreichen, einschließlich Skripten und CSS.

Die andere Methode ist die schwebende (feste) Positionierung, die auch als „statische“ Positionierung bezeichnet werden kann. Diese Positionierungsmethode kann die Symbolleiste am oberen oder unteren Bildschirmrand belassen. Es kann auch Klickereignisse akzeptieren, um die Symbolleiste ein-/auszublenden und so den Platz auf dem Bildschirm zu maximieren.
So implementieren Sie: Fügen Sie das Attribut data-position="fixed" zu den Titel- und Fußzeilenbereichen hinzu.

Titelcontainer

Der Titelcontainer ist ein Anzeigesteuerelement im Kopfbereich der Seite. Er wird hauptsächlich zur Anzeige des Titels und des Hauptbetriebsbereichs verwendet. Strukturcode:

Code kopieren

Der Code lautet wie folgt:

Seitentitel

Um die Seiteninteraktion zu erleichtern, wird es automatisch auf der linken Seite angezeigt Seite des Titelcontainers nach dem Seitenwechsel kann die Komplexität unserer Entwicklung vereinfachen, aber manchmal benötigen wir diese Zurück-Schaltfläche aufgrund von Anwendungsanforderungen. Sie können dem Titel das Attribut data-backbtn="false" hinzufügen Container, um die Schaltfläche „Zurück“ zu verhindern.
Auf der linken und rechten Seite des Titelcontainers kann eine Schaltfläche platziert werden. Nachdem wir die automatisch generierte Zurück-Schaltfläche verhindert haben, können wir die Schaltfläche an der Position der Zurück-Schaltfläche anpassen.

Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Abbrechen

< ;h1>Kontakt bearbeiten

Speichern

Wenn Sie den Text in der Standard-Zurück-Schaltfläche anpassen müssen, können Sie das Attribut data-back-btn-text=" previous" verwenden oder es durch die Erweiterung implementieren:

Kopieren Sie den Code

Der Code lautet wie folgt:

$.mobile.page.prototype.options.backBtnText = " previous "

If Wenn Sie zum Erstellen des Titelbereichs nicht die Standardstruktur verwenden, generiert das Framework nicht automatisch die Standardschaltfläche.

Fußzeilencontainer

Die Struktur des Fußzeilencontainers ist grundsätzlich dieselbe wie die des Kopfzeilencontainers. Setzen Sie einfach den Parameter des Datenrollenattributs auf „Fußzeile“.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Footer content

Der Footer-Container ist flexibler als der Header-Container, das ist jedoch nicht der Fall Wie beim Titelcontainer dürfen nur zwei Schaltflächen platziert werden, und die Schaltflächen werden standardmäßig nicht oben links und rechts platziert. Die Schaltflächen in der Fußzeile sind standardmäßig von links nach rechts angeordnet, und es gibt keine Möglichkeit um weitere Schaltflächen zu platzieren.
Fügen Sie einfach eine Klasse="ui-bar" zum Fußzeilencontainer hinzu, um die Fußzeile in eine Symbolleiste umzuwandeln, in der Sie übersichtliche Schaltflächen hinzufügen können, ohne einen Layoutstil festzulegen.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Remove
< ;a href="index.html" data-role="button" data-icon="plus">Hinzufügen
Up

Wenn wir eine Reihe von Linkeffekten benötigen, können wir so schreiben:

Code kopieren

Der Code lautet wie folgt:

Entfernen Hinzufügen
Nach oben
Nach unten

Tipps: Mehrere Seiten können dieselbe Fußzeile verwenden, indem Sie das data-id-Attribut verwenden.

Navigation

Der Navigationscontainer ist ein Schaltflächengruppen-Steuerelement, das bis zu 5 Schaltflächen pro Zeile enthalten kann, wobei ein Div mit dem Attribut data-role="navbar"
zum Speichern dieser Schaltflächen verwendet wird.
Beispiel:

Code kopieren

Der Code lautet wie folgt:

Eins

Zwei

in die Standardschaltfläche Add class="ui-btn-active"
Wenn die Anzahl der Schaltflächen 5 überschreitet, wird der Navigationscontainer automatisch in mehreren Zeilen mit der entsprechenden Nummer angezeigt.

Schaltfläche

Sie können jeden Link auf der Seite über data-role="button" als Anzeigestil der Schaltfläche deklarieren. Um den Stil zu vereinheitlichen, formatiert das Framework die Schaltflächen der Formularklasse beim Laden der Seite automatisch in Schaltflächen im jQuery Mobile-Stil. Es ist nicht erforderlich, das Attribut data-role hinzuzufügen.
Das Framework enthält eine Reihe häufig verwendeter Symbole, die für Schaltflächen verwendet werden können. Verwenden Sie die Parameter im Attribut data-icon, um verschiedene Symboleffekte zu definieren und anzuzeigen.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Delete

Liste der nativen Parameter des Datensymbols

Zusätzlich zur standardmäßigen Anzeige des Symbols auf der linken Seite können Sie auch das Attribut data-iconpos verwenden, um die Positionsbeziehung zwischen dem Symbol und dem Text zu definieren.
data-iconpos-Parameterliste:

Parametereffekt:
rechtes Symbol befindet sich auf der rechten Seite des Textes
oberes Symbol befindet sich über dem Text
unteres Symbol befindet sich unter dem Text
data-iconpos="notext"-Attribut ermöglicht das Klicken Sie auf die Schaltfläche, um den Text auszublenden.

Inline-Stile

Standardmäßig sind die Schaltflächen im Rahmen horizontal und adaptiv entsprechend der Bildschirmbreite. In unseren Anwendungen müssen wir jedoch häufig mehrere Schaltflächen in einer Zeile anzeigen Funktion namens inline Das Modusattribut ist
data-inline="true".
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Abbrechen
Speichern

Schaltflächengruppe

Das jQuery Mobile-Framework kann mehrere Schaltflächen in Gruppen anzeigen, und data-role="controlgroup" wird verwendet, um die kompakte Beziehung zwischen Schaltflächen anzuzeigen. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Ja

Vielleicht

Wenn die Schaltfläche für die horizontale Anordnung erforderlich ist, können Sie das Attribut data-type="horizontal" hinzufügen.

Antragsformular

Das jQuery Mobile-Framework kapselt neue Ausdrucksformen für native HTML-Formularelemente und optimiert die Bedienung von Touchscreen-Geräten. Das Formularelement wird auf der Seite des Frames automatisch in ein jQuery Mobile-Stilelement gerendert. Die Verwendung des
form-Elements ist die gleiche wie bei der Standard-HTML-Methode. Sie können auch die Post- und Get-Methoden verwenden, um Daten zu übermitteln. Es ist jedoch zu beachten, dass die ID-Bezeichnung des Elements nicht angezeigt werden darf Da in jQuery Mobile mehrere Seiten im selben DOM vorhanden sein können, wird empfohlen, dass die ID-Benennung des Formularelements im gesamten Projekt eindeutig ist, um Fehler durch ID-Probleme zu vermeiden.
Standardmäßig rendert das Framework automatisch den Stil des Formularelements auf der Standardseite. Nach erfolgreichem Rendern kann dieses Steuerelement mithilfe von Funktionen in jQuery bedient werden. In einigen Fällen müssen wir das native HTML-Formularelement verwenden. Um zu verhindern, dass das mobile Framework dieses Element automatisch rendert, führen wir im Data-Role-Attribut des Frameworks einen Steuerparameter „none“ ein. Die Verwendung dieses Attributparameters führt dazu, dass das Element in seinem nativen HTML-Zustand angezeigt wird.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Anwendung auflisten

Informationsliste ist ein relativ häufig verwendetes Steuerelement in Entwicklungsanwendungen. Es wird für die Datenanzeige, Navigation, Datenliste usw. verwendet. Zur Anpassung an unterschiedliche Informationsinhalte werden Listen auch in unterschiedlichen Formen dargestellt.
Die Codestruktur der Liste wird in geordneten und ungeordneten Listen implementiert, solange Sie data-role="listview" auf ul oder ol deklarieren, können Sie den Frame in Form einer Liste rendern lassen, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

Acura

Wenn Sie der Liste Daten hinzufügen müssen, müssen Sie die Methode „refresh()“ ausführen, um die Liste zu aktualisieren, nachdem die Daten geladen wurden.
Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

$('ul').listview('refresh');

Das Obige sind die Grundregeln für die Verwendung von jQuery Mobile zum Erstellen von Schnittstellen.

Ich hoffe, dass dieser Artikel für das HTML5-Programmierdesign aller hilfreich sein wird.