Membuat halaman dalam PhoneGap

Diketahui:

Saya menggunakan jQuery Mobile seperti terlihat dalam struktur projek dibawah ini:

Contoh Kasus:

Saya ingin membuat tampilan halaman seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Kamu bisa gunakan kode berikut ini:

<!DOCTYPE html>
<html> 

<head>

<meta charset=”utf-8″ />

<meta name=”format-detection” content=”telephone=no” />

<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi” />

<link rel=”stylesheet” type=”text/css” href=”css/jquery.mobile-1.4.3.css” />

<meta name=”msapplication-tap-highlight” content=”no” />

<script type=”text/javascript” src=”cordova.js”></script>

<script type=”text/javascript” src=”js/index.js”></script>

<script type=”text/javascript” src=”js/jquery-2.1.1.min.js”></script>

<script type=”text/javascript” src=”js/jquery.mobile-1.4.3.js”></script>
<title>a2fahmi.com</title>

</head>

<body>

<div data-role=”page”>

<div data-role=”header” ¬†align=”center”>a2fahmi.com</div>

<div role=”main” ¬†class=”ui-content”>

<ul>

<li>Tempat kursus private phonegap di Bogor</li>

<li>Belajar bisa offline(belajar dirumah saya) ataupun Online</li>

</ul>

</div>

<div data-role=”footer” align=”center”>Created by: Fahmi Basya Kartapura</div>

</div>

</body>

</html>

Keterangan:

  • <div data-role=”page”>, Kode ini digunakan untuk membuat sebuah halaman
  • <div data-role=”header” >, Kode ini digunakan untuk membuat header halaman.
  • <div class=”ui-content”>, Kode ini digunakan untuk membuat isi halaman.
  • <div data-role=”footer”>, Kode ini digunakan untuk membuat footer halaman.

 

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *