jQuery Mobile (10): Membuat Daftar Menggunakan List View

Tambahkan Count

Biasanya pada kategori blog ada keterangan jumlah posting disetiap kategori. Konsep ini mari kita coba terapkan menyambung contoh sebelumnya. Untuk membuat tampilannya digunakan class dari jQuery Mobile yaitu ui-li-count. Penerapan contohnya kira-kira seperti iniĀ <span class="ui-li-count">51</span>.

Silakan save-as latihan tadi, simpan dengan nama file jqm_listview_link_count.html, kemudian ubah kodenya sehingga menjadi seperti berikut.

<html>
<head>
   <title>Membuat List View Menggunakan Link dan Count</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>List View</h1>
   </header>
 
   <div data-role="content">
      <p>Kategori Tulisan BangHaji DotCom dilengkapi dengan link dan count, perhatikan lagi bedanya dengan latihan sebelumnya ^_^</p>
      <ul data-role="listview" data-inset="true">
         <li><a href="https://www.banghaji.com/category/adminer/">Adminer<span class="ui-li-count">23</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Android Studio<span class="ui-li-count">16</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">CSS<span class="ui-li-count">7</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">HTML<span class="ui-li-count">33</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Tutorial<span class="ui-li-count">51</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Database<span class="ui-li-count">17</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Domain & Hosting<span class="ui-li-count">6</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">jQuery Mobile<span class="ui-li-count">10</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Kode Praktis<span class="ui-li-count">5</span></a></li>
         <li><a href="https://www.banghaji.com/category/adminer/">Video<span class="ui-li-count">2</span></a></li>
      </ul>
   </div>
   <footer data-role="footer" data-position="fixed">
      <h2>BangHaji DotCom</h2>
   </footer>
</div>
</body>
</html>

Jalankan dan perhatikan perbedaannya dengan latihan-latihan sebelumnya.

List View jQuery Mobile With Link And Count

Ayo dikembangkan lagi, buat beberapa daftar lain menggunakan List View. Jangan lupa baca juga Seri Belajar jQuery Mobile. Sampai jumpa di tutorial lainnya.

← Sebelumnya

Halaman : 1 2 3

Share

Muhammad Erfan

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

You may also like...

2 Responses

  1. 25 November 2018

    […] jQuery Mobile (10): Membuat Daftar Menggunakan List View […]

  2. 22 Desember 2018

    […] kembali dengan pembahasan tentang jQuery Mobile. Terakhir kita bicara bagaimana cara membuat daftar menggunakan ListView. Sekarang kita coba latihan tentang […]

Tinggalkan Balasan

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