Thursday, February 23, 2012

Using msDropDown - a dropdown with icon in the option

msDropDown is a nice plugin. Its a dropdown plugin where we can use icon with the option of the select element. The detail of the plugin can be found here. Implementation goes like below-

We need to add the jQuery and msDropDown script and css file reference. We can download the files form the plugin site given above.
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/js/jquery.dd.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/msdropdown/dd.css" />
Working principle of the plugin is very simple. We need to add the icon path to the title of the option in select tag. Like below-
<option value="value" title="path of the icon">text</option>
Lets have a sample dropdown for this-
    <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
        <option value="calendar" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_calendar.gif">
            Calendar</option>
        <option value="shopping_cart" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cart.gif">
            Shopping Cart</option>
        <option value="cd" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_cd.gif">
            CD</option>
        <option value="email" selected="selected" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_email.gif">
            Email</option>
        <option value="faq" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_faq.gif">
            FAQ</option>
        <option value="games" title="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/icons/icon_games.gif">
            Games</option>
    </select>
Now we can activate the msDropDown by the following JavaScript code-
    <script language="javascript">
        $(document).ready(function (e) {
            try {
                $("#webmenu").msDropDown();
            } catch (e) {
                alert(e.message);
            }
        });
    </script>
Thats all. For various other options we can check the plugin site.

4 comments:

  1. Can I use relative url for the images on the title?

    ReplyDelete
    Replies
    1. Yes. We can use relative URL. I have used full URL as I dont want to save the images somewhere.

      Delete
  2. Hi,

    I have used this plugin for a dynamic website. But taking long time to load the dropdown. Also on firstload showing select box. Do you have any suggestion for this?

    ReplyDelete