bala.IconPicker
A simple jQuery Icon Picker plugin.
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...