PowerPoint Presentation
jQuery MobilePage & Dialog TransitionsBy. Takdir Lovely
& Novalita Anggraeni
JqueryjQuery 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.
JqueryjQuery dimasukkan dalam sebuah laman web dengan tag tag;
contohnya: . jQuery juga memiliki banyak sekali plugin yang
memperluas fungsionalitasnya melalui berbagai metode.Contoh
panggilan jQuery,
$("#box").click(function(){$("#box").slideUp()});
Jquery MobilejQuery 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.
Perangkat/Piranti Jquery MobileContoh 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.
Create a PageMeskipun jQuery Mobile bekerja pada semua perangkat
mobile , itu mungkin memiliki beberapa masalah kompatibilitas pada
komputer desktop ( karena dukungan CSS3 terbatas ) .
Contoh Page/Halaman
Adding Pages in jQuery MobileMenambahkan 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 :
PAdding Pages in jQuery Mobile
Using Pages as DialogsMenggunakan 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 :
Page as Dialogs
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
Browser Yang Di GunakanCatatan : Untuk mencapai efek transisi ,
browser harus mendukung CSS3 3D Transformasi :
jQuery Mobile TransitionsAngka-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 :
Slide to Page Two
Tabel di bawah ini menunjukkan transisi yang tersedia yang dapat
digunakan dengan data atribut - transisi untuk kedua halaman dan
dialog :TransitionDescriptionFor PagesFor DialogsfadeDefault.
Merubah ke halaman berikutnyaTry itTry itflipMembalik ke halaman
berikutnya dari belakang ke depanTry itTry itflowMengganti halaman
saat ini dan mendatangkan halaman berikutnyaTry itTry itpopLanjut
ke halaman berikutnya seperti jendela pop upTry itTry itslideSlides
kehalaman berikutnya dari kanan ke kiriTry itTry itslidefadeSlide
dari kanan ke kiri dan mengganti dihalaman berikutnyaTry itTry
itSlideupSlide ke halaman berikutnya dari bawah ke atasTry itTry
itSlidedownSlide Ke halaman berikutnya dari atas kebawah Try itTry
itTurnBeralih Ke Halaman berikutnyaTry itTry itnoneTidak ada efek
transisiTry itTry it
Tips TransitionSemua 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 :
Slide
Thank You
