jQuery Mobile umfasst CSS3 Effekte, die Ihnen den Weg eine Seite sollte sich öffnen wählen lässt.
jQuery Mobile Transition Effects
jQuery Mobile hat eine Vielzahl von Effekten, wie von einer Seite zur nächsten zu wechseln.
Hinweis: Um den Übergang Effekt zu erzielen, muss der Browser CSS3 3D unterstützen Wandelt:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die komplett in 3D-Transformationen unterstützen.
Der Übergangseffekt kann durch Verwendung der Daten-Übergang-Attribut auf einen Link oder ein Formular-Vorlage angewendet werden:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
Die folgende Tabelle zeigt die verfügbaren Übergänge, die sowohl für die Daten-Übergang Attribut verwendet werden können, Seiten und Dialoge:
| Übergang | Beschreibung | Für Seiten | Für Dialoge |
|---|---|---|---|
| fade | Standard. Fades auf die nächste Seite | Versuch es | Versuch es |
| flip | Flips auf die nächste Seite von hinten nach vorne | Versuch es | Versuch es |
| flow | Wirft die aktuelle Seite weg und kommt mit der nächsten Seite | Versuch es | Versuch es |
| pop | Geht zur nächsten Seite wie ein Popup-Fenster | Versuch es | Versuch es |
| slide | Folien auf die nächste Seite von rechts nach links | Versuch es | Versuch es |
| slidefade | Folien von rechts nach links und Überblendungen in der nächsten Seite | Versuch es | Versuch es |
| slideup | Folien auf die nächste Seite von unten nach oben | Versuch es | Versuch es |
| slidedown | Folien auf die nächste Seite von oben nach unten | Versuch es | Versuch es |
| turn | Schaltet auf die nächste Seite | Versuch es | Versuch es |
| none | Kein Übergangseffekt | Versuch es | Versuch es |
Die Fading-Effekt ist standardmäßig auf allen Links in jQuery Mobile (wenn der Browser-Unterstützung hat es).
Tipp: Alle Effekte oben auch Reverse / Rückwärts Aktionen unterstützen, zB wenn Sie die Seite wollen von links nach rechts zu schieben, anstatt von rechts nach links, verwenden Sie die Daten-Richtung Attribut mit dem Wert "reverse" .
Beispiel
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Versuch es selber "