Latest web development tutorials

jQuery Mobile Transition

jQuery Mobile enthält CSS3-Effekt können Sie die Seite auszuwählen, um die Art und Weise zu öffnen.


jQuery Mobile Seitenübergänge

jQuery Mobile bietet eine Vielzahl von Seite-Schalter auf der nächsten Seite der Ergebnisse.

Hinweis: Um die Wirkung des Umschaltens der Seite zu erreichen, muss der Browser CSS3 3D - Switching zu unterstützen:

12.0 10.0 16.0 4.0 15,0

Die Zahlen in der Tabelle zu unterstützen 3D-Browser-Mindestversionsnummer drehen.

Seite Übergangseffekte können auf jede Verwendung von Daten-Übergang Attribut Link oder ein Formular angewendet werden:

Seite Übergangseffekte können auf jede Verwendung von Daten-Übergang Attribut Link oder Formularübermittlung angewendet werden:

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

Die folgende Tabelle zeigt die Daten-Übergang durch die Verwendung der verfügbaren Objekte um die Seite zu wechseln:

Übergang Beschreibung Seite Dialog
verblassen Default. Fade auf die nächste Seite versuchen versuchen
Flip Von Flip uns auf die nächste Seite versuchen versuchen
fließen Wirft diese Seite zur nächsten Seite versuchen versuchen
Pop Wie Pop-ups, die auf der nächsten Seite. versuchen versuchen
Schlitten Swipe von rechts auf die nächste Seite. versuchen versuchen
slidefade Swipe links und rechts auf die nächste Seite zu verblassen. versuchen versuchen
slideup Schieben Sie von unten auf die nächste Seite nach oben. versuchen versuchen
slidedown Von oben nach unten, Folie zur nächsten. versuchen versuchen
Wende Schalten Sie die nächste Seite. versuchen versuchen
keiner Kein Übergangseffekt. versuchen versuchen

Lampe Alle jQuery Mobile Link auf der Standard-Fade-Effekt (wenn der Browser unterstützt).

Hinweis: Alle oben genannten Effekte Rückwärtsverhalten unterstützen. Zum Beispiel, wenn Sie die Seite zu schieben wollen von links nach rechts, von rechts nach links, statt Gleiten Verwendung daten Richtung Eigenschaft mit dem "Reverse" Wert. Auf der Back-Taste ist die Standardeinstellung.

Beispiele

<a href="#pagetwo" data-transition="slide" data-direction="reverse" >切换</a>

Versuchen »