Transisi jQuery Mobile

jQuery Mobile termasuk kesan CSS yang memungkinkan Anda memilih cara pembukaan halaman.

Kesan Transisi jQuery Mobile

jQuery Mobile memiliki sekumpulan kesan tentang bagaimana untuk melalui halaman ke halaman berikutnya.

Keterangan:Untuk melaksanakan kesan transisi, pelayar mesti mendukung transisi CSS3 3D:

Pendukung pelayar

  • Internet Explorer 10 mendukung transisi 3D (versi yang lebih awal tidak mendukung)
  • Opera masih tidak mendukung transisi 3D

Kesan transisi dapat diterapkan ke mana-mana pautan atau penghantaran borang melalui penggunaan atribut data-transition:

<a href="#anylink" data-transition="slide">Pindah ke halaman kedua</a>

Tabel di bawah ini menunjukkan transisi yang dapat digunakan bersama-sama dengan atribut data-transition:

Transisi Penerangan Ujian
fade Baku. Pencahayaan dan penutupan untuk ke halaman berikutnya. Ujian
flip Gulir dari belakang ke hadapan untuk ke halaman berikutnya. Ujian
flow Tolak halaman semasa dan masukkan halaman berikutnya. Ujian
pop Pindah ke halaman berikutnya seperti tetingkap keluar. Ujian
slide Gulir dari kanan ke kiri untuk ke halaman berikutnya. Ujian
slidefade Gulir dari kanan ke kiri dan masuk untuk ke halaman berikutnya. Ujian
slideup Gulir dari bawah ke atas untuk ke halaman berikutnya. Ujian
slidedown Gulir dari atas ke bawah untuk ke halaman berikutnya. Ujian
turn Pindah ke halaman berikutnya. Ujian
none Tiada kesan transisi. Ujian

Petunjuk:Dalam jQuery Mobile, kesan pencahayaan dan penutupan secara baku ada di semua pautan (jika pelayar mendukung).

Petunjuk:Semua efek di atas mendukung gerakan berbalik, misalnya, jika Anda ingin halaman bergerak dari kiri ke kanan, bukannya dari kanan ke kiri, gunakan sifat data-direction dengan nilai "reverse". Ini adalah standar di tombol mundur.

Contoh

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Gulir</a>

Coba Sendiri