Ikon Tombol jQuery Mobile

Set ikon yang disediakan oleh jQuery Mobile dapat membuat tombol anda lebih menarik.

Menambah Ikon ke Tombol jQuery Mobile

Untuk menambah ikon ke tombol anda, gunakan properti data-icon:

<a href="#anylink" data-role="button" data-icon="search">Cari</a>

Petunjuk:Anda juga boleh menggunakan properti data-icon di elemen <button> atau <input>.

Di bawah ini, kami menyajikan beberapa ikon yang disediakan oleh jQuery Mobile:

Nilai Properti Deskripsi Ikon Contoh
data-icon="arrow-l" Tanduk Kiri Pengujian
data-icon="arrow-r" Tanduk Kanan Pengujian
data-icon="delete" Hapus Pengujian
data-icon="info" Informasi Pengujian
data-icon="home" Laman Utama Pengujian
data-icon="back" Kembali Pengujian
data-icon="search" Pencarian Pengujian
data-icon="grid" Grid Pengujian

Untuk informasi penuh tentang ikon tombol jQuery Mobile, silakan kunjungi Panduan Ikon jQuery Mobile.

Pengesanan Ikon

Anda juga boleh tentukan lokasi penempatan ikon: atas, kanan, bawah atau kiri.

Anda boleh gunakan properti data-iconpos untuk tentukan lokasi:

lokasi ikon:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Kiri</a>

Coba Sendiri

Petunjuk:Secara default, ikon dalam semua tombol ditempatkan di sebelah kiri.

Hanya Tampilkan Ikon

Jika hanya untuk menampilkan ikon, silakan atur data-iconpos menjadi "notext":

Kembali:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Cari</a>

Coba Sendiri