Dropkick: A custom dropdown jquery plugin

In one of my projects we were working on rewriting an existing application from Silver light platform to HTML5. As part of this we had to come up with a solution for all the dropdowns to look exactly as in Silverlight version. But we were not able customize the dropdowns with html select control to look exactly as in Silverlight version.

I did lot of research in Google, found some Jquery/javascript plugins and approaches and explored all of them. After trying with most of the approaches and plugins I have felt that that the Jquery plugin DropKick well suits for my requirement. You can download this plugin at the following url.
http://jamielottering.github.com/DropKick/

 How to use dropkick in your code?
1. Write the markup code for regular html dropdown as shown below
<select id="ddlCountry">
 <option value="1">India</option>
 <option value="2">USA</option>
 <option value="3">UK</option>
 <option value="4">Russia</option>
</select>
2. Add the dropkick javascript reference to your page in header section
3. Dropkick works for Jquery so you must also make sure you added reference to Jquery
4. Apply dropkick effect to your regular dropdown control as shown below
     $('#ddlCountry').dropkick();
5. You might want to handle the change event for the dropkick, in that case you can write the following code snippet.
     $('.ddlCountry').dropkick({
         change: function (value, label) {
         alert('Your selection: ' + label + ':' + value);
     }
     });
6. You also need to add the reference to dropkick css file to make sure you are getting the custom styles applied. And also you can edit the css to customize style effects for your specific requirement.

You can see the sample customised dropdown by dropkick below:

You can find more information at http://jamielottering.github.com/DropKick/