Drop-downs (List-Menus) With Images – ddSlick

Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.

ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

ddSlick jQuery Plugin

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).

There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).

2 Comments
  1. Reply Bruno Seixas May 24, 2012 at 3:30 AM

    One for the bookmarks =)

  2. Reply Priyanka December 1, 2012 at 6:56 AM

    I got data by Json Object. My ddsclick drop down shows but when I click it nothing happen.
    How to return my clicked items ?

    now returns only [object Object]

    var jsonurl = ‘dropDown.html’;
    $.ajax({
    type : ‘GET’,
    url : jsonurl,
    data : {},
    success : function(myData) {
    $(‘#myDropdown’).ddslick({
    data : myData,
    width : 300,
    selectText : “Select the bill process”,
    imagePosition : “right”,
    onSelected : function(selectedData) {
    alert(selectedData);
    }
    });
    },
    error : function() {
    }
    });

    But as per my firebug it shows my json response like this

    [
    {
    “value”:1,
    “text”:”Process_1″,
    “selected”:false,
    “imageSrc”:”images//priyan.jpg”,
    “description”:”Process_1″
    },
    {
    “value”:2,
    “text”:”Process_2″,
    “selected”:false,
    “imageSrc”:”images//priyan.jpg”,
    “description”:”Process_2″
    },
    {
    “value”:3,
    “text”:”Process_3″,
    “selected”:false,
    “imageSrc”:”images//priyan.jpg”,
    “description”:”Process_3″
    }
    ]

Leave a reply

Search