Hallo sahabat dumenity berjumpa lagi dalam tutorial Dumetschool, pada tutorial kali ini kita akan belajar tentang Pengenalan Tentang Jquery Mobile. JQuery Mobile adalah framework mobile cross platform yang dirancang untuk mempermudah dan meningkatkan pengembangan aplikasi web mobile dengan mengintegrasikan HTML5, CSS3, jQuery dan jQuery UI ke dalam satu kerangka kerja yang tidak hanya kuat, namun dapat dipertahankan dan terorganisir.
jQuery Mobile dibangun di atas inti jQuery yang ada, artinya jika teman – teman memahami sintaks jQuery, teman – teman tidak akan mendapat masalah jika Jquery Mobile bekerja. Kerangka ini kompatibel dengan semua aplikasi mobile dan desktop utama termasuk iOS, Android, Blackberry, Palm WebOS, Nokia / Symbian, Windows Mobile, Opera Mobile / Mini, Firefox Mobile dan semua browser desktop modern. Ukurannya yang ringan (sekitar 20K dikompres) membuatnya jadi lebih mudah digunakan.
Untuk memulai dengan jQuery mobile, cukup menuju ke jQuery Mobile ATAU KLIK DISINI UNTUK DOWNLOAD LANGSUNG. Oke sekarang kita akn praktik membuat tampilan jquery mobile. pertama dowload dulu file jquery-nya kalau sudah silahkan teman – teman ikuti langkah – langkah berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <!-- Include meta tag to ensure proper rendering and touch zooming --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> isi konten temen - temen disini </body> </html> |
Oke kalau sudah kita akan mengisi bagian contennya, seperti di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div data-role="page" id="pageone"> <div data-role="header"> <h1>Insert Page Title Here</h1> </div> <div data-role="main" class="ui-content"> <p>Insert Content Here</p> </div> <div data-role="footer"> <h1>Insert Footer Text Here</h1> </div> </div> |
masukan conten di atas tepat berada diantara tag body, oke kalau sudah silahkan teman – teman save dan jalankan maka hasilnya akan seperti di bawah ini:
Oke cukup mudah bukan belajar tentang Jquery Mobile, oke itulah tadi pembahasan saya tentang Pengenalan Tentang Jquery Mobile semoga bermanfaat.