Halo teman – teman berjumpa kembali dengan saya Hernowo, di tutorial Dumet School. Pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menambahkan dan Mengenal Macam – macam Icon Jquery Mobile. Seperti hal nya kita memberikan icon pada bootstrap dan cara pemakaiannya pun juga sama, kita tinggal copy saja nama nya dan di sisipkan di dalam tag html yang akan kita berikan icon. Nah inilah beberapa macam – macam icon yang akan kita bahas, di bawah ini nama – nama iconnya dan jenis tampilannya
- ui-icon-arrow-l = Left Arrow
- ui-icon-arrow-r = Panah kanan
- ui-icon-info = Informasi
- ui-icon-delete = Menghapus
- ui-icon-back = Kembali
- ui-icon-audio = pembicara
- ui-icon-lock = Gembok
- ui-icon-search = Pencarian
- ui-icon-alert = Waspada
- ui-icon-grid = kisi
- ui-icon-home = Rumah
Baik, sekarang kita akan coba praktekkan Cara Menambahkan dan Mengenal Macam – macam Icon Jquery Mobile. Seperti biasa teman – teman siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html> <html> <head> </head> <body><br> </body> </html>
Save terlebih dahulu dengan nama index.html, kemudian kita install terlebih dahulu Jquery Mobile nya atau kita panggil library Jquery Mobile nya di dalam tag <head>
<meta name="viewport" content="width=device-width, initial-scale=1"><br> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><br> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><br> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Langkah berikutnya tinggal kita buat data-role=”page”
Teman – teman ikuti seperti gambar di atas ini ya, berikutnya tinggal kita panggil class icon nya
Bisa kalian lihat pada gambar di atas ini, cara pemanggilannya pun sama dengan pemanggilan icon pada bootstrap. Kemudian disampingnya saya berikan ui–btn-icon-left agar icon berada di posisi left atau posisi pinggir paling kiri. Coba teman – teman save dan jalankan pada browser nya maka akan tampil seperti gambar di bawah ini
Bagaimana..?? Mudah sekali bukan..??
Teman – teman juga bisa mengganti icon yang lainnya sesuai nama class yang diatas tadi sudah saya berikan list nya dan tampilan icon nya, untuk lebih lebih lengkapnya teman – teman langsung cek cara di website resminya Jquery Mobile
Dan bisa juga kunjungi di link ini, untuk refrensi teman – teman yang saat ini sedang belajar Jquery Mobile atau membuat tampilan website khusus mobile. Baik, sekian pada artikel kali ini tentang Cara Menambahkan dan Mengenal Macam – macam Icon Jquery Mobile kita berjumpa kembali di artikel yang akan datang.
Terima Kasih dan Sampai Jumpa.
Semoga Bermanfaat 🙂