Skip to main content

Cara Buat Panel jquery mobile Secara Mudah

Pengenalan Panel jquery mobile

Materi ini membahas tentang Cara Buat Panel Menggunakan jquery mobile. Apa itu Panel, dalam hal ukuran layar, sebuah ponsel atau smartphone memiliki layar yang lebih kecil daripada PC monitorSaat melihat laman web atau aplikasi, ada beberapa elemen untuk mengakomodasi batas layar ini. Umumnya, ada tombol di kanan atau ke kiriyang akan mengungkapkan elemen tersembunyi ketika di tekan. untuk contoh panel ketika kita gunakan aplikasi facebook di smartphone, ada sebuah panel dikiri dan kanan aplikasi yang bisa kita klik untuk membukanya. Hal tersebut untuk navigasi sebuah halaman aplikasi. 

Download Code Lengkap Panel jquery mobile  : Download

video demo hasil aplikasi panel


Contoh aplikasi menggunakan Panel

Contoh Panel Mobile
Contoh Panel Mobile
Contoh Panel Mobile
Contoh Panel Mobile

Untuk membuat aplikasi yang menggunakan panel untuk navigasi nya, kita bisa gunakan framework jquery mobile. berikut pembahasan nya.

Buat Aplikasi Baru

Buka IDE anda buatkan sebuah project baru beri nama : App_panel

pertama : Pastikan kita memanggil jquery mobile dalam aplikasi

Baca : Pengenalan Awal jquery Mobile


<link rel="stylesheet" href="css/style.mobile.css" />
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>

Pastikan juga kita telah buat struktur aplikasi dan mempunyai gambar yang nantinya sebagai icon sebagai berikut :

Panel jquery mobile
Struktur Aplikasi

Buat file dan simpan dengan nama : index.html


<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Panel - BlogCiqwan.com</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.mobile.css" />
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>

<body>


<div class="demo-wrapper" data-role="page">
<!-- panel 01 -->
<!-- membuat header -->

<div class="header" data-role="header">
<!-- "open left" untuk definisikan id panel sebelah kiri -->
<!-- "#panel-01" dan "#panel-02" untuk tentukan pemanggilan panel sebelah kiri -->
<span class="open left"><a href="#panel-01">&#61641;</a></span>
<span class="title">Panel | blogciqwan.com</span>
<!-- class "open right" untuk definisikan id panel sebelah kanan -->
<span class="open right"><a href="#panel-02">&#9776;</a></span>
</div>

<div class="content" data-role="content">
<h3>Contoh Panel Aplikasi Jquery Mobile</h3>

Sebuah Aplikasi Akan Terasa Menarik Ketika Menambahkan Panel. Seperti Aplikasi
Facebook Pada Perangkat Mobile. Panel Dibutuhkan Ketika Tampilan Layar Yang Kecil
Dan Memberikan Kemudahan Bagi Pengguna Aplikasi.
Sekilas Gambaran dan Contoh nya.
http://blogciqwan.com/

</div>

<!-- panel 02 -->

</div>


</body>
</html>

Jika mau merubah tampilan aplikasi silahkan dikembangkan lagi, sesuaikan di : <div class=”demo-wrapper” data-role=”page”>

Jika kita jalankan aplikasi nya akan jadi seperti ini :

Cara Buat panel jquery mobile
Tampilan Awal Aplikasi

Jika kita klik icon yang ada disebelah kiri dan kanan aplikasi panel, belum ada reaksi apapun, karena link : #panel-01 dan #panel-02 belum kita buatkan.

cara buat klik Panel kiri

berikut kode yang dibutuhkan untuk membuat halaman panel untuk sebelah kiri aplikasi.

<!-- panel 01 -->
<div class="panel left" data-role="panel" data-position="left" data-display="push" id="panel-01">
<ul>
<li class="newsfeed"><a href="#" title="Home">Berita Terbaru</a></li>
<li class="profile"><a href="#" title="Profile">Profil</a></li>
<li class="setting"><a href="#" title="Setting">Pengaturan</a></li>
<li class="logout"><a href="#" title="Logout">Keluar</a></li>
<li class="report"><a href="#" title="Report">Laporan</a></li>
</ul>
</div>

Keterangan :

<div class=”panel left” data-role=”panel” data-position=”left” data-display=”push” id=”panel-01″> = Kita buat sebuah object panel dengan posisi disebelah kiri aplikasi, untuk menampilkan nya mode “push“. kita bisa menggantikan mode tampilan dengan lainnya selain push. definisikan nama panel dengan id=”panel-01″.

<ul> dan <li> untuk membuat tampilan List.

 <li class=”profile”><a href=”#” title=”Profile”>Profil</a></li> = ini berfungsi untuk pemanggilan class profil yang disediakn jquery mobile. dan judul nya diberi nama “profile”

Berikut tampilan hasilnya setelah kode panel kiri ditambahkan:

Cara buat panel jquery mobile
Panel Kiri

Ketika icon kiri di klik, maka akan muncul panel List menu disebelah kiri aplikasi.

cara buat klik Panel kanan

berikut kode yang dibutuhkan untuk membuat halaman panel untuk sebelah kanan aplikasi.



<div class="panel right" data-role="panel" data-position="right" data-display="overlay" id="panel-02">

<ul>
<li><a href="#" title="Ridwan, S.ST"><span class="avatar"><img src="img/wan.jpg" width="30" height="30"></span>Ridwan Merdu</a></li>
<li><a href="#" title="Minar"><span class="avatar"><img src="img/minar.jpg" width="30" height="30"></span>Rasminar</a></li>
</ul>
</div>

Keterangan kode :

<div class=”panel right” data-role=”panel” data-position=”right” data-display=”overlay” id=”panel-02″> = Kita buat sebuah object panel dengan posisi disebelah kanan aplikasi, untuk menampilkan nya mode “overlay“. kita bisa menggantikan mode tampilan dengan lainnya selain overlaydefinisikan nama panel dengan id=”panel-02″.

<a href=”#” title=”John Doe”><span class=”avatar”><img src=”img/wan.jpg” width=”30″ height=”30″></span>Ridwan Merdu</a> = Memberikan icon avatar yang telah kita sediakan di folder img dan tentukan ukuran width dan heigth.

Berikut tampilan hasilnya setelah kode panel kanan ditambahkan:

cara buat panel jquery mobile
Panel Kanan

Ketika icon kanan di klik, maka akan muncul panel disebelah Kanan aplikasi.

Complete Code Panel jquery Mobile


<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Panel - BlogCiqwan.com</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.mobile.css" />
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>

<body>
<div class="demo-wrapper" data-role="page">
<!-- panel 01 -->
<div class="panel left" data-role="panel" data-position="left" data-display="push" id="panel-01">
<ul>

<li class="newsfeed"><a href="#" title="Home">Berita Terbaru</a></li>
<li class="profile"><a href="#" title="Profile">Profil</a></li>
<li class="setting"><a href="#" title="Setting">Pengaturan</a></li>
<li class="logout"><a href="#" title="Logout">Keluar</a></li>
<li class="report"><a href="#" title="Report">Laporan</a></li>
</ul>

</div>

<!-- membuat header -->
<div class="header" data-role="header">
<!-- "open left" untuk definisikan id panel sebelah kiri -->
<!-- "#panel-01" dan "#panel-02" untuk tentukan pemanggilan panel sebelah kiri -->
<span class="open left"><a href="#panel-01">&#61641;</a></span>
<span class="title">Panel | blogciqwan.com</span>
<!-- class "open right" untuk definisikan id panel sebelah kanan -->
<span class="open right"><a href="#panel-02">&#9776;</a></span>
</div>

<div class="content" data-role="content">
<h3>Contoh Panel Aplikasi Jquery Mobile</h3>
Sebuah Aplikasi Akan Terasa Menarik Ketika Menambahkan Panel. Seperti Aplikasi
Facebook Pada Perangkat Mobile. Panel Dibutuhkan Ketika Tampilan Layar Yang Kecil
Dan Memberikan Kemudahan Bagi Pengguna Aplikasi.
Sekilas Gambaran dan Contoh nya.
http://blogciqwan.com/

</div>

<!-- panel 02 -->

<div class="panel right" data-role="panel" data-position="right" data-display="overlay" id="panel-02">
<ul>
<li><a href="#" title="Ridwan, S.ST"><span class="avatar"><img src="img/wan.jpg" width="30" height="30"></span>Ridwan Merdu</a></li>
<li><a href="#" title="Rasminar"><span class="avatar"><img src="img/minar.jpg" width="30" height="30"></span>Rasminar</a></li>

</ul>
</div>
</div>
</body>
</html>

Kesimpulan cara buat panel menggunakan jquery mobile

  • Panel dibutuhkan ketika tampilan aplikasi yang kita buat digunakan pada perangkat lebih kecil dari PC, contohnya : Smartphone, tablet, etc
  • membuat panel menggunakan jquery mobile akan lebih mudah dan cepat
  • kemudahan framework jquery mobile sangat cocok dipelajri bagi pengembang aplikasi mobile pemula.

Demikian pembahasan tentang cara buat panel menggunakan jquery mobile

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com