Tampilan Daftar jQuery Mobile

Tampilan Daftar jQuery Mobile

Tampilan senarai jQuery Mobile adalah senarai HTML standar: senarai terurut (<ol>) dan senarai tak terurut (<ul>).

Jika anda mahu membuat senarai, tambahkan atribut data-role="listview" ke dalam elemen <ol> atau <ul>. Jika anda mahu membuat item ini dapat d klik, tentukan pautan dalam setiap item dalam senarai (<li>):

Contoh

<ol data-role="listview">
  <li><a href="#">Item dalam senarai</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Item dalam senarai</a></li>
</ul>

Coba Sendiri

Jika anda mahu menambah rounded corner dan margin ke dalam senarai, guna atribut data-inset="true":

Contoh

<ul data-role="listview" data-inset="true">

Coba Sendiri

Petikan:Secara default, item dalam senarai akan diubah secara otomatis menjadi butang (tanpa perlu data-role="button").

Penanda pemisah dalam senarai

Penanda pemisah dalam senarai (List Dividers) digunakan untuk mengatur dan menggabungkan item menjadi kategori/section.

Jika anda mahu tentukan penanda pemisah dalam senarai, tambahkan atribut data-role="list-divider" ke dalam elemen <li>:

Contoh

<ul data-role="listview">
 <li data-role="list-divider">Eropah</li>
  <li><a href="#">Perancis</a></li>
  <li><a href="#">Jerman</a></li>
</ul>

Coba Sendiri

Jika senarai anda diurutkan abjad (contohnya, catatan alamat), jQuery Mobile akan menambah penanda pemisah yang sesuai secara otomatis dengan mengatur atribut data-autodividers="true" di atas elemen <ol> atau <ul>:

Contoh

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

Coba Sendiri

Petikan:Atribut data-autodividers="true" akan membuat penanda pemisah dengan mengubah huruf pertama teks item dalam senarai ke huruf besar.

Penapis carian

Jika anda mahu menambah kotak carian dalam senarai, guna atribut data-filter="true":

Contoh

<ul data-role="listview" data-filter="true"</ul>

Coba Sendiri

Secara default, teks dalam kotak carian adalah "Filter items..."。

Untuk mengubah teks baku, gunakan atribut data-filter-placeholder:

Contoh

<ul data-role="listview" data-filter="true" data-filter-placeholder="Cari Nama">

Coba Sendiri

Beberapa Contoh Lainnya

Daftar Bacaan
Bagaimana membuat daftar tanpa tautan (tidak tombol, tidak dapat di klik).