Drop-downs (List-Menus) With Images – ddSlick
23
May
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.
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.).
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://designwithpc.com/Plugins/ddSlick
Compatibility: All Major Browsers
Website: http://designwithpc.com/Plugins/ddSlick
- Tags:
Drop-Down Javascript
- Filed under: Forms, Goodies, Menu & Navigation, MIT License
- 2 Comments
2 Responses for "Drop-downs (List-Menus) With Images – ddSlick"
One for the bookmarks =)
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"
}
]