jQuery Mobile (07): Menampilkan Icon

| banghaji | 1 komentar | Tags: , , | Categories: jQuery Mobile, Tutorial, Web

Tulisan ini masih menggunakan contoh tulisan sebelumnya tentang cara membuat button. Dengan bahasan yang berbeda, yaitu bagaimana cara menampilkan icon menggunakan jQuery Mobile. Ada banyak sekali icon yang bisa digunakan, tetapi pada tulisan ini hanya beberapa contoh saja yang akan dicoba.

Tutorial ini dan contohnya didasarkan pada dokumentasi dari halaman resmi jQuery Mobile.

Menampilkan Icon

Menambahkan icon pada sebuah tombol harus didefiniskan pada class dari button yang akan diberi icon. Definisi jenis icon yang akan digunakan adalah yang ada pada dokumentasi icon jQuery Mobile. Secara umum definisi class untuk icon ini adalah ui-icon-namaicon. Misalnya untuk panah ke kanan, didefinisikan dengan ui-icon-arrow-r. Cara penulisannya secara lengkap untuk tombol dengan icon arah panah ke kanan: <a href="#" class="ui-btn ui-icon-arrow-r">Kanan</a>.

Posisi Icon

Icon biasanya digunakan bersamaan dengan posisi atau letak dari icon yang akan ditampilkan. Untuk mengatur posisi icon, perlu ditambahkan class ui-btn-icon-posisi dengan pilihan posisi left, right, bottom dan top. Contoh penulisannya ui-btn-icon-right.

Tombol dengan Icon tanpa Teks

Jika ingin menampilkan icon pada tombol tetapi tidak ingin menampilkan teksnya, perlu ditambahkan class ui-btn-icon-notext pada tombolnya. Dengan definisi tersebut maka teks tidak akan ditampilkan pada tombol.

Bentuk Tombol Bulat dengan Icon tanpa Teks

Bagian yang ini agak sulit untuk dijelaskan, tetapi Anda akan lihat hasilnya seperti apa. Untuk menerapkannya perlu ditambahkan class ui-corner-all. Definisi class ini akan membentuk sudut yang bulat pada tombol.

Warna Icon

Secara default warna background icon adalah abu-abu (grey) dan warna icon yang ditampilkan adalah putih. Jika ingin agar warna iconnya menjadi hitam perlu ditambahkan class ui-alt-icon pada setiap tombol.

Contoh icon dan posisi silahkan dicoba seperti kode di bawah ini, silahkan simpan dengan nama jqm_icon_posisi.html.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Menggunakan Icon</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <div data-role="page">
    <header data-role="header">
      <h1>Icon</h1>
    </header>
    <div data-role="content">
      <p>Tata letak icon</p>
      <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Kiri</a>
      <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-top">Atas</a>
      <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-bottom">Bawah</a>
      <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-right">Kanan</a>
    </div>
    <footer data-role="footer" data-position="fixed">
      <h2>banghaji dot com</h2>
    </footer>
  </div>

</body>
</html>

Contoh kode untuk button dengan icon tanpa teks dan bentuk bulat. Juga warna icon hitam. Silahkan ketik dan simpan dengan nama jqm_icon_notext.html.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Hanya Icon</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <div data-role="page">
    <header data-role="header">
      <h1>Icon NoText</h1>
    </header>
    <div data-role="content">
      <p>Button Group dengan Icon tanpa teks</p>
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">Kiri</a>
        <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-notext">Atas</a>
        <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-notext">Bawah</a>
        <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-notext">Kanan</a>
      </div>
      <p>Button bukan button dengan icon tanpa teks (class <b>ui-corner-all</b>)</p>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline ui-corner-all">Kiri</a>
        <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-notext ui-btn-inline ui-corner-all">Atas</a>
        <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-notext ui-btn-inline ui-corner-all">Bawah</a>
        <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline ui-corner-all">Kanan</a>
      <p>Button bukan button dengan icon tanpa teks (class <b>ui-corner-all</b>) warna hitam</p>
        <a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline ui-corner-all ui-alt-icon">Kiri</a>
        <a href="#" class="ui-btn ui-icon-arrow-u ui-btn-icon-notext ui-btn-inline ui-corner-all ui-alt-icon">Atas</a>
        <a href="#" class="ui-btn ui-icon-arrow-d ui-btn-icon-notext ui-btn-inline ui-corner-all ui-alt-icon">Bawah</a>
        <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline ui-corner-all ui-alt-icon">Kanan</a>
    </div>
    <footer data-role="footer" data-position="fixed">
      <h2>banghaji dot com</h2>
    </footer>
  </div>

</body>
</html>

Hasil tampilan dari kedua contoh kode di atas adalah seperti gambar berikut ini.

Contoh Icon jQuery Mobile

Untuk daftar lengkap icon jQuery Mobile, silahkan lihat pada halaman dokumentasi ini.

Selamat mencoba dan bereksplorasi lebih lanjut. Saya cukupkan untuk bahasan tentang cara menampilkan icon. Selanjutnya kita akan bahas tutorial web tentang toolbar. 😎

--[ share this post ]--

One thought on “jQuery Mobile (07): Menampilkan Icon

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *