Rabu, 11 Juni 2014
0 komentar

Belajar Membuat Halaman Web Mobile Sederhana Dengan Jquery Mobile



Kali ini kita akan belajar membuat sebuah halaman web mobile dengan menggunakan jQuery Mobile.
1. Langkah pertama yang dilakukan adalah mendownload library jQuery Mobile. atau bisa menggunakan format yang sudah saya gunakan (download disini)
2. Setelah itu kita buat halaman web mobile kita dengan menuliskan kode berikut :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

3. Setelah itu kita panggil file JQM yang dibutuhkan seperti dibawah ini :

<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.4.2.min.js"></script>

Tulis kode tersebut di atas </head>

4. Jika sudah,kita bisa membuat sebuah halaman web mobile dengan menuliskan kode berikut ini :

<div data-role="page" id="pageone">
  <div data-role="header" data-position="fixed" data-theme="b">
 <h1>jQuery Mobile</h1>
 </div>

  <div data-role="main" class="ui-content">
  <p>Selamat datang.</p>
  </div>

  <div data-role="footer" data-position="fixed" data-theme="b">
  <h1>Footer Text</h1>
  </div>
</div>
Sebagai contoh kita membuat halaman dengan berisi hedaer content dan footer
5. Maka semua kode yang ditulis adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header" data-position="fixed" data-theme="b">
 <h1>jQuery Mobile</h1>
 </div>

  <div data-role="main" class="ui-content">
  <p>Selamat datang.</p>
  </div>

  <div data-role="footer" data-position="fixed" data-theme="b">
  <h1>Footer Text</h1>
  </div>
</div> 

</body>
</html>

6. Simpan dalam 1 folder pada web server kita, beri nama sesuai dengan yang anda inginkan, bisa format html untuk yang statis dan format php untuk web mobile yang dinamis.

7. Buka Emulator dan masukkan URL web mobile yang telah kita buat.

 
Toggle Footer
Top