jQuery Mobile Daftar Ikon
Ikon default untuk setiap item daftar yang berisi link adalah "carat-r" (panah kanan). Untuk mengubah ini untuk ikon lain, menggunakan data-icon atribut pada daftar item yang ingin memodifikasi:
Contoh
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Cobalah sendiri " data-icon="false" akan menghapus ikon.
Untuk referensi lengkap semua tombol ikon jQuery Mobile, silakan kunjungi kami jQuery Mobile Icons Referensi .
16x16 Ikon
Untuk menambahkan ikon 16x16px standar untuk daftar Anda, tambahkan <img> elemen dalam link dengan kelas "ui-li-icon":
Contoh
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Cobalah sendiri " jQuery Mobile Daftar Thumbnail
Untuk gambar yang lebih besar dari 16x16px, menambahkan <img> elemen dalam daftar item sebagai elemen anak pertama (tanpa nama kelas).
jQuery Mobile secara otomatis akan skala gambar ke 80x80px :
Contoh
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Cobalah sendiri " Gunakan HTML standar untuk mengisi daftar dengan informasi:
Contoh
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Cobalah sendiri " Tombol Berpisah
Untuk membuat daftar perpecahan dengan pembagi vertikal, menempatkan dua link di dalam <li> elemen.
jQuery Mobile secara otomatis akan menempatkan link kedua di sisi kanan dari daftar dengan tepat arrow-icon . Dan teks di dalam link (jika ada) akan ditampilkan saat pengguna hover atas ikon:
Contoh
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Cobalah sendiri " Mari menambahkan beberapa halaman dan dialog untuk membuat link lebih fungsional:
Contoh
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Cobalah sendiri " menghitung Bubbles
gelembung count digunakan untuk menampilkan nomor yang terkait dengan daftar item, seperti pesan di kotak pesan:
Untuk menambahkan gelembung count, menggunakan elemen inline, seperti <span> , dengan kelas "ui-li-count" dan menambahkan nomor:
Contoh
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Cobalah sendiri " Catatan: Untuk menampilkan nomor yang benar dalam gelembung hitungan, itu harus diperbarui pemrograman. Ini akan dijelaskan pada bab berikutnya.
Contoh lebih
daftar popup
Cara membuat daftar popup.
daftar dilipat
Cara membuat daftar yang menyembunyikan dan menampilkan konten.
Daftar popup dilipat
Cara membuat daftar popup dilipat.
Lebar penuh daftar dilipat
Menggunakan data-inset="false" atribut pada "collapsibles/collapsible set" untuk mengaktifkan lebar ListView penuh.
Format konten yang lebih
Cara membuat kalender.