Tutorial jQuery Mobile Part 5: Icon

Tombol Icon jQuery Mobile

Pada bagian ini saya akan menyampaikan materi tentang bagaimana membuat icon dalam tombol pada jQuery Mobile. jQuery Mobile menyediakan satu set icon atau library tombol yang kita buat terlihat lebih menarik. Icon yang kita gunakan pada tombol disesuaikan dengan fungsi tombol itu sendiri. Selanjutnya adalah menmbahkan Icon untuk Tombol jQuery Mobile.

Menambahkan Icon untuk Tombol jQuery Mobile

Untuk menambahkan icon untuk tombol Anda caranya cukup mudah kita hanya menggunakan class ui-icon, dan kita bisa mengatur posisi ikon dengan kelas posisi ikon (ui-btn-icon-pos):

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

Catatan: Untuk tombol yang lain, seperti tombol dalam list view dan form, Anda harus menggunakan atribute data-icon. Ini akan dijelaskan pada bagian berikutnya. Di bawah ini saya telah mendaftarkan beberapa ikon yang tersedia pada jQuery Mobile:

Class	Deskripsi	Ikon	Code
ui-icon-arrow-l	Panah Kiri	Tombol Kiri	<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Tombol Kiri</a>
ui-icon-arrow-r	Panah Kanan	Tombol Kanan	<a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Tombol Kanan</a>
ui-icon-info	Informasi	Tombol Informasi	<a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">Tombol Informasi</a>
ui-icon-delete	Hapus	Tombol Grid	<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Tombol Grid</a>
ui-icon-back	Kembali	Tombol Kembali	<a href="#" class="ui-btn ui-icon-back ui-btn-icon-left">Tombol Kembali</a>
ui-icon-audio	Audio	Tombol Audio	<a href="#" class="ui-btn ui-icon-audio ui-btn-icon-left">Tombol Audio</a>
ui-icon-lock	Kunci	Tombol Lock	<a href="#" class="ui-btn ui-icon-lock ui-btn-icon-left">Tombol Lock</a>
ui-icon-search	Cari	Tombol Cari	<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Tombol Cari</a>
ui-icon-alert	Pengingat	Tombol Pengingat	<a href="#" class="ui-btn ui-icon-alert ui-btn-icon-left">Tombol Pengingat</a>
ui-icon-grid	Grid	Tombol Grid	<a href="#" class="ui-btn ui-icon-grid ui-btn-icon-left">Tombol Grid</a>
ui-icon-home	Home	Tombol Home	<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Tombol Home</a>

Referensi lengkap untuk seluruh ikon jQuery Mobile dapat diakses pada:
Referensi JQuey Mobile Part 4: Ikon pada JQuery Mobile

Setelah mempelajari icon, tutorial selanjutnya:

• Tutorial JQuery Mobile Part 6: Popup