Ada banyak cara untuk membuat mobile web.
Salah satunya dengan menggunakan framework.
Framework yang dapat dipilih ada banyak, mulai twitter bootstrap, zurb foundation, dan jQuery Mobile
Kali ini membahas tentang penggunaan jQuery Mobile.
Perhatikan kode berikut yang berisi 3 bagian dasar dari sebuah aplikasi mobile yang umum. ketiganya meliputi area header, content, dan footer. Juga terdapat meta viewport yang berfungsi untuk men-disable zoom saat dibuka di mobile browser. Ini adalah meta yang merupakan ciri khas dari mobile web app.
See the Pen YPddKb by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.
html markup sederhana ini dapat tampil menjadi berbagai macam tampilan yang mirip native mobile menggunakan bantuan CSS. Akan tetapi, memodif markup tersebut melalui jalur CSS sangatlah memakan waktu. di skenario inilah, jQuery Mobile dapat membantu mempercepat proses transformasi markup tersebut menjadi tampilan mirip native.
secara umum, jQuery memberikan titik awal yang bagus untuk mendapatkan behaviour dari sebuah aplikasi mobile, sedangkan untuk styling dan sejenisnya, kebebasan penuh berada pada tangan desainer. Apa saja yang mungkin bisa dilakukan untuk meng-custom jQuery mobile? bisa diincip di galery aplikasi mobile pada situs jQuery Mobile Gallery.
seberapa jauh fasilitas yang disediakan jQuery Mobile?
bisa dimulai dengan memodif kode dasar diatas menjadi jQuery Mobile ready.
langkah-langkahnya sebagai berikut:
- Meng-include-kan css dari jquery mobile.
- Meng-include-kan js dari jquery dan jquery mobile.
- Memodif html markup menjadi bentuk yang dikenali oleh jQuery Mobile.
langkah 1 dan 2 merupakan langkah-langkah untuk mengaktifkan jQuery Mobile.
ada banyak cara untuk mendapatkan jquery mobile. cara termudah menggunakan CDN seperti pada contoh berikut. Untuk langkah ke 3, secara umum, bentuk markup yang dikenali oleh jQuery Mobile diawali dengan attribute data-. Untuk penentuan struktur dasar, dilakukan menggunakan attribut data-role. Dimana nilai dari antribut tersebut antara lain page, header, content, dan footer. jika penulisan atribut data-role tersebut sesuai dengan yang dikenali jquery mobile, maka akan menghasilkan tampilan berikut. Sebuah tampilan pada aplikasi jQuery Mobile diwakili oleh data-role=”page”. Di mana dalam 1 page, bisa berisi header, content, dan footer.
berikut adalah hasil dari implementasi 3 langkah tersebut.
See the Pen Setup jQuery Mobile by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.
perhatikan bahwa tag div yang memiliki attribut data-role akan memiliki styling yang berbeda. Ini berarti jquery mobile sudah aktif.