jQuery Mobile (16): Membuat Panel Menu

Oke lanjut dengan menambahkan kode berikut ini di bawah bagian footer dan masih dalam data-role="page". Perhatikan baik-baik id yang ada pada masing-masing panel. Nama id harus sesuai dengan link yang ada di masing-masing tombol. Ketik kode berikut:

<div data-role="panel" data-position="left" data-display="overlay" data-theme="b" id="panel-overlay">
  <p>Panel Overlay, ditampilkan dari sebelah kiri.</p>
</div>

<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="panel-reveal">
  <p>Panel Reveal, ditampilkan dari sebelah kanan.</p>
</div>

<div data-role="panel" data-position="right" data-display="push" data-theme="a" id="panel-push">
  <p>Panel Push, ditampilkan dari sebelah kanan.</p>
</div>

Dari ketiga grup kode di atas ada yang berbeda, yaitu atribut data-theme. Demikian juga dengan data-position yang akan menjadi sumber asal tampilnya panel. Untuk id agar jadi perhatian, harus sesuai dengan nama yang dipanggil dalam link tombol. Simpan file tersebut, masih dengan nama file yang sama.

Macam-macam Panel

Silakan coba jalankan file tadi dan klik masing-masing tombolnya 1 per 1. Perhatikan perbedaan tampilan dari panelnya seperti apa. Anda harus bisa membedakan cara tampil dari panel-panel tersebut. Ada yang tampilnya secara overlay, ada juga yang tampil dengan reveal dan berbentuk push.

Berikut contoh tampilnya panel. Sekali lagi yang perlu diperhatikan adalah bagaimana cara tampilnya panel ya, bukan setelah tampilnya.

Panel Menu jQuery Mobile Tampil

Konten yang ada di dalam masing-masing bagian panel itu bisa diubah sesuai keperluan. Misalnya, ada yang meletakkan menu biasanya di panel kiri. Ada juga yang meletakkan formulir login di panel kanan. Demikian seterusnya sesuai keinginan.

Pengembangan Selanjutnya

Oke, supaya kelihatan benar-benar menjadi panel menu, kita buat menu beneran 😀 .

← Sebelumnya Selanjutnya →

Halaman : 1 2 3 4

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *