jQuery Mobile daftar isi
icon jQuery Mobile Daftar
Secara default, setiap item daftar akan berisi panah icon "karat-r" (panah kanan). Jika Anda ingin mengubah ikon ini dapat menggunakan data atribut-icon:
contoh
<Li> <a href="#"> default adalah panah kanan </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 = "menghapus"> <a href="#"> Data-icon = "menghapus" </a> </ li>
<Li Data-icon = "lokasi"> <a href="#"> Data-icon = "lokasi" </a> </ li>
<Li Data-icon = "false"> <a href="#"> Data-icon = "false" </a> </ li>
</ Ul>
Coba »
 | Data-icon = "false" akan menghapus ikon. |
|---|
Sebuah tombol jQuery Mobile ikon yang lebih lengkap, silahkan kunjungi kami icon Referensi jQuery Mobile .
icon 16x16
Jika Anda ingin menambahkan ke daftar ikon kriteria 16x16px, Anda dapat menambahkan <img> elemen dalam daftar item dan menggunakan "ui-li-icon" Kategori:
contoh
<Li> <a href="#"> <img src = "us.png" alt = "USA" class = "ui-li-icon"> Amerika </a> </ li>
</ Ul>
Coba »
jQuery Mobile daftar thumbnail
Gambar yang lebih besar dari 16x16px, tambahkan <img> di link.
jQuery Mobile secara otomatis akan mengukur citra agar 80x80px:
Gunakan HTML standar untuk menambahkan daftar informasi:
contoh
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
Coba »
icon jQuery Mobile Daftar
Dalam daftar <img> elemen menggunakan class = "ui-li-icon" Add 16x16px icon:
tombol perpecahan
JQuery Ponsel dalam daftar, kadang-kadang diperlukan untuk membuat dua pilihan yang berbeda untuk isi operasi, maka, kebutuhan untuk opsi menghubungkan tombol segmentasi. Metode segmentasi adalah untuk mencapai <li> elemen untuk menambahkan elemen <a>, dapat mencapai efek membagi halaman.
jQuery Mobile secara otomatis akan mengatur link kedua blue arrow icon, ikon ditampilkan ketika link teks (jika ada) di pengguna melayang di atas ikon:
contoh
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Coba »
Tambahkan beberapa halaman dan kotak dialog untuk membuat link lebih kaya fitur:
contoh
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
Coba »
gelembung Digital
nomor gelembung digunakan untuk menampilkan nomor yang terkait daftar item, seperti kotak surat:
Untuk menambahkan nomor bubble, menggunakan elemen inline seperti <span>, mengatur kelas "ui-li-count" atribut dan menambahkan nomor:
contoh
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>
Coba »
Catatan: Tampilan yang benar dari gelembung digital, Anda harus memodifikasi pemrograman. Ini akan dijelaskan di bab berikutnya.
contoh yang lebih
daftar pop
Cara membuat daftar pop
Mengubah default tautan ikon daftar item
Cara mengatur ikon tautan bawaan daftar item (bawaan panah kanan).
daftar pop dilipat
Cara membuat daftar dilipat pop.
Daftar dilipat
Cara membuat daftar show / hide.
format yang lebih
Cara membuat kalender.