Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / android / program / software / windows

Pengenalan JQuery Mobile

Posting Komentar
Pengenalan JQuery Mobile
Kali ini kita akan membahas mengenai dasar-dasar sebuah pemrograman framework yang disebut dengan JQuery Mobile. Saat ini, bahasa pemrgograman ini banyak digunakan karena kemudahan dalam penggunaannya. Sebenarnya saya juga mau tidak mau baru harus mempelajarinya karena ada project yang berhubungan dengan JQuery Mobile beberapa waktu yang lalu.


Pengenalan JQuery Mobile
image:codeforest.net
JQuery Mobile merupakan framework yang digunakan untuk membangun aplikasi web mobile, dioptimalkan untuk perangkat layar sentuh. Seperti yang kita ketahui saat ini merupakan era peralihan dari perangkat desktop ke perangkat mobile seperti smartphone dan tablet. JQuery Mobile dapat dijalankan hampir di semua perangkat smartphone seperti Android, Windows Phone, iOS, Blackberry, Symbian, dan lain-lain, jadi kita tidak perlu terpacu pada salah satu merek atau model. Kita dapat mengembangkan satu aplikasi yang dapat didistribusikan ke semua perangkat. Pada dasarnya JQuery Mobile merupakan pengembangan ke arah mobile dari JQuery, yaitu dengan berdasarkan pada HTML5 dan CSS3, serta ditambah dengan JavaScript dan Ajax.
Pengenalan JQuery Mobile
image:webappers.com

Dengan JQuery Mobile akan membuat tampilan aplikasi semakin menarik dan atraktif, serta sangat interaktif.
Untuk dapat menggunakannya, ada dua cara memanggil JQuery Mobile pada halaman web kita, yaitu dengan cara online dan offline. Metode online yaitu dengan memanggil langsung dari CDN (Content Delivery Network) yang sudah disediakan, sedangkan metode offline dengan cara mendownload file JQuery Mobile dan menempatkannya di komputer lokal atau hosting kita sendiri. Jika kita berada pada tahap pengembangan ada baiknya kita menggunakan metode offline karena tidak perlu terkoneksi dengan internet. Berikut perbedaan kedua script metode di atas:
Online:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

Offline:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
</head>
Pada metode offline, tempatkan file-file JQuery Mobile pada folder yang sama dengan aplikasi kita.
Berikut ini adalah sebuah file sederhana standar JQuery Mobile yang sudah dapat dijalankan:
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Judul header</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Isi ditampilkan di sini</p>
  </div>
  <div data-role="footer">
    <h1>Footer di sini</h1>
  </div>
</div>
</body>
Pada contoh di atas menggunakan atribut data-role yang berfungsi memberikan keterangan tentang fungsi masing-masing bagian, seperti data-role="page" menandakan bahwa bagian tersebut adalah page/halaman. Anda dapat menggunakan banyak tag yang dapat digunakan untuk membuat halaman web mobile Anda semakin aplikatif dan menarik seperti Transitions, Buttons, Icons, Popups, Toolbars, Navbars dan masih banyak lagi. Untuk mempelajarinya Anda dapat mengunjungi w3schools. Di sana Anda dapat mencobanya sendiri.
Semoga bermanfaat.
Ari
Ari blogger, IT technician

Posting Komentar untuk "Pengenalan JQuery Mobile"