Membuat Aplikasi Mobile Web Dengan JQuery (part 2)
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>
Berikut hasilnya :
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
Sumber :
0 comments:
Posting Komentar
PEDOMAN KOMENTAR
Ayo berpartisipasi membangun budaya berkomentar yang baik. Pantang bagi kita memberikan komentar bermuatan menghina atau spam.
Kolom komentar tersedia untuk diskusi, berbagi ide dan pengetahuan. Hargai pembaca lain dengan berbahasa yang baik dalam berekspresi. Setialah pada topik. Jangan menyerang atau menebar kebencian terhadap suku, agama, ras, atau golongan tertentu.
Bangun sharing ilmu dengan berkomentar disini :