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:

Icon	Code
Tombol Kiri	<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Tombol Kiri</a>
Tombol Kanan	<a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-left">Tombol Kanan</a>
Tombol Informasi	<a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">Tombol Informasi</a>
Tombol Grid	<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Tombol Grid</a>
Tombol Kembali	<a href="#" class="ui-btn ui-icon-back ui-btn-icon-left">Tombol Kembali</a>
Tombol Audio	<a href="#" class="ui-btn ui-icon-audio ui-btn-icon-left">Tombol Audio</a>
Tombol Lock	<a href="#" class="ui-btn ui-icon-lock ui-btn-icon-left">Tombol Lock</a>
Tombol Cari	<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Tombol Cari</a>
Tombol Pengingat	<a href="#" class="ui-btn ui-icon-alert ui-btn-icon-left">Tombol Pengingat</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

Tutorial jQuery Mobile Part 5: Icon 2017-03-17T17:26:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown