Isi Daftar jQuery Mobile

Thumbnail Daftar jQuery Mobile

Untuk gambar yang lebih besar dari 16x16px, tambahkan elemen <img> di dalam tautan.

jQuery Mobile akan otomatis mengatur gambar ke 80x80px:

Contoh

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Coba Sendiri

Gunakan HTML standar untuk mengisi daftar yang berisi informasi:

Contoh

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome peramban web open source yang gratis. Dipublikasikan pada tahun 2008.</p>
    </a>
  </li>
</ul>

Coba Sendiri

Ikon Daftar jQuery Mobile

Untuk menambahkan ikon ukuran 16x16px ke daftar Anda, tambahkan atribut class="ui-li-icon" ke elemen <img>.

Contoh

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

Coba Sendiri

Tombol Pemisah

Untuk membuat daftar yang dibagi dengan panel vertikal, letakkan dua tautan di dalam elemen <li>.

jQuery Mobile akan otomatis menambahkan gaya ikon panah biru untuk tautan kedua, teks di dalam tautan (jika ada) akan muncul saat pengguna melilit ikon ini:

Contoh

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Teks Beberapa</a>
  </li>
</ul>

Coba Sendiri

Dengan menambahkan halaman dan dialog, fungsi tautan dapat diperkuat:

Contoh

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Unduh Peramban</a>
  </li>
</ul>

Coba Sendiri

Buble hitung

Buble hitung digunakan untuk menampilkan jumlah yang berhubungan dengan item daftar, seperti pesan di email:

Untuk menambahkan buble hitung, gunakan elemen dalam baris, seperti <span>, atur atribut class "ui-li-count" dan tambahkan angka:

Contoh

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Coba Sendiri

Keterangan：Untuk menampilkan angka yang benar di泡泡计数器中，必须进行程序化更新。我们将在下一章中讲解。

Contoh Lainnya

Ubah ikon tautan standar item daftar
Bagaimana mengatur ikon tautan yang berbeda untuk item daftar (panah kanan adalah standar).
Daftar Kolapsibel
Bagaimana membuat daftar yang menyembunyikan dan menampilkan konten.
Format Konten Lainnya
Bagaimana membuat kalender.