Marghoob Suleman

web architect...

JavaScript image combobox v3.3

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

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.

jQuery + msDropdown

Preview:

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)

$.browser - jQuery 1.9 version fixed
Keyboard navigation issue has been fixed
destory is now destroy - oops typo error

v3.2 updates:

All setting parameters can passed throught element's data- attributes. ie. data-maincss="blue"
zIndex bug fixed for list and dropdown if both on the same page.
Added setIndexByValue method. However same can be done by - handler.set("value", value)
Added "append" and "prepend" in setting params. append is used to append the element to the childdiv and prepend do as the name suggest.
Added one more help file for objected oriented approach.

v3.1.1 updates:

chrome onchange bug fixed
less than ie8 zindex bug fixed
less than ie8 add() method bug fixed

v3.1 updates:

Child width can be alter
New multiple is introduced. Its multiple but with the checkbox.
Bonus: elementname_mscheck will be posted along with the form post/get. i.e. if element name is "tech" checkbox tech_mscheck[] is created. However you can set the suffix using 'checkboxNameSuffix' parameter.

v3.0 updates:

Written from scratch
Improved performance and UI
Improved auto filter experience
Added data- support in attributes for image, description, title, imagecss, text and value
Event can be bind/unbind through object
Organized folder structure
Old style (with title attribute) is also working.
Country dropdown with flags as a bonus

v2.38 updates: