Senin, Desember 17, 2018

jQuery Mobile (12): Menampilkan List View dalam Sebuah Popup Window

jQuery Mobile Tutorial Web

Pada tulisan tersebut, untuk menampilkan listview digunakan atribut data-role="listview" dan data-inset="true" kemudian diikuti di bawahnya dengan daftar yang akan ditampilkan. Cara menampilkan daftarnya adalah dengan menggunakan Unordered List, lihat tagnya adalah ul.

Pelajari apa itu Unordered List di sini:

Belajar HTML (11): Membuat Daftar Tidak Berurutan

Kita lanjutkan. Silakan ketik kode berikut di dalam <div data-role="popup" id="myPopup"> dan </div> sehingga kodenya jadi begini:

<div data-role="popup" id="myPopup">
  <ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Web Framework</li>
    <li><a href="#">CodeIgniter</a></li>
    <li>Laravel</li>
    <li><a href="#">Yii</a></li>
    <li data-role="list-divider">CSS Framework</li>
    <li><a href="#">Twitter Bootstrap</a></li>
    <li><a href="#">Material Design</a></li>
    <li data-role="list-divider">Database</li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">PostgreSQL</a></li>
    <li>Oracle</a></li>
  </ul>
</div>

Silakan simpan file ini. Kode lengkapnya adalah seperti berikut ini.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Popup + ListView</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>

  <!-- definisi halaman 1 -->
  <div data-role="page" id="halaman1">
    <header data-role="header">
      <h1>Popup + ListView</h1>
    </header>
    <div data-role="content">
      <p>Latihan jQuery Mobile menampilkan popup berisi daftar pilihan dalam bentuk listview. Coba klik link di bawah.</p>
      <p><a href="#myPopup" data-rel="popup">Buka Popup</a></p>
    </div>

    <!-- isi popup yang akan ditampilkan -->
    <div data-role="popup" id="myPopup">
      <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Web Framework</li>
        <li><a href="#">CodeIgniter</a></li>
        <li>Laravel</li>
        <li><a href="#">Yii</a></li>
        <li data-role="list-divider">CSS Framework</li>
        <li><a href="#">Twitter Bootstrap</a></li>
        <li><a href="#">Material Design</a></li>
        <li data-role="list-divider">Database</li>
        <li><a href="#">MySQL</a></li>
        <li><a href="#">PostgreSQL</a></li>
        <li>Oracle</a></li>
      </ul>
    </div>
    <!-- sampai di sini isi popup -->

    <footer data-role="footer" data-position="fixed">
      <h2>BangHaji DotCom</h2>
    </footer>
  </div>

</body>
</html>

Sudah selesai? Iya, silakan dicoba dijalankan. Hasilnya begini.

← Sebelumnya Selanjutnya →

Halaman : 1 2 3

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

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