Transisi jQuery Mobile
- Hal Sebelumnya Halaman jQuery Mobile
- Hal Berikutnya Tombol jQuery Mobile
jQuery Mobile termasuk efek CSS yang memungkinkan Anda memilih cara halaman di buka.
Efect Transisi jQuery Mobile
jQuery Mobile memiliki serangkaian efek tentang bagaimana untuk melaju dari halaman ke halaman berikutnya.
Keterangan:Untuk melaksanakan efek transisi, peramban harus mendukung transisi CSS3 3D:
Dukungan peramban
- Internet Explorer 10 mendukung transisi 3D (versi yang lebih awal tidak mendukung)
- Opera masih tidak mendukung transisi 3D
Efect transisi dapat diterapkan untuk setiap tautan atau melalui penggunaan atribut data-transition dalam pengajuan formulir:
<a href="#anylink" data-transition="slide"
>滑動到頁面二</a>
Tabel di bawah menunjukkan transisi yang dapat digunakan bersama dengan atribut data-transition:
Transisi | Deskripsi | Pengujian |
---|---|---|
fade | Default. Pencahayaan dan penyorotan untuk ke halaman berikutnya. | Pengujian |
flip | Membalikkan halaman dari belakang ke depan untuk ke halaman berikutnya. | Pengujian |
flow | Luncurkan halaman saat ini dan masukkan halaman berikutnya. | Pengujian |
pop | Pindah ke halaman berikutnya seperti jendela pop-up. | Pengujian |
slide | Geser dari kanan ke kiri untuk ke halaman berikutnya. | Pengujian |
slidefade | Geser dari kanan ke kiri dan pencahayaan untuk ke halaman berikutnya. | Pengujian |
slideup | Geser dari bawah ke atas untuk ke halaman berikutnya. | Pengujian |
slidedown | Geser dari atas ke bawah untuk ke halaman berikutnya. | Pengujian |
turn | Pindah ke halaman berikutnya. | Pengujian |
none | Tidak ada efek transisi. | Pengujian |
Petunjuk:Dalam jQuery Mobile, efek pencahayaan dan penyorotan adalah default untuk semua tautan (jika peramban mendukung).
Petunjuk:Semua efek di atas mendukung aksi balik, misalnya, jika Anda ingin halaman bergerak dari kiri ke kanan, bukannya dari kanan ke kiri, gunakan atribut data-direction dengan nilai "reverse" . Ini adalah nilai default di tombol mundur.
Contoh
<a href="#pagetwo" data-transition="slide" data-direction="reverse"
>Gulir</a>
- Hal Sebelumnya Halaman jQuery Mobile
- Hal Berikutnya Tombol jQuery Mobile