jQuery Mobile include effetti CSS3 che permette di scegliere il modo in cui una pagina dovrebbe aprire.
jQuery effetti di transizione per cellulari
jQuery Mobile ha una varietà di effetti per il modo di passare da una pagina all'altra.
Nota: Per ottenere l'effetto di transizione, il browser deve supportare CSS3 3D Transforms:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
I numeri nella tabella indicano la prima versione del browser che supporta completamente trasforma in 3D.
L'effetto di transizione può essere applicato a qualsiasi memoria collegamento o maschera utilizzando l'attributo data-transizione:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
La tabella seguente mostra le transizioni disponibili che possono essere utilizzati con l'attributo data-transizione per entrambe le pagine e le finestre di dialogo:
| Transizione | Descrizione | per Pagine | per finestre di dialogo |
|---|---|---|---|
| fade | Predefinito. Svanisce alla pagina successiva | Provalo | Provalo |
| flip | Capovolge alla pagina successiva da dietro in avanti | Provalo | Provalo |
| flow | Getta la pagina corrente via e viene fornito con la pagina successiva | Provalo | Provalo |
| pop | Va alla pagina successiva come una finestra pop-up | Provalo | Provalo |
| slide | Diapositive alla pagina successiva da destra a sinistra | Provalo | Provalo |
| slidefade | Diapositive da destra a sinistra e dissolvenze nella pagina successiva | Provalo | Provalo |
| slideup | Diapositive alla pagina successiva dal basso verso l'alto | Provalo | Provalo |
| slidedown | Diapositive alla pagina successiva da cima a fondo | Provalo | Provalo |
| turn | Passa alla pagina successiva | Provalo | Provalo |
| none | Nessun effetto di transizione | Provalo | Provalo |
L'effetto di dissolvenza è di default su tutti i link in jQuery Mobile (se il supporto del browser di esso).
Suggerimento: Tutti gli effetti di cui sopra anche sostenere le azioni d'inversione / indietro, ad esempio, se si desidera che la pagina di scivolare da sinistra a destra, invece che da destra a sinistra, usare l'attributo data-senso con il valore "reverse" .
Esempio
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Prova tu stesso "