jQuery Mobile inclut des effets CSS3 qui vous permet de choisir la façon dont une page doit ouvrir.
Effets de transition mobile jQuery
jQuery Mobile a une variété d'effets sur la façon de passer d'une page à l'autre.
Remarque: Pour obtenir l'effet de transition, le navigateur doit prendre en charge CSS3 3D Transforms:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Les chiffres du tableau indiquent la première version du navigateur qui supporte entièrement Transforms 3D.
L'effet de transition peut être appliquée à tout lien ou la soumission du formulaire en utilisant l'attribut data-transition:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
Le tableau ci-dessous montre les transitions disponibles qui peuvent être utilisés avec l'attribut data-transition pour les deux pages et boîtes de dialogue:
| Transition | La description | Pour Pages | Pour Dialogs |
|---|---|---|---|
| fade | Défaut. Fades à la page suivante | Essayez - le | Essayez - le |
| flip | Inverse à la page suivante de l'arrière vers l'avant | Essayez - le | Essayez - le |
| flow | Lance la page en cours de distance et est livré avec la page suivante | Essayez - le | Essayez - le |
| pop | Va à la page suivante comme une fenêtre pop-up | Essayez - le | Essayez - le |
| slide | Diapositives à la page suivante de droite à gauche | Essayez - le | Essayez - le |
| slidefade | Diapositives de droite à gauche et se fane dans la page suivante | Essayez - le | Essayez - le |
| slideup | Diapositives à la page suivante de bas en haut | Essayez - le | Essayez - le |
| slidedown | Diapositives à la page suivante de haut en bas | Essayez - le | Essayez - le |
| turn | Il se tourne vers la page suivante | Essayez - le | Essayez - le |
| none | Aucun effet de transition | Essayez - le | Essayez - le |
L'effet de fondu est par défaut sur tous les maillons de jQuery Mobile (si le support du navigateur lui).
Astuce: Tous les effets ci - dessus également soutenir les actions inverses / arrière, par exemple si vous souhaitez que la page de glisser de gauche à droite, au lieu de droite à gauche, utiliser l'attribut data-direction avec la valeur "reverse" .
Exemple
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Essayez - le vous - même »