Cara Install Jquery Mobile dan Fungsinya
Di kesempatan kali ini saya akan memberikan tips dan trik mengenai bagaimana Cara Install Jquery Mobile dan Fungsinya, pertama-tama – tama saya akan membahas manfaat dari Jquery mobile. Jquery mobil berfungsi bagi merancang tampilan blog versi mobile atau smartphone, jQuery Mobile pun mendukung bermacam-macam platform yang berbeda, dari desktop biasanya, smartphone, tablet atau perlengkapan e-reader seperti Nook atau Kindle. Seperti contoh blog atau program sosial media facebook.com dan viva.co.id keduanya mempunyai masing – masing dua tampilan yaitu tampilan desktop dan mobil dan masih banyak blog atau program lainnya yang memakai Jquery mobile. Coba teman – teman buka www.facebook.com dan https://m.facebook.com/ lalu buka link pun http://www.viva.co.id/ dan http://m.viva.co.id/, kedua blog ini masing – masing mempunyai tampilan mobile dan desktop dan dapat kalian bedakan sendiri perbedaannya. Jadi tak heran Jquery mobile amat banyak digunakan oleh para programmer bagi merancang program yang ia bikin dapat mendukung bermacam-macam platform, bagi belajar Jquery Mobile pastinya teman – teman wajib paham atau menguasai yang namanya html, css, javascript, dan mendasar – mendasar jquery.
Bagus, sekarang ini kita akan coba implementasikan Cara Install Jquery Mobile dan Fungsinya seperti biasanya 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 di gambar di atas ini, sebelum kita mulai wajib load terlebih dahulu library Jquery mobile nya atau teman – teman dapat pun unduh Jquery mobile bagi 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 pada 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 di browser nya karenanya akan tampil seperti gambar di bawah ini
Bagaimana telah mulai ada ilustrasi apa belum, lebih jelas nya kita buka link http://m.viva.co.id/ dan https://m.facebook.com/ teman – teman akan melihat masing – masing blog ini dengan tampilan mobile. Sama yang kita baru install tadi
Betul-betul menarik bukan…???
Oke demikianlah dulu di artikel kali ini mengenai Cara Install Jquery Mobile dan Fungsinya, kita berjumpa kembali di artikel yang akan datang. Bagi lebih jelas nya teman – teman dapat kunjungi blog resmi nya di www.jquery.com bagi melihat bermacam-macam manfaat – manfaat dan demo dari jquery.
Terimakasih dan Hingga Jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
