jQuery Mobile termasuk efek CSS3 yang memungkinkan Anda memilih cara halaman harus membuka.
jQuery Mobile Efek Transisi
jQuery Mobile memiliki berbagai efek untuk bagaimana transisi dari satu halaman ke halaman berikutnya.
Catatan: Untuk mencapai efek transisi, browser harus mendukung CSS3 3D Mentransformasi:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Mentransformasi 3D.
Efek transisi dapat diterapkan untuk setiap link atau formulir pengajuan dengan menggunakan data atribut-transisi:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
Tabel di bawah ini menunjukkan transisi yang tersedia yang dapat digunakan dengan data atribut-transisi untuk kedua halaman dan dialog:
| Transisi | Deskripsi | untuk Pages | untuk Dialog |
|---|---|---|---|
| fade | Default. Memudar ke halaman berikutnya | Cobalah | Cobalah |
| flip | Membalik ke halaman berikutnya dari belakang ke depan | Cobalah | Cobalah |
| flow | Melempar halaman saat pergi dan datang dengan halaman berikutnya | Cobalah | Cobalah |
| pop | Pergi ke halaman berikutnya seperti jendela popup | Cobalah | Cobalah |
| slide | Slide ke halaman berikutnya dari kanan ke kiri | Cobalah | Cobalah |
| slidefade | Slide dari kanan ke kiri dan memudar di halaman berikutnya | Cobalah | Cobalah |
| slideup | Slide ke halaman berikutnya dari bawah ke atas | Cobalah | Cobalah |
| slidedown | Slide ke halaman berikutnya dari atas ke bawah | Cobalah | Cobalah |
| turn | Beralih ke halaman berikutnya | Cobalah | Cobalah |
| none | Tidak ada efek transisi | Cobalah | Cobalah |
Efek memudar adalah default pada semua link di jQuery Mobile (jika dukungan browser itu).
Tip: Semua efek di atas juga mendukung tindakan terbalik / mundur, misalnya jika Anda ingin halaman untuk geser dari kiri ke kanan, bukan kanan ke kiri, menggunakan data atribut-arah dengan nilai "reverse" .
Contoh
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Cobalah sendiri "