Mengenal Jquery Mobile

Pada 11 Agustus 2010, John Resig (pengembang jquery) mengumumkan proyek Jquery Mobile. Tujuan dari proyek ini adalah untuk menyediakan UI Framework bagi para pengembang aplikasi mobile berbasis web.

Dengan adanya jquery mobile ini, para developer dan desainer web dapat menampilkan aplikasi webnya pada mobile device dengan cara yang mudah dan cepat.

Pengembangan jquery mobile saat ini mendapat sponsor dari perusahaan besar seperti Nokia, Blackberry, Adobe dan beberapa perusahaan besar lain. Perusahaan tersebut menginvestasikan dana, hardware dan developer untuk membantu pengembangan proyek jquery mobile ini.

beberapa proyek yang sudah dikerjakan menggunakan jquery mobile bisa dilihat di http://www.jqmgallery.com/

Implementasi Jquery Mobile

Untuk memulai jquery mobile, ada beberapa langkah:

– Tambahkan HTML5 doctype ke page: . Informasi ini diperlukan browser untuk mengidentifikasi tipe konten.

– Tambahkan viewport metatag: <meta name=”viewport” content=”width=device-width, initialscale=1″>. Berfungsi untuk menampilkan konten ke mobile device
– Tambahkan CSS, Library Javascript dan Jquery ke dalam include file
Berikut contoh HTML yang sudah di modifikasi dengan jquery mobile

<!DOCTYPE html>
<html>
<head>
<title>Contoh Jquery Mobile</title>
<meta name="viewport" content="width=device-width, initialscale=
1">
<link rel="stylesheet" href="jquery.mobile-1.1.0-rc.1.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0-
rc.1.min.js"></script>
</head>
<body>
<h1>Welcome</h1>
<p>
Selamat Datang pada tampilan dengan menggunakan jquery mobile.

Lakukan test halaman ini pada mobile device anda.
</p>
<p>
<i>Copyright &copy; 2013</i>
</p>
</body>
</html>

Blog