jQuery Custom Dropdown with Images using jQuery ddSlick Plugin
Apr 6, 2014
Introduction:
Here I will explain how to use jQuery to add images to dropdown list items using ddslick jQuery plugin or jQuery bind dropdownlist options with images like showing country names with country flags using ddslick jQuery plugin. Ddslick is a jQuery plugin to create custom dropdown with images.
Here I will explain how to use jQuery to add images to dropdown list items using ddslick jQuery plugin or jQuery bind dropdownlist options with images like showing country names with country flags using ddslick jQuery plugin. Ddslick is a jQuery plugin to create custom dropdown with images.
Description:
In previous posts I explained jQuery bind country images to country dropdown, jQuery dropdown with multiple select options, JavaScript send ampersand value in querystring, jQuery Change style of controls, jQuery Add fade in effect to webpage, jQuery show html page content in popup window and many articles relating to JQuery. Now I will explain how to images to dropdown list items using ddslick jQuery plugin.
In previous posts I explained jQuery bind country images to country dropdown, jQuery dropdown with multiple select options, JavaScript send ampersand value in querystring, jQuery Change style of controls, jQuery Add fade in effect to webpage, jQuery show html page content in popup window and many articles relating to JQuery. Now I will explain how to images to dropdown list items using ddslick jQuery plugin.
To
implement this functionality first create website and write following code in
your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Dropdown with images using ddslick plugin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.ddslick.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
var ddlData = [
{
text: "Facebook",
value: 1,
description: "Description
with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
description: "Description
with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
description: "Description
with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
description: "Description
with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
$('#ddimages').ddslick({
data: ddlData,
width: 300,
imagePosition: "left",
onSelected: function(selectedData)
{
//callback function: do something
with selectedData;
}
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="ddimages"></div>
</div>
</form>
</body>
</html>
|
If you observe
above code in header section I added jquery.ddslick.min.js file by using this we can implement custom dropdown with images. If you
want to add images to dropdown you need to define like this $('#ddimages').ddslick()”.
If you want these files you can get it from downloadable folder or from here ddSlick plugin
Once you completed all the coding run your
application and check your output that will be like as shown below
Demo
No comments :
Post a Comment