Marghoob Suleman

One man too many roles...

JavaScript image combobox v2.1

Submitted by marghoob.suleman on Mon, 03/09/2009 - 18:40

JavaScript custom dropdown - JavaScript image combobox

Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element. I hope you'll like this.

jQuery + msDropdown

Preview:

Preview

Image dropdown features:

Fully Skin-able
Your original dropdown is safe, so your form post will not be messed.
An image can be inserted with your text. Each <option> can have an image.
You may covert all combobox as image combobox, you may convert by id, multiple ids, or by wild card. We'll see that in example.

Its possible to repopulate the data. You can also Enabled/Disabled your dropdown. You just need to write following code after your population or activities.

    
    //after your activities
    document.getElementById('yourcomboboxid').refresh(); 
    //yes, you are right! A new method refresh() has been added with every combobox.

Almost all events are working.

Current Version: 2.1

Whats in v2.1?

Each dropdown can have own properties. This was missing badly in previous version.
W3C Compatible
More Organised
True Jquery Plugin
Keyboard navigation
Multiple selection (List) New
Free again :)

Dependency:

Jquery 1.2.6 or later.

This jQuery plugin works perfectly without any modification. Just follow the instruction and enjoy!

How to use (HTML Part)?

1. Have a look at original dropdown.


    <select name="webmenu" id="webmenu"  onchange="showValue(this.value)">
    <option value="calendar">Calendar</option>
    <option value="shopping_cart">Shopping Cart</option>
    <option value="cd">CD</option>
    <option value="email"  selected="selected">Email</option>
    <option value="faq">FAQ</option>
    <option value="games">Games</option>
    <option value="music">Music</option>
    <option value="phone">Phone</option>
    <option value="graph">Graph</option>
    <option value="secured">Secured</option>
    <option value="video">Video</option>
  </select>

Yes, This is a normal dropdown but I've added image path in "title". Previously it was "icon" attribute. This is good if you value W3C compatibility.


  <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" title="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" title="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" title="icons/icon_faq.gif">FAQ</option>
    <option value="games" title="icons/icon_games.gif">Games</option>
    <option value="music" title="icons/icon_music.gif">Music</option>
    <option value="phone" title="icons/icon_phone.gif">Phone</option>
    <option value="graph" title="icons/icon_sales.gif">Graph</option>
    <option value="secured" title="icons/icon_secure.gif">Secured</option>
    <option value="video" title="icons/icon_video.gif">Video</option>
  </select>

How to use (Script Part)?

2. You need to add following code in "header".

  
<script language="javascript" src="msdropdown/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

3. One more step and you are done :) Add following code anywhere in the "body".

  
  <script language="javascript">
$(document).ready(function(e) {
							$("body select").msDropDown();
						   });
</script>

Make dropdown by Id's

Yes, That's possible. You can make custom dropdown by ids. Lets have a look.

  
// target only one id
$("#combo2").msDropDown();
// target multiple ids
$("#combo1, #combo2").msDropDown();
//by wild card
$("body select").msDropDown();
//or
$("#divid select").msDropDown();
//or 
$("#formid select").msDropDown();

Method & Properties:

    
    //convert normal combobox to image comboxbox
    1. $("#comboboxid").msDropDown();
    //Show/hide icon on title bar. by default its "true"; 
    2. $("#combo1").msDropDown({showIcon:false}); 
    //Use inline style
    3. $("#combo1").msDropDown({style:'background-color:#333, font-size:'24px'}); 
    //Visible rows (it would be good if you enter "rowHeight" when using "visibleRows");
    4. $("#combo1").msDropDown({visibleRows:5, rowHeight:23});

How to change skin?

Smile :) ...CSS (dd.css) is yours, play with that. Just keep few things in mind. Please don't change "display, float and overflow" attributes. Have Fun!

New Release: 3rd Sep, 2009