jQuery Mobile include efecte CSS3, care vă permite să alegeți modul în care o pagină ar trebui să deschidă.
jQuery mobile Efecte de tranziție
jQuery Mobile are o varietate de efecte pentru modul de a tranziției de la o pagină la alta.
Notă: Pentru a obține efectul de tranziție, browser - ul trebuie să sprijine CSS3 3D Transformă:
| 12,0 | 10.0 | 16.0 | 4 | 15.0 |
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin Transformări 3D.
Efectul de tranziție poate fi aplicată la orice trimitere link - ul sau forma prin utilizarea data-transition de data-transition atribut:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
Tabelul de mai jos arată tranzițiile disponibile care pot fi utilizate cu data-transition de data-transition atribut pentru ambele pagini și dialoguri:
| Tranziție | Descriere | pentru Pagini | pentru Dialoguri |
|---|---|---|---|
| fade | Mod implicit. Estompează la pagina următoare | Incearca-l | Incearca-l |
| flip | Răstoarnă la pagina următoare din spate în față | Incearca-l | Incearca-l |
| flow | Aruncări pagina curentă departe și vine cu pagina următoare | Incearca-l | Incearca-l |
| pop | Trece la pagina următoare ca o fereastră pop-up | Incearca-l | Incearca-l |
| slide | Slide-uri la pagina următoare de la dreapta la stânga | Incearca-l | Incearca-l |
| slidefade | Slide-uri de la dreapta la stânga și se estompează în pagina următoare | Incearca-l | Incearca-l |
| slideup | Slide-uri la pagina următoare de jos în sus | Incearca-l | Incearca-l |
| slidedown | Slide-uri la pagina următoare de sus în jos | Incearca-l | Incearca-l |
| turn | Se aprinde la pagina următoare | Incearca-l | Incearca-l |
| none | Nici un efect de tranziție | Incearca-l | Incearca-l |
Efectul fading este implicit pe toate link - urile din jQuery Mobile (if the browser support it) în (if the browser support it) care (if the browser support it) - (if the browser support it) .
Sfat: Toate efectele de mai sus , de asemenea , să sprijine acțiunile inverse / înapoi, de exemplu , dacă doriți ca pagina să alunece de la stânga la dreapta, în loc de la dreapta la stânga, utilizați data-direction de "reverse" data-direction atribut cu valoare "reverse" .
Exemplu
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Încearcă - l singur »