tombol ikon jQuery Mobile

jQuery Mobile menyediakan satu set tombol mari kita melihat ikon lebih diinginkan.

Tombol untuk menambahkan ikon untuk jQuery Mobile

Kita dapat menggunakan class ui-icon untuk menambahkan ikon ke tombol, dan tombol dapat diatur menggunakan kelas tertentu.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Catatan: Pada tombol cara lain, seperti daftar atau bentuk tombol memanfaatkan data-icon atribut. Pada bagian berikutnya kita akan memperkenalkan tertentu.

Di bawah ini daftar beberapa ikon yang tersedia jQuery Mobile menyediakan:

kelas tombol	deskripsi	contoh
ui-icon panah-l	Left Arrow	mencoba
ui-icon panah-r	panah kanan	mencoba
ui-icon-info	informasi	mencoba
ui-icon-menghapus	Hapus	mencoba
ui-icon-kembali	mundur	mencoba
ui-icon-audio yang	pembicara	mencoba
ui-icon-lock	gembok	mencoba
ui-icon-search	pencarian	mencoba
ui-icon-peringatan	peringatan	mencoba
ui-icon-grid	bertautan	mencoba
ui-icon-rumah	rumah	mencoba

Untuk referensi manual yang lengkap untuk semua ikon tombol jQuery Mobile, kunjungi ikon Referensi jQuery Mobile .

lokasi icon

Anda juga dapat menentukan ikon strategis di tombol posisi apa: bagian atas (top), sisi kanan (kanan), di bagian bawah (bottom), kiri (kiri).

Silakan gunakan-icon ui-btn atribut untuk menentukan lokasi:

Icon Lokasi:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top"> atas </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right"> sisi kanan </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> bawah </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> kiri sisi </a>

Coba »

	Jika Anda tidak menentukan lokasi gambar tombol, ikon tidak akan ditampilkan.

Hanya menampilkan icon

Jika Anda ingin menampilkan ikon, Anda dapat menggunakan "notext":

contoh:

Coba »

Hapus lingkaran

Secara default, semua ikon memiliki lingkaran abu-abu. Jika Anda tidak membutuhkannya, Anda dapat menggunakan elemen "ui-nodisc-icon" Kategori:

contoh

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> penggunaan lingkaran (default) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> menghapus lingkaran </a>

Coba »

Hitam, tombol putih

Secara default, semua ikon berwarna putih. Jika Anda perlu mengubah ikon warna hitam, Anda dapat menambahkan "ui-alt-icon" dalam elemen:

contoh

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> </a> putih
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> Hitam </a>

Coba »