bala.IconPicker

A simple jQuery Icon Picker plugin.

View the Project on GitHub balachuang/IconPicker

Quick Demo & Code Sample


<script>
$(document).ready(function(){
  $('#lp1').IconPicker({
    'iconSize' : 30,
    'currSelection' : 0,
    'containerPosition' : 'right-bottom',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp1').text('Current Icon ID = ' + imgIdx + ' ;  Current Icon URL = ' + imgUrl);
    }
  });
  $('#lp2').IconPicker({
    'iconSize' : 30,
    'hasNullIcon' : false,
    'currSelection' : 0,
    'containerPosition' : 'right-middle',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp2').text('Current Icon ID = ' + imgIdx + ' ;  Current Icon URL = ' + imgUrl);
    }
  });
  $('#lp3').IconPicker({
    'iconSize' : 30,
    'hasNullIcon' : true,
    'currSelection' : 0,
    'containerPosition' : 'right-top',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp3 img').attr('src', imgUrl);
    }
  });
  $('#rp1').IconPicker({
    'iconSize' : 30,
    'currSelection' : 0,
    'containerPosition' : 'left-bottom',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp1').text('Current Icon ID = ' + imgIdx + ' ;  Current Icon URL = ' + imgUrl);
    }
  });
  $('#rp2').IconPicker({
    'iconSize' : 30,
    'hasNullIcon' : false,
    'currSelection' : 0,
    'containerPosition' : 'left-middle',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp2').text('Current Icon ID = ' + imgIdx + ' ;  Current Icon URL = ' + imgUrl);
    }
  });
  $('#rp3').IconPicker({
    'iconSize' : 30,
    'hasNullIcon' : true,
    'currSelection' : 0,
    'containerPosition' : 'left-top',
    'onDisplayIconChange' : function(imgIdx, imgUrl){
      $('#disp3 img').attr('src', imgUrl);
    }
  });
});
</script>

<body>
<table width="100%">
  <tr>
    <td style="width:50px; text-align:left;">
      <div class="myPicker" id="lp1" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Finder-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Mail-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Messages-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Chrome-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Firefox-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Timemachine-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Skype-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Twitter-icon.png">
      </div>
    </td>
    <td>
      <div id="disp1" />
    </td>
    <td style="width:50px; text-align:right;">
      <div class="myPicker" id="rp1" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Finder-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Mail-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Messages-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Chrome-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Firefox-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Apple-Timemachine-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Skype-icon.png">
        <img src="http://icons.iconarchive.com/icons/ampeross/smooth/128/Twitter-icon.png">
      </div>
    </td>
  </tr>
  <tr>
    <td style="width:50px; text-align:left;">
      <div class="myPicker" id="lp2" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/artdesigner/urban-stories/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/oldies/128/Old-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshock/super-vista-general/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/128/blue-home-icon.png">
        <img src="http://icons.iconarchive.com/icons/ergosign/free-wintertime/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/firstfear/whistlepuff/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/christmas/128/Little-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshock/vista-general/128/house-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/collection/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshow/construction/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/christmas/128/Candy-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/joker-design/circus/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/raindropmemory/laboratory/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/mag1cwind0w/akisame/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/aha-soft/large-business/128/Two-storied-house-icon.png">
        <img src="http://icons.iconarchive.com/icons/awicons/vista-artistic/128/3-Gray-Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/proycontec/construction/128/home-icon.png">
      </div>
    </td>
    <td>
      <div id="disp2" />
    </td>
    <td style="width:50px; text-align:right;">
      <div class="myPicker" id="rp2" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/artdesigner/urban-stories/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/oldies/128/Old-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshock/super-vista-general/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/128/blue-home-icon.png">
        <img src="http://icons.iconarchive.com/icons/ergosign/free-wintertime/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/firstfear/whistlepuff/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/christmas/128/Little-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshock/vista-general/128/house-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/collection/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/iconshow/construction/128/House-icon.png">
        <img src="http://icons.iconarchive.com/icons/archigraphs/christmas/128/Candy-House-icon.png">
        <img src="http://icons.iconarchive.com/icons/joker-design/circus/128/home-icon.png">
        <img src="http://icons.iconarchive.com/icons/raindropmemory/laboratory/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/mag1cwind0w/akisame/128/Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/aha-soft/large-business/128/Two-storied-house-icon.png">
        <img src="http://icons.iconarchive.com/icons/awicons/vista-artistic/128/3-Gray-Home-icon.png">
        <img src="http://icons.iconarchive.com/icons/proycontec/construction/128/home-icon.png">
      </div>
    </td>
  </tr>
  <tr style="vertical-align:top;">
    <td style="width:50px; text-align:left;">
      <div class="myPicker" id="lp3" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Girls-Blue-Dress-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Girls-Red-Dress-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Flowers-Wildflowers-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/3D-Eagle-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Network-1-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Music-Piano-icon.png">
      </div>
    </td>
    <td style="text-align:center;">
      <div id="disp3"><img src=""></div>
    </td>
    <td style="width:50px; text-align:right;">
      <div class="myPicker" id="rp3" style="position:relative;">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Girls-Blue-Dress-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Girls-Red-Dress-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Flowers-Wildflowers-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/3D-Eagle-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Network-1-icon.png">
        <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Music-Piano-icon.png">
      </div>
    </td>
  </tr>
</table>
</body>

Under construction...