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:
- file jquery.mobile-1.4.5.min.css dan folder images (diletakkan di folder css dari project anda)
- file jquery.mobile-1.4.5.min.js dan file jquery.mobile-1.4.5.min.map (diletakkan di folder js dari project anda)
- file jquery-1.9.0.min.js (diletakkan di folder js dari project anda)
Kemudian, kita mulai membuat file html, kita namakan index.html.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery Mobile Framework</title> <link rel='stylesheet' href='css/jquery.mobile-1.4.5.min.css'/> <script src='js/jquery-1.9.0.min.js' ></script> <script src='js/jquery.mobile-1.4.5.js' ></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Latihan</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="#" data-transition="flip"><h2>Mengenal MongoDB, Open Source Database NoSQL Document-Oriented</h2></a></li> <li><a href="#" data-transition="flip"><h2>7 Plugin Firefox yang Wajib Dimiliki Para Web Developer</h2></a></li> <li><a href="#" data-transition="flip"><h2>Membuat SpreadSheet Online Dengan dhtmlxSpreadSheet</h2></a></li> <li><a href="#" data-transition="flip"><h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a></li> <li><a href="#" data-transition="flip"><h2>Membuat Pretty URL Sederhana Pada ASP.NET 4.0</h2></a></li> <li><a href="#" data-transition="flip"><h2>Deteksi Perangkat Mobile Dengan Javascript Sederhana</h2></a></li> </ul> </div> <div data-role="footer" data-theme="a"> <h3>Kuliah Promnet</h3> </div> </div> </body> </html> |
Jika dicoba dijalankan, maka akan menampilkan hasil sebagai berikut:
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.
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 🙂
Leave a Reply