Laboratorium Pemrograman dan Basis Data

Pada kesempatan kali ini, saya akan memberikan penjelasan mengenai atribut penambah icon pada jQuery Mobile yaitu atribut "Data-Icon". Jadi pada framework ini, telah disediakan sekumpulan icon yang biasa digunakan ketika membangun sebuah aplikasi. 

Icon yang tersedia

Ser Geser dengan data-transition...

Kali ini masih membahas mengenai sebuah framework yang fenomenal yaitu jQuery Mobile. Bagi yang belum tahu dengan jQuery mobile bisa klik disini atau disini untuk mengenal jQuery Mobile. Baiklah, sekarang saya akan memperkenalkan salah satu fitur yang bisa kita handalkan dalam membangun aplikasi. Fitur yang saya maksud adalah "Transition"...

Menurut Google Translate, Transition dalam bahasa Indonesia diartikan dengan peralihan. Jadi sudah jelas, fitur yang satu ini akan membantu kita memberikan animasi peralihan dari halaman satu ke halaman yang lain. Pada dasarnya, transition ini bisa kita kustomisasi sesuai dengan kebutuhan. Tapi kali ini saya beri batasan masalah untuk menjelaskan mengenai transition yang ada pada bawaan jQuery Mobile versi 1.3.0 (Versi yang saya gunakan...)

Berikut penjelasan singkat mengenai Transition yang ada pada jQuery Mobile:

1. fade : peralihan dari halaman ke halaman lain dengan memberikan efek blur seolah-olah halaman hilang atau muncul dari kegelapan. 
2. pop : peralihan dari halaman ke halaman lain dengan memberikan efek seperti "muncul kepermukaan". Jadi ibarat kata, halaman yang tenggelam muncul ke layar. (Penjelasan yang membingungkan)
3. flip : peralihan dari halaman ke halaman lain dengan memberikan efek seperti membalikkan halaman tersebut, tapi bukan seperti membalikkan halaman pada buku.
4. turn : memiliki efek yang mirip dengan flip, namun ini seolah-olah titik rotasi halaman berada di pinggir halaman, sedangkan pada flip, titik rotasi pada garis tengah halaman.
5. flow : efek yang dihasilkan adalah halaman seperti tenggelam, kemudian dilempar ke bagian samping hingga tidak terlihat lagi. Efek yang satu ini, emang terlihat lebih garang dari pada yang lain, karena halaman bertukar dengan cara dilempar-lempar. Cocok bagi developer yang suka main keras.
6. slidefade : gabungan dari fade dan slide, sehingga halaman tersebut bergeser kemudian menghilang.
7. slide : efek yang diberikan pada peralihan ini yaitu membuat halaman seolah-olah meluncur dan digantikan oleh halaman berikutnya.
8. slideup : sama seperti slide, namun pergerakannya dari bawah ke atas.
9. slidedown : sama seperti slide, namun pergerakannya dari atas ke bawah.
10. none : sesuai namanya, peralihan tidak ada efek apa-apa. Main tukar aja. Simple, no animation!

Untuk menggunakan transition ini, kita harus menambahkan atribut pada element yang menjadi trigger (Pemicu) misalkan link atau <a></a>. Rumusnya seperti ini :

  <a href="index.html" data-transition="flow">Let Me Flow!</a>

 Dengan formula ini, maka halaman "index.html" akan dibuka dengan efek transition "flow". Silahkan ganti sesuai data transition yang diinginkan. Pada beberapa efek transition, bisa juga ditambahkan atribut "data-direction='reverse'" tanpa kutip. Contoh:

 <a href="index.html" data-transition="slide" data-direction="reverse">Let Me Slide!</a>

Formula diatas akan memberikan efek slide dengan arah pergerakan sebaliknya. Selebihnya, tergantung imajinasi teman-teman dalam memanfaatkan fitur yang ada pada jQuery Mobile untuk menciptakan aplikasi yang responsif.

Karena saya menyadari bahwa penjelasan saya mengenai transition sangat terbatas makauUntuk mengetahui dan mencoba demo dari masing-masing efek transition silahkan kunjungi link ini.
Referensi: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
Sumber Gambar: http://blogfreakz.com/mobile-development/jquery-mobile-tutorials/

Baiklah, pada kesempatan kali ini saya ingin menjelaskan tentang sebuah Framework yang bernama "jQuery Mobile". jQuery Mobile merupakan framework hasil pengembangan dari jQuery dan jQuery-UI. Dasar pengembangan jQuery ini adalah untuk memberikan tampilan yang lebih baik dan responsif dari sebuah web ketika dibuka dari lingkungan perangkat berjalan (Mobile).

Pengembangan jQuery mobile ini memang memberikan perhatian lebih pada pemanfaatan fitur-fitur sentuh yang ada pada Smartphone. Misalkan pendeteksian orientasi device, menangkap event "Tap" atau "Tap & Hold". Semua itu memang ditujukan agar pengembangan aplikasi mobile menjadi lebih baik dan memberikan kenyamanan bagi para pengguna.

Kali ini saya akan menjelaskan tentang penggunaan event "Tap" dan "Tap & Hold"

1. Siapkan struktur lengkap dari jQuery seperti gambar berikut.
Integrasikan file-file tersebut ke halaman index.html dengan benar agar jQuery bisa kita gunakan.
2. Buat file index.html yang berisi kodingan berikut.
3. Perhatikan pada saat penulisan ID dari masing-masing element HTML. Perhatikan pada tag Script. Didalam itulah dituliskan jQuery yang akan kita gunakan untuk menerima event Tap dan TapHold. Perhatikan script berikut.
Ini adalah gaya penulisan pada jQuery untuk menghandle event Tap dan TapHold Tersebut. Kemudian akan dijalankan perintah Alert untuk tap dan perintah mobile.changePage untuk TapHold. Apabila teman-teman belum mengerti gaya penulisan pada jQuery, bisa lihat ke Sini atau ke Sini untuk info lebih lengkap mengenai jQuery.

4. Simpan halaman index.html tersebut dan coba akses dari perangkat mobile. Maka hasilnya lebih dan kurang seperti ini.

Untuk perihal lain mengenai data-role, data-icon, header, footer. Akan dijelaskan pada postingan berikutnya...

Kalo ada yang ingin ditanyakan silahkan komen pada Comment Box... :D

Dengan jQuery, Happy Coding!