Cara Menampilkan gambar di Select Option dengan jQueryui -

Cara menampilkan gambar atau icon di select option, jadi ketika kita menggunakan select kita juga bisa menampilkan juga gambar atau icon tersebut, jadi dengan ini kita bisa menambahkan sesuatu bisa menambah kecantikan tampilan select kita, bagaimana apakah penasaran, jika iya simak terus ya teman-teman.

Select option sendiri berfungsi untuk memilih data-data yang ada tergolong kategori, misal kategori makanan, kita bisa menggunakan select option ini, jadi kita tampilka kategori apa saja yang ada di makanan itu, dan biasanya kita lihat juga pada sebuah form membuat user baru bisa di facebook atau di akun lain manapun, pasti kita disuruh memasukan sebuah tanggal yang di tampilkan pada select option, dan alangkah bagusnya kita juga bisa memberikan gambar atau icon select option tersebut. Oke langsung saja untuk Cara menampilkan gambar atau icon di select option ini saya menggunakan jqueryui seperti ini:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
 
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
 
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });
 
    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );
 
    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );
 
    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  } );
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0;
    }
    fieldset {
      border: 0;
    }
    label {
      display: block;
    }
 
    /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url("k.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("pdf.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("note.png") 0 0 no-repeat;
    }
 
    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }
  </style>
</head>
<body>
 
<div class="demo">
 
<form action="#">
  <h2>Bisa Menggunakan Icon</h2>
  <fieldset>
    <label for="filesA">Select a File:</label>
    <select name="filesA" id="filesA">
      <option value="jquery" data-class="ui-icon-script">jQuery.js</option>
      <option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
      <option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
      <option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
      <option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
    </select>
  </fieldset>
 
  <h2>Dengan background gambar di CSS</h2>
  <fieldset>
    <label for="filesB">Select a podcast:</label>
    <select name="filesB" id="filesB">
      <option value="mypodcast" data-class="podcast">PDF</option>
      <option value="myvideo" data-class="video">Kaaa</option>
      <option value="myrss" data-class="rss">Note</option>
    </select>
  </fieldset>
 
  <h2>dengan background gambar</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">ini eno</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Hernowowo</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">eno neo</option>
    </select>
  </fieldset>
</form>
 
</div>
 
 
</body>
</html>

Langsung saja teman-teman copy ya, dan disini saya menggunakan 3 tampilan yang pertama menggunakan icon bawaan jqueryui, data class dimana background ada pada css, dan yang ketiga kita menggunakan data-style hampir sama kita tampilkan dengan background css, oke bagaimana hasilnya seperti ini:

Cantik bukan, oke saya rasa cukup sampai disini belajar kita tentang cara menampilkan gambar atau icon di select option, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Menampilkan gambar di Select Option dengan jQueryui

Kategori