Pada artikel sebelumnya kita sudah belajar seputar jQuery Mobile, dari cara install, membuat menu dan sampai membuat sebuah tampilan website sederhana khusus tampilan mobile. Kali ini saya akan mencoba memberikan tips dan trik tentang Cara Menggunakan Panel Pada jQuery Mobile yang mana fitur ini dimiliki oleh jQuery Mobile dan kita hanya tinggal memakainya dengan cara copy paste saja. Panel di jQuery Mobile yang artinya akan meluncur keluar dari kiri atau sisi kanan layar dengan konten tambahan, untuk membuat panel cukup menambahkan data-role=”panel” atribut untuk <div> elemen dan menentukan id nya. Latihan kali ini kita akan membuat sebuah menu di dalam panel, sebuah tombol pada halaman utama. Ketika di klik panel akan muncul dari kiri. Berikut ini adalah screen shoot gambar nya yang nanti kita akan buat
Ketika di klik maka panel akan muncul
Latihan kali ini simple saja, dan nanti teman – teman bisa di kembangkan sendiri. Baik langsung saja kita implementasikan Cara Menggunakan Panel Pada jQuery Mobile seperti biasa siapkan terlebih dahulu text editornya dan kita install untuk jQuery Mobile nya. Kalian bisa kunjungi langsung website resminya di www.jquery.com atau bisa juga copy script di bawah ini
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><strong>Cara Menggunakan Panel Pada jQuery Mobile</strong></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> </body> </html>
Kemudian save dengan nama index.html, berikutnya teman – teman ketikkan script seperti gambar di bawah ini
Jika sudah, save dan jalankan pada browser nya maka akan tampil seperti gambar di bawah ini
Coba teman – teman klik button “Open Navigation” tetapi belum berfungsi panel nya, kita tambahkan script untuk menampilkan panel menu nya
Teman – teman ketikkan persis sebelum data-role=”header” atau lihat gambar di atas ini yang saya beri kotak berwarna orange, jika sudah save dan refresh pada browser nya maka panel akan muncul jika di klik button “Open Navigation”.
Sangat simple sekali ya teman – teman, inilah cara penggunaan sebuah panel sederhana didalam jQuery Mobile digunakan untuk membuat sebuah layout menu atupun sebuah halaman aside. Oke, sekian pada artikel kali ini tentang Cara Menggunakan Panel Pada jQuery Mobile kita berjumpa kembali pada artikel yang akan datang. terimakasih dan sampai jumpa.
Semoga bermanfaat 😉