Konten Daftar jQuery Mobile

Gambar mini daftar jQuery Mobile

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

jQuery Mobile akan otomatis menyesuaikan gambar hingga 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>Pelayar web berlisensi bebas Google Chrome. 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 memecah

Untuk membuat daftar yang dibagi dengan batang 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 menggerakkan ikon:

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 menjadi lebih kuat:

Contoh

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

Coba Sendiri

Kelembutan angka

Kelembutan angka digunakan untuk menampilkan jumlah yang berhubungan dengan item dalam daftar, seperti pesan di email:

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

Contoh

<ul data-role="listview">
  <li><a href="#">Penerimaan<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Hantar<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Tongkang<span class="ui-li-count">7</span></a></li>
</ul>

Coba Sendiri

Keterangan:Untuk menampilkan angka yang benar di buble hitung, perbaruan program harus dilakukan. Kita akan menjelaskan di bab berikutnya.

Contoh Lebih Banyak

Ubah ikon tautan bawaan item daftar
Bagaimana menetapkan ikon tautan yang berbeda untuk item daftar (panah kanan adalah standar).
Daftar Dikembangkan
Bagaimana membuat daftar tersembunyi dan terlihat konten.
Format Konten Lebih Banyak
Bagaimana membuat kalender.