Senin, Januari 21, 2019

jQuery Mobile (13): Membuat Accordion Menggunakan Collapsible dan List View

jQuery Mobile Tutorial Web

Berjumpa lagi dalam tulisan tentang jQuery Mobile ya. Sesuai dengan judulnya, kita bahas gabungan tentang Collapsible dan List View yang ditampilkan dalam bentuk Pop Up dan beranimasi seperti accordion. Bingung kan? Sama, saya juga 😆

Karena ini merupakan gabungan pembahasan, Anda perlu membaca ulang beberapa tulisan saya sebelumnya:

Selanjutnya kita bahas langsung saja contoh kodenya seperti apa. Langsung saja lakukan save-as dari file latihan sebelumnya, beri nama file jqm_popup_listview_collapsible.html, kemudian sesuaikan isi kodenya menjadi seperti ini:

<html>
<head>
  <title>PopUp + ListView + Collapsible</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>

<div data-role="page">
  <header data-role="header" data-position="fixed">
    <h1>Accordion Pop Up + List View</h1>
  </header>

  <div data-role="content" class="ui-content">
    <p>Menampilkan Collapsible List View dalam Accordion pada Pop Up</p>
    <a href="#bukalistpop" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all ui-icon-gear ui-btn-icon-left">Kategori Artikel</a>

    <div data-role="popup" id="bukalistpop" class="ui-content">
      <div data-role="collapsible-set" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
        <div data-role="collapsible">
          <h4>Tutorial Web</h4>
          <ul data-role="listview">
            <li><a href="#">HTML + CSS</a></li>
            <li><a href="#">PHP + MySQL</a></li>
            <li><a href="#">OOP + PDO</a></li>
          </ul>
        </div>

        <div data-role="collapsible">
          <h4>Tutorial Mobile</h4>
          <ul data-role="listview">
            <li><a href="#">J2ME</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">Kotlin</a></li>
            <li><a href="#">Flutter</a></li>
          </ul>
        </div>

        <div data-role="collapsible">
          <h4>Tutorial Desktop</h4>
          <ul data-role="listview">
            <li><a href="#">Visual Studio</a></li>
            <li><a href="#">Delphi</a></li>
          </ul>
        </div>

      </div>
    </div>
  </div>

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

</body>
</html>

Selanjutnya adalah mencoba dijalankan atau diakses file tersebut. Bagaimana hasil tampilannya? Punya saya seperti ini:

Selanjutnya →

Halaman : 1 2

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

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