Dropdownlist : We have already discuss about DropdownList, today we will learn how to take text item with image in DropdownList. There are following steps to design Dropdownlist with image.
Step-1 : Import JQuery file from desired resources, resource is
http://code.jquery.com/jquery-1.8.2.js
Step-2 : Attach jQuery link with <script> tag in Head section. Now your code look like
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
Step-3 : Download another JQuery file from mentioned resources, also attach with <script> tag in head section. Resource is
http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js
Step-4 : Create JQuery function, also bind DropDownlist with Text, description and Images.
Like
$(function () {
var dropdownlist = [
{
text: "mango",
value: 1,
description: "summer fruit",
imageSrc: "image001.jpg"
}
Similarly again. insert multiple item into the list.
Step-5 : Now call ddslick ( ) method , which is contain DropdownList parameters, such as Data, imagePosition, width etc in same scripting function.
$('#drop').ddslick({
data: dropdownlist,
width: 200,
imagePosition: "right"
});
Step-6 : End your Jquery function
Step-7 : Take a <div> tag with drop id.
Step-1 : Import JQuery file from desired resources, resource is
http://code.jquery.com/jquery-1.8.2.js
Step-2 : Attach jQuery link with <script> tag in Head section. Now your code look like
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
Step-3 : Download another JQuery file from mentioned resources, also attach with <script> tag in head section. Resource is
http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js
Step-4 : Create JQuery function, also bind DropDownlist with Text, description and Images.
Like
$(function () {
var dropdownlist = [
{
text: "mango",
value: 1,
description: "summer fruit",
imageSrc: "image001.jpg"
}
Similarly again. insert multiple item into the list.
Step-5 : Now call ddslick ( ) method , which is contain DropdownList parameters, such as Data, imagePosition, width etc in same scripting function.
$('#drop').ddslick({
data: dropdownlist,
width: 200,
imagePosition: "right"
});
Step-6 : End your Jquery function
Step-7 : Take a <div> tag with drop id.
Now your code is
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DropdownList with image</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 dropdownlist = [
{
text: "mango",
value: 1,
description: "summer fruit",
imageSrc: "image001.jpg"
},
{
text: "Apple",
value: 2,
description: "summer as well as winter fruit",
imageSrc: "image002.jpg"
}
];
$('#drop').ddslick({
data: dropdownlist,
width: 200,
imagePosition: "right"
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="drop"></div>
</div>
</form>
</body>
</html>
