Pada kesempatan kali ini saya akan memberikan tips dan trik tentang bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama – tama saya akan membahas fungsi dari Jquery mobile. Jquery mobil berfungsi untuk membuat tampilan website versi mobile atau smartphone, jQuery Mobile juga mendukung berbagai platform yang berbeda, dari desktop biasa, smartphone, tablet atau perangkat e-reader seperti Nook atau Kindle. Seperti contoh website atau aplikasi sosial media facebook.com dan viva.co.id keduanya memiliki masing – masing dua tampilan yaitu tampilan desktop dan mobil dan masih banyak website atau aplikasi lainnya yang memakai Jquery mobile. Coba teman – teman buka www.facebook.com dan https://m.facebook.com/ lalu buka link juga http://www.viva.co.id/ dan http://m.viva.co.id/, kedua website ini masing – masing memiliki tampilan mobile dan desktop dan bisa kalian bedakan sendiri perbedaannya. Jadi tidak heran Jquery mobile sangat banyak digunakan oleh para programmer untuk membuat aplikasi yang ia buat bisa mendukung berbagai platform, untuk belajar Jquery Mobile tentunya teman – teman wajib mengerti atau menguasai yang namanya html, css, javascript, dan dasar – dasar jquery.
Baik, sekarang kita akan coba implementasikan Cara Install Jquery Mobile dan Fungsinya seperti biasa teman – teman siapkan text editornya dan lihat gambar di bawah ini
<!-- 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>
Seperti yang kalian lihat pada gambar di atas ini, sebelum kita mulai wajib load terlebih dahulu library Jquery mobile nya atau teman – teman bisa juga download Jquery mobile untuk versi ofline.
Baru kita ketikkan script – script Jquery mobile nya, dan kita wajib memberikan data-role=”page” id=”pageone” yang menandakan dia ada didalam satu page
Baru kita berikan content di dalam nya, teman – teman ikuti seperti script di bawah ini ya
!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> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome!</p> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html>
Kemudian save dengan nama index.html dan jalankan pada browser nya maka akan tampil seperti gambar di bawah ini
Bagaimana sudah mulai ada gambaran apa belum, lebih jelas nya kita buka link http://m.viva.co.id/ dan https://m.facebook.com/ teman – teman akan melihat masing – masing website ini dengan tampilan mobile. Sama yang kita baru install tadi
Sangat menarik bukan…???
Oke sekian dulu pada artikel kali ini tentang Cara Install Jquery Mobile dan Fungsinya, kita berjumpa kembali di artikel yang akan datang. Untuk lebih jelas nya teman – teman bisa kunjungi website resmi nya di www.jquery.com untuk melihat berbagai fungsi – fungsi dan demo dari jquery.
Terimakasih dan Sampai Jumpa.
Semoga bermanfaat 🙂