jQuery Mobile

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 ) .

7. Contoh Page/Halaman

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