Halo… Masih membahas tentang fasilitas dan fitur yang diberikan oleh jQuery Mobile dalam memudahkan pengembangan halaman web berbasis mobile. Kita akan belajar membuat panel menu yang biasanya muncul di bagian kiri dari halaman web saat tombol menu diklik.
Agak susah ya menjelaskannya kalau tidak langsung melihat bagaimana gambarannya. Kita buat saja dulu kerangka kodenya. Silakan copas dulu dari file template yang sudah dijelaskan pada pengantar aplikasi berbasis web mobile, lalu ubah dan jadikan kodenya seperti ini. Ditambahkan tombol untuk membuka panel menu. Tentang tombol ini silakan baca lagi tentang cara membuat button. Simpan dulu kode ini dengan nama jqm_panel_menu.html.
<!DOCTYPE html>
<html lang="ID">
<head>
<title>Panel Menu jQuery 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.mobile-1.4.5.min.css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed">
<h1>Panel Menu</h1>
</header>
<div data-role="content">
<p>Membuat Panel Menu pada halaman web mobile menggunakan jQuery Mobile.</p>
<p>Ada 3 macam panel yang disediakan yaitu <b>Overlay</b>, <b>Reveal</b> dan <b>Push</b>.</p>
<p>Silakan klik tombol untuk melihat bagaimana panel ditampilkan.</p>
<a href="#panel-overlay" class="ui-btn ui-btn-inline">Overlay</a>
<a href="#panel-reveal" class="ui-btn ui-btn-inline">Reveal</a>
<a href="#panel-push" class="ui-btn ui-btn-inline">Push</a>
</div>
<footer data-role="footer" data-position="fixed">
<h2>BangHaji DotCom</h2>
</footer>
</div>
</body>
</html>
Perhatikan dulu penjelasan berikut ya.
Baris 15 ada tambahan atribut data-position="fixed" meskipun tidak wajib alias disesuaikan dengan kebutuhan. Pada contoh ini kita pakai agar kalau nanti isi halaman web mobile ini panjang maka saat halaman di-scroll bagian header tetap di posisinya dab tidak ikut ter-scroll. Clear ya.
Adapun baris 23-25 adalah tombol (button) yang akan digunakan sebagai pemicu agar panel bisa ditampilkan.
Kita lanjutkan dengan macam-macam panel dan membuat agar button berfungsi saat diklik.