Page & Dialog Transitions
- 1. jQuery Mobile Page & Dialog Transitions By.Takdir Lovely & Novalita Anggraeni
- 2. Jquery jQuery adalah sebuah library yang dibangun dengan menggunakan JavaScript untuk mengautomasi dan menyederhanakan perintah-perintah umum. Meskipun ada banyak library lain semacamnya, namun jQuery jauh lebih populer karena kemampuannya untuk menjalankan perintah pada peramban lama. jQuery berjalan pada browser bersamaan dengan JavaScript biasa. Ia terutama dipergunakan untuk animasi dan AJAX, yang cukup sulit untuk diprogramkan dengan vanilla JavaScript, namun bisa diketik dalam beberapa baris singkat dengan jQuery.
- 3. Jquery • jQuery dimasukkan dalam sebuah laman web dengan tag <script> tag; contohnya: <script src="./path/to/jquery.js"></script>. jQuery juga memiliki banyak sekali plugin yang memperluas fungsionalitasnya melalui berbagai metode. • Contoh panggilan jQuery, <script src="path/to/jquery.js"> <script> $("#box").click(function(){$("#box").slideUp()}); </script>
- 4. Jquery Mobile jQuery Mobile adalah sebuah platform pengembangan dari jQuery. Pertama kali kita harus belajar bagaimana memahami cara kerja dan implementasinya dalam aplikasi web. Dengan menggunakalan jQuery Mobile, Anda dapat men- develop berbagai solusi mobile yang bekerja dengan baik di berbagai piranti operasi mobile.
- 5. Perangkat/Piranti Jquery Mobile • Contoh perangkat/piranti yang didukung jQuery Mobile antara lain Android, Blackberry, Fennec (Mozilla), WebOS dari HP (Palm), iOS (iPhone, iPhod Touch dan iPad), serta Opera Mobile. Platfom lain seperti Meego, Windows Mobile, dan dan platform Symbian akan didukung di masa depan.
- 6. Create a Page Meskipun jQuery Mobile bekerja pada semua perangkat mobile , itu mungkin memiliki beberapa masalah kompatibilitas pada komputer desktop ( karena dukungan CSS3 terbatas ) .
- 8. Adding Pages in jQuery Mobile Menambahkan Artikel dalam jQuery Mobile kita dapat membuat beberapa halaman dalam satu file HTML dengan memisahkan setiap halaman dengan id unik dan menggunakan atribut href untuk menghubungkan antara mereka :
- 9. PAdding Pages in jQuery Mobile
- 10. Using Pages as Dialogs Menggunakan Pages sebagai Dialog Sebuah kotak dialog adalah jenis jendela yang digunakan untuk menampilkan informasi khusus atau masukan permintaan . Untuk membuat kotak dialog yang terbuka ketika pengguna keran pada link , menambahkan data - dialog = "true " untuk halaman yang ingin ditampilkan sebagai sebuah dialog :
- 11. Page as Dialogs
- 12. jQuery Mobile termasuk efek CSS3 yang memungkinkan Anda memilih cara yang harus dipakai untuk membuka halaman. jQuery Mobile Transition Effects memiliki berbagai efek untuk bagaimana transisi dari satu halaman ke halaman berikutnya. jQuery Mobile Transitions
- 13. Browser Yang Di Gunakan • Catatan : Untuk mencapai efek transisi , browser harus mendukung CSS3 3D Transformasi :
- 14. jQuery Mobile Transitions Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung 3D Mentransformasi . Efek transisi dapat diterapkan untuk setiap link atau formulir pengajuan dengan menggunakan atribut data transisi : <a href="#anylink" data-transition="slide">Slide to Page Two</a>
- 15. Tabel di bawah ini menunjukkan transisi yang tersedia yang dapat digunakan dengan data atribut - transisi untuk kedua halaman dan dialog : Transition Description For Pages For Dialogs fade Default. Merubah ke halaman berikutnya Try it Try it flip Membalik ke halaman berikutnya dari belakang ke depan Try it Try it flow Mengganti halaman saat ini dan mendatangkan halaman berikutnya Try it Try it pop Lanjut ke halaman berikutnya seperti jendela pop up Try it Try it slide Slides kehalaman berikutnya dari kanan ke kiri Try it Try it slidefade Slide dari kanan ke kiri dan mengganti dihalaman berikutnya Try it Try it Slideup Slide ke halaman berikutnya dari bawah ke atas Try it Try it Slidedown Slide Ke halaman berikutnya dari atas kebawah Try it Try it Turn Beralih Ke Halaman berikutnya Try it Try it none Tidak ada efek transisi Try it Try it
- 16. Tips Transition 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 atribut data arah dengan nilai "reverse " . Example : <a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>
- 17. Thank You