Tampilan Daftar jQuery Mobile

Tampilan Daftar jQuery Mobile

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

Untuk membuat daftar, tambahkan atribut data-role="listview" ke elemen <ol> atau <ul>. Untuk membuat item ini dapat di klik, tentukan tautan di setiap item daftar (<li>):

Contoh

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

Coba Sendiri

Untuk menambahkan rounding dan margin ke dalam daftar, gunakan atribut data-inset="true":

Contoh

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

Coba Sendiri

Petunjuk:Secara default, item di dalam daftar akan otomatis diubah menjadi tombol (tanpa data-role="button").

Pemisah Daftar

Pemisah Daftar (List Dividers) digunakan untuk mengatur dan menggabungkan item menjadi kategori/section.

Untuk menentukan pemisah daftar, tambahkan atribut data-role="list-divider" ke elemen <li>:

Contoh

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

Coba Sendiri

Jika daftar Anda berurutan abjad (seperti alamat), jQuery Mobile akan otomatis menambah pemisah yang sesuai, dengan mengatur atribut data-autodividers="true" di 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

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

Penyaring Pencarian

Untuk menambah kotak pencarian di dalam daftar, gunakan atribut data-filter="true":

Contoh

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

Coba Sendiri

Secara default, teks di kotak pencarian 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).