jQuery Mobile merupakan framework javascript untuk membangun halaman web
yang dioptimasi untuk perangkat mobile. jQuery Mobile merupakan
pengembangan dari proyek jQuery.
Okeh, kali ini saya akan belajar sebagai newbie, saya ingin membuat sebuah halaman web yang menggunakan jQuery Mobile.
Sebelum mulai mencoba, silakan buka halaman demo untuk melihat hasil akhirnya
Langkah-langkah yang saya lakukan:
1. Mengunduh file yang diperlukan
Saya memerlukan komponen-komponen yang meliputi jQuery, jQuery Mobile (javascript file dan css file).
jQuery Mobile javascript –> http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
jQuery Mobile css –> http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
2. Buat halaman html dengan struktur dasar seperti berikut ini, beri nama misalnya intro.html
<!DOCTYPE html> <html> <head> <!-- bagian HEAD --> </head> <body> <!-- bagian BODY --> </body> </html>
3. Copykan jquery-1.8.2.min.js, jquery.mobile-1.2.0.min.js, dan jquery.mobile-1.2.0.min.css
di folder yang sama dengan intro.html, kemudian sisipkan di HEAD
seperti berikut ini (keterangan terlampir dalam komentar html dalam kode
di bawah)
<head> <!--pengaturan encoding karakter--> <meta charset="utf-8"> <!--pengaturan lebar dan skala halaman--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--judul halaman--> <title>Njajal jQuery Mobile</title> <!--integrasi komponen CSS dari jQuery Mobile--> <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" /> <!--integrasi komponen jQuery--> <script src="jquery-1.8.3.min.js"></script> <!--integrasi komponen jQuery Mobile--> <script src="jquery.mobile-1.2.0.min.js"></script> </head>
4. Selanjutnya beralih ke bagian BODY, tambahkan elemen div untuk page, header, content, dan footer
<body> <div data-role="page"> <div data-role="header"> <!-- isi bagian header --> </div> <div data-role="content"> <!-- isi bagian content --> </div> <div data-role="footer"> <!-- isi bagian footer --> </div> </div> </body>
5. Beri isi bagian elemen div untuk page, header, content, dan footer
<body> <div data-role="page"> <div data-role="header"> <h1>Halaman Tunggal</h1> </div> <div data-role="content"> <p>Ini adalah halaman web yang menggunakan jQuery Mobile - www.ardhi.web.id</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body>
6. Selesai, source code lengkap seperti berikut
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Njajal jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" /> <script src="jquery-1.8.3.min.js"></script> <script src="jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Halaman Tunggal</h1> </div> <div data-role="content"> <p>Ini adalah halaman web yang menggunakan jQuery Mobile - www.ardhi.web.id</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html>
7. Buka halaman melalui browser, hasilnya adalah sebagai berikut
Bagaimana? Mudah bukan
Demikian tutorial kali ini, sampai jumpa pada kesempatan lainnya ;)
sumber:
Entries
3 comments:
bang file yg diperlukannya,
jQuery –> http://code.jquery.com/jquery-1.8.2.min.js
jQuery Mobile javascript –> http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
jQuery Mobile css –> http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
ko ga bsa di download?
mohon bimbingannya bang :)
bisa kok, tinggal buka link tersebut
trus klik kanan, pilih Save Page As
nice teknik ya
Post a Comment