Jquery Mobile merupakan open source yang sangat mendukung untuk tampilan website khusus untuk mobile, dan sangat banyak sekali yang menggunakan ini sebagai tampilan website kedua atau tampilan mobile app. Pada pembahasan kali ini saya akan memberikan tips dan trik mengenai Cara Menyisipkan Dan Mengenal Macam – macam Transisi Efek Jquery Mobile, sebelum kita praktekkan teman – teman perlu tahu apa itu transisi efek. Transisi efek biasa di pakai untuk membuat efek saat perpindahan link halaman website, jadi ketika di klik link maka transisi efek akan di jalankan. Di bawah ini adalah macam – macam type transisi efek yang di miliki oleh Jquery Mobile
- Fade efek nya Memudar ke halaman berikutnya
- Flip efek nya Membalik ke halaman berikutnya dari belakang ke depan
- Flow efek nya Melempar halaman saat pergi dan datang dengan halaman berikutnya
- Pop efek nya Pergi ke halaman berikutnya seperti jendela popup
- Slide efek nya Slide ke halaman berikutnya dari kanan ke kiri
- Slidefade efek nya Slide dari kanan ke kiri dan memudar di halaman berikutnya
- Slideup efek nya Slide ke halaman berikutnya dari bawah ke atas
- Slidedown efek nya Slide ke halaman berikutnya dari atas ke bawah
- Turn efek nya Beralih ke halaman berikutnya
- None Tidak ada efek transisi
Di atas ini adalah macam – macam dari efek transisi, untuk penggunaannya pun sangat mudah, kita tinggal sisipkan dengan cara memberikan data-transition=” ” di dalam tombol atau link dan di dalam tang ” ” tinggal kita mau berikan type transisinya. Baik, kita implementasikan Cara Menyisipkan Dan Mengenal Macam – macam Transisi Efek Jquery Mobile pertama – tama siapkan atau buat terlebih dahulu file index.html jquery mobile. Untuk latihan kali ini saya menggunakan file index di artikel Cara Menambahkan Artikel Dalam jQuery Mobile teman – teman bisa ambil di artikel nya atau bisa juga buat sendiri link dari Jquery.com
File nya seperti gambar di bawah ini
Bisa kalian lihat pada gambar di atas ini, karena kita ingin memberikan transisi ke halaman dua maka kita berikan transisi nya di dalam link yang akan mengarah halaman dua seperti yang saya beri kotak berwarna merah. Nah tinggal kita berikan data-transition=”pop” maka ketika di klik link maka transisi yang berjalan adalah efek nya Pergi ke halaman berikutnya seperti jendela popup. Teman – teman juga bisa coba sendiri dengan memberikan type – type transisi yang tadi saya sudah berikan list nya. Jika menggunakan efek ini tampilan website tidak terlihat kaku melainkan lebih atraktif karena ada sedikit animasi transisi nya. Oke, sekian pada artikel kali ini tentang Cara Menyisipkan Dan Mengenal Macam – macam Transisi Efek Jquery Mobile kita berjumpa kembali di artikel berikutnya. Semoga bermanfaat
Terima Kasih dan Sampai Jumpa.