Tutorial Dasar JQueryMobile (Part 1)

JqueryMobile adalah sebuah library CSS dan JS untuk menghasilkan tampilan antarmuka berbasis web yang responsif yang bisa diakses dengan baik, artinya tampilan web tidak berantakan dan tidak hancur walaupun diakses melalui beragam perangkat yang berbeda resolusi layarnya, seperti Desktop, Tablet, maupun Smartphone.

Sebelum memulai tutorial ini, diasumsikan pembaca telah memahami konsep pemrograman HTML, CSS, dan JS dengan baik.

SETUP AWAL JQUERYMOBILE

Untuk mendownload library JQueryMobile, silahkan buka situs resmi JQueryMobile, atau download langsung melalui link berikut: http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip

Anda juga harus mendownload library JQuery yang bisa didownload di http://code.jquery.com/jquery-1.9.0.min.js

Setelah didownload, yang kita akan gunakan adalah:

  1. file jquery.mobile-1.4.5.min.css dan folder images (diletakkan di folder css dari project anda)
  2. file jquery.mobile-1.4.5.min.js dan file jquery.mobile-1.4.5.min.map (diletakkan di folder js dari project anda)
  3. file jquery-1.9.0.min.js (diletakkan di folder js dari project anda)

Kemudian, kita mulai membuat file html, kita namakan index.html.

Struktur File
Struktur File

SETUP HTML

Isi dari file HTML adalah meng-load semua library JQueryMobile (CSS dan JS) pada bagian <head>. Selanjutnya di bagian <body>, kita mulai menggunakan elemen-elemen dasar JQueryMobile untuk membuat header, isi website, dan footer. Isi website akan diisi dengan tampilan widget listview.

Jika dicoba dijalankan, maka akan menampilkan hasil sebagai berikut:

Tampilan index.html
Tampilan index.html

 

Agar bisa terlihat seperti tampilan mobile di atas, pada browser mozilla, klik kanan dan pilih menu “Inspect Elemen”. Selanjutnya klik tombol “View Responsive Design” pada bagian bawah.

Inspect Elemen pada Mozilla
Inspect Elemen pada Mozilla

 

NEXT?

Selanjutnya anda bisa mencoba membuat widget-widget lain yang akan ditampilkan pada bagian konten website, seperti Tabs, Panel, Popup, Collapsible, dll. Panduan lengkapnya bisa dilihat di http://demos.jquerymobile.com/1.4.5/

Selamat mencoba 🙂

Comments

comments

Be the first to comment

Leave a Reply

Your email address will not be published.


*