jQuery Mobile (16): Membuat Panel Menu

Anda harusnya masih ingat bahwa kita pernah membahas tentang bagaimana membuat daftar menggunakan listview. Nah, contoh tersebut bisa kita masukkan ke dalam panel agar benar-benar mirip menu πŸ˜† . Kita mulai ya pengembangannya.

Silakan save-as dulu file yang tadi menjadi jqm_panel_menu_beneran.html. Nama filenya agak gimana ya 😎 πŸ˜† . Ya sudah, kita lanjut dulu. Ubah atau ganti kode pada 3 bagian panel tadi menjadi seperti ini. Untuk yang listview saya ambil dari tulisan cara membuat daftar menggunakan litsview ya, ditambah bagian atasnya dengan tombol untuk menutup dan menyembunyikan panel.

<div data-role="panel" data-position="left" data-display="overlay" data-theme="b" id="panel-overlay">
  <ul data-role="listview" data-inset="false">
    <li data-icon="delete"><a href="#" data-rel="close">Tutup</a></li>
    <li data-role="list-divider">Menu Utama</li>
    <li><a href="https://www.banghaji.com/category/adminer/">Adminer</a></li>
    <li><a href="https://www.banghaji.com/category/android-studio/">Android Studio</a></li>
    <li><a href="https://www.banghaji.com/category/css/">CSS</a></li>
    <li><a href="https://www.banghaji.com/category/html/">HTML</a></li>
    <li><a href="https://www.banghaji.com/category/tutorial/">Tutorial</a></li>
    <li><a href="https://www.banghaji.com/category/database/">Database</a></li>
    <li><a href="https://www.banghaji.com/category/domain-hosting/">Domain & Hosting</a></li>
    <li><a href="https://www.banghaji.com/category/jquery-mobile/">jQuery Mobile</a></li>
    <li><a href="https://www.banghaji.com/category/kode-praktis/">Kode Praktis</a></li>
    <li><a href="https://www.banghaji.com/category/video/">Video</a></li>
  </ul>	
</div>

<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="panel-reveal">
  <form class="userform">

    <h2>Login</h2>
    <label for="name">Akun:</label>
    <input type="text" name="name" data-clear-btn="true" data-mini="true">

    <label for="password">Sandi:</label>
    <input type="password" name="password" data-clear-btn="true" autocomplete="off" data-mini="true">

    <div class="ui-grid-a">
      <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Batal</a></div>
      <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Login</a></div>
    </div>
  </form>
</div>

<div data-role="panel" data-position="right" data-display="push" data-theme="a" id="panel-push">
  <ul data-role="listview" data-icon="false">
    <li data-icon="delete"><a href="#" data-rel="close">Tutup</a></li>
    <li data-role="list-divider">Share sekarang!</li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Google +</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</div>

Perhatikan dan pelajari kode-kode di atas.

Sebelum dicoba, ubah dulu teks yang ada di masing-masing tombol secara berurutan menjadi Menu, Login dan Share. Baiklah sekarang silakan dicoba jalankan dan klik dulu tombolnya tadi kemudian lihat hasilnya. Keren ga? πŸ˜‰

Gambarnya di halaman sebelah, oke 😎

← 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 *