Melanjutkan tutorial yang sebelumnya kita akan mecoba membuat Sebuah header dan footer. Gaya desain pada aplikasi ini seperti aplikasi IOS yang populer pada pengguna App Store ponsel Apple. JQ Mobile dapat menggunakan atribut-atrbut yang digunakan untuk mendefinisikan header, footer, dan konten halaman. Mari kita lihat sekilas lokasi lokasi kontentnya . Ohh yah sebelumnya saya sudah membuat tutorial part 1 nya untuk belajar dasarnya bisa dilihat pada materi sebelumnya.
Langkah 1 Membuat Tombol Top Bar
Secara default bar bagian atas mendukung satu set dari dua (2) link dengan cara yang sama untuk aplikasi mobile lainnya. Pada IOS default menggunakan tombol "back" ada disebelah kiri dan seringkali "Option" atau "config" ada di sebelah kanan. untuk membuat tombol ini kita tinggal menambah sedikit skrip saja.
<div data-role="page" id="setting" data-add-back-btn="true">
<header data-role="header">
<a href="index.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>
<h1>Halaman Pengaturan</h1>
</header>
</div>
Langkah 2 Membuat Isi Contentnya
Pada langkah ini kita akan membut isi content dari tombol navigasi tersebut sebenarnya gampang seperti pembahasan sebelumnya.
<div data-role="content">
<p>Selamat datang ini adalah halaman untuk penagturan tutorial part 2.</p>
<p>Silahkan dicoba <a data-rel="back" href="#index">Kembali</a> Kapanpun</p>
</div>
Langkah 3 Mebuat Tombol Navigasi di Footer
Kita akan membuat sebuah tombol navigasi yang dinamis yang akan kita pasang di footer. agar tampilan web mobile kita lebih maksimal.
<footer data-role="footer" class="ui-body-b">
<div data-role="navbar">
<ul>
<li><a href="#index" data-direction="reverse">Home</a></li>
<li><a href="http://mydily.blogspot.com/" data-rel="external">Dily Blog</a></li>
<li><a href="http://mydily.blogspot.com/" data-rel="external">My Application</a></li>
</ul>
</div>
</footer>
</div>
Langka 4 Hasil Akhir dari Aplikasi kita
Inilah hasil lengkapnya dari tampilan halaman ini dan selesai lah sudah bikin navigasi yang ada di footer dan diheader kita. beikut skrip lengkapnya.
<!--
Created
By Dily Isyam Alie (Always Junior Programer)
-->
<html>
<head>
<title>Pengetahuan Dasar Web Mobile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="jquery/dily.css">
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery-1.6.4.mobile.js"></script>
</head>
<body>
<body>
<div data-role="page" id="index">
<header data-role="header">
<h1>Dily Mobile Website</h1>
</header>
<div data-role="content">
<h3>Lihat halaman 1 </h3>
<p>Silahkan klik tombol ini</p>
<p><a href="#about" data-role="button" data-theme="a">Tentang Saya</a></p>
</div>
<!-- Baris Berikut adalah Tutorila part 2 untuk membuat slider tombol -->
<div data-role="content">
<h3>Lihat halaman 2 </h3>
<p>Silahkan klik tombol ini untuk pengaturan </p>
<p><a href="#setting" data-role="button" data-theme="b">Pengaturan </a></p>
</div>
<!-- Baris Berikut adalah Tutorila part 2 untuk membuat slider tombol -->
<footer data-role="footer">
<h2>© Dily Same Alie .</h2>
</footer>
</div>
<div data-role="page" id="about">
<header data-role="header">
<h1>Halaman 1 Disini </h1>
</header>
<div data-role="content">
<p>Ini adalaha halaman content.</p>
<p>Silahkan dicoba <a data-rel="back" href="#index">Kembali</a> Kapanpun</p>
</div>
</div>
<!-- Baris Berikut adalah Tutorila part 2 untuk membuat slider tombol -->
<div data-role="page" id="setting" data-add-back-btn="true">
<header data-role="header">
<a href="index.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>
<h1>Halaman Pengaturan</h1>
</header>
<div data-role="content">
<p>Selamat datang ini adalah halaman untuk penagturan tutorial part 2.</p>
<p>Silahkan dicoba <a data-rel="back" href="#index">Kembali</a> Kapanpun</p>
</div>
<footer data-role="footer" class="ui-body-b">
<div data-role="navbar">
<ul>
<li><a href="#index" data-direction="reverse">Home</a></li>
<li><a href="http://mydily.blogspot.com/" data-rel="external">Dily Blog</a></li>
<li><a href="http://mydily.blogspot.com/" data-rel="external">My Application</a></li>
</ul>
</div>
</footer>
</div>
<!-- Baris Berikut adalah Tutorila part 2 untuk membuat slider tombol -->
</body>
</html>
</body>
</html>
 |
| Halaman Homenya |
 |
| Halaman Navigasi pengaturanya |
Demikian lah sedikit tulisan yang bisa saya bagi bila ada salah tulisan atau kata kata mohon maaf untuk source code bisa di download dimari Klik untuk download . Tulisan selanjutnya situngga yah kita akan membuat sebuah aplikasi yang mirip dengan facebook mobile..
Source code Download klik tombol diatas
 |
| Preview |
No comments:
Post a Comment