JavaScript image dropdown
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 or you can create by JSON object. I hope you'll like this.
Preview:
Feature at glance:
- Fully Skin-able
- Your original dropdown is safe, so your form post will not be messed.
- Can be created via JSON object.
- An image and a description can be inserted with text. Each <option> can have an image and description.
- 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. Now with the object control.
- Almost all events are working.
Image DropDown v3.3 Features
- Each dropdown can have own properties.
- W3C Compatible
- More Organised
- Keyboard navigation
- Multiple selection (List)
- Multiple selection can have checkbox UI
- Event Chaining
- Multiple skin on single page
- CSS sprite for icons.
- Object Oriented approach
- Open/Close via object
- Add/Remove via object
- Enabled/Disable via object
- You can set almost all properties via object
- It's FREE again :)
Dependency:
Jquery 1.2.6 or later.
This jQuery plugin works perfectly without any modification. Just follow the instruction and enjoy!
1. How to use (HTML Part)?
1.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>
</select>
Yes, This is a normal dropdown but I've added image path in "data-image" attribute. See below.
<select name="webmenu" id="webmenu">
<option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" data-image="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" title="icons/icon_email.gif">Email</option>
<option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
<option value="games" data-image="icons/icon_games.gif">Games</option>
</select>
2. How to use (Script Part)?
2.1 You need to add following code in "header".
<script src="js/msdropdown/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/msdropdown/jquery.dd.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
2.2 One more step and you are done :) Add following code anywhere in the "body".
<script language="javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
} catch(e) {
alert(e.message);
}
});
</script>
You are done. That's It.
v3.3 (expand/collapse)
Supported Browsers






Click here to play with demo!
You want it? Download!
Download from GitHub.com
https://github.com/marghoobsuleman/ms-DropdownPlease post your bugs at above location.
Attachment | Size |
---|---|
drupal.module.msdropdown.zip | 79.22 KB |