jQuery Mobile menyediakan satu set ikon yang akan membuat tombol Anda terlihat lebih diinginkan.
Menambahkan Ikon untuk jQuery Mobile Buttons
Untuk menambahkan ikon untuk tombol Anda, gunakan ui-icon kelas, dan posisi ikon dengan kelas icon posisi (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Catatan: Untuk tombol lain, seperti tombol dalam pandangan daftar dan bentuk, Anda harus menggunakan data atribut-ikon. Ini akan dijelaskan pada bab berikutnya.
Di bawah ini kami telah mendaftarkan beberapa ikon yang tersedia yang jQuery Mobile menyediakan:
| kelas icon | Deskripsi | icon | Contoh |
|---|---|---|---|
| ui-icon-arrow-l | Left Arrow | Cobalah | |
| ui-icon-arrow-r | Panah kanan | Cobalah | |
| ui-icon-info | Informasi | Cobalah | |
| ui-icon-delete | Menghapus | Cobalah | |
| ui-icon-back | Kembali | Cobalah | |
| ui-icon-audio | pembicara | Cobalah | |
| ui-icon-lock | Gembok | Cobalah | |
| ui-icon-search | Pencarian | Cobalah | |
| ui-icon-alert | Waspada | Cobalah | |
| ui-icon-grid | kisi | Cobalah | |
| ui-icon-home | Rumah | Cobalah |
Untuk referensi lengkap semua tombol ikon jQuery Mobile, silakan kunjungi kami jQuery Mobile Icons Referensi .
positioning Ikon
Anda dapat menentukan salah satu dari empat nilai untuk di mana ikon harus diposisikan di tombol: top, right, bottom atau left .
Gunakan ui-btn-icon kelas untuk menentukan posisi:
Posisi Icon untuk Buttons Tautan
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Cobalah sendiri " Jika Anda tidak menentukan posisi ikon untuk tombol link, ikon tidak akan ditampilkan.
Menampilkan Hanya Icon
Untuk hanya menampilkan ikon, menggunakan "notext" sebagai nilai untuk posisi ikon:
Contoh
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Cobalah sendiri " Menghapus Circle
Secara default, semua ikon memiliki lingkaran abu-abu (disc) di sekitar mereka. Untuk menghapus lingkaran, tambahkan "ui-nodisc-icon" kelas untuk elemen atau wadah:
Contoh
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Cobalah sendiri " Hitam atau Putih Ikon
Secara default, semua ikon berwarna putih. Untuk mengubah ikon warna hitam, tambahkan "ui-alt-icon" untuk elemen atau wadah:
Contoh
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Cobalah sendiri " Contoh lebih
Tambahkan "ui-nodisc-icon" kelas untuk wadah
Sebuah contoh dari "ui-nodisc-icon" kelas ditambahkan ke sebuah wadah.
Tambahkan "ui-alt-icon" kelas untuk wadah
Sebuah contoh dari "ui-alt-icon" kelas ditambahkan ke sebuah wadah.