$("#demoBasic").ddslick({ data: ddData, width: 300, imagePosition: "left", selectText: "Select your favorite social network", onSelected: function (data) { console.log(data); } });
When using JSON to populate, the plugin requires the specific data format. Click here to see the sample JSON data for the plugin.
//Make it slick! $("#make-it-slick").on("click", function(){ $("#demo-htmlselect").ddslick(); }); //Restore Original $("#restore").on("click", function(){ $("#demo-htmlselect").ddslick("destroy"); });
Use HTML5 data attributes data-imagesrc
and data-description
with your regular HTML select elements to add images and description. The plugin
will retrieve text
, value
, and selected
attributes
from the elements itself.
Click here to see the HTML select element for this example.
$("#demoShowSelected").ddslick({ data: ddData, selectText: "Select your favorite social network", }); $("#showSelectedData").on("click", function () { var ddData = $("#demoShowSelected").data("ddslick"); displaySelectedData("2: Getting Selected Dropdown Data" , ddData); });
You may use jquery .data() with your selector to get data from plugin. $("#demoShowSelected").data("ddslick");
will return a js object that contains:
Try an index between 0 to 3
$("#demoSetSelected").ddslick({ data: ddData, selectText: "Select your favorite social network" }); $("#btnSetSelected").on("click", function () { var i = $("#setIndex").val(); if(i >= 0 && i <5) $("#demoSetSelected").ddslick("select", {index: i }); else $("#setIndexMsg").effect("highlight",2400); });
You may use plugin’s select method like
$("#demoSetSelected").ddslick("select",
{index: i });
to select a particular index.
$("#demoCallback").ddslick({ data: ddData, selectText: "Select your favorite social network", onSelected: function(data){ displaySelectedData("3: Callback Function on Dropdown Selection" , data); } });
Use plugin’s onSelected
callback function on selecting one of the drop
down options. The callback data will include:
$("#demoDefaultSelection").ddslick({ data: ddData, defaultSelectedIndex:2 });
Use Zero based plugin option
defaultSelectedIndex
to set up plugin
to pre select the index, when first initializing.
Note: When there is no selectText
the plugin selects
the first item index[0] from dropdown options.
$("#demoImageRight").ddslick({ data: ddData, imagePosition:"right", selectText: "Select your favorite social network" });
You have the flexibility to position image either on left or right using imagePosition
,
depending on your preference.
Also you can add your own styles to these images by modifying their CSS class
.dd-option-image, .dd-selected-image
on your page. For e.g. plugin sets
the default max-width for images to 64px, that you can overwrite by adding these
classes to your page and overwriting max-width style.
$("#demoTruncated").ddslick({ data: ddDataLongDescription, selectText: "Select your favorite social network", truncateDescription: true, onSelected: function(data){ displaySelectedData("5: Dropdown with truncated description", data); } });
By default plugin will truncate the description in selected view if it overflows.
You may however turn the default behavior by setting truncateDescription:false
to show the complete description. Either way you still get the complete description
with returned selected data. Also use .dd-desc
to add your own styles
to description.
var ddBasic = [ { text: "Facebook", value: 1, }, { text: "Twitter", value: 2, }, { text: "LinkedIn", value: 3, }, { text: "Foursquare", value: 4, } ]; $("#divNoImage").ddslick({ data: ddBasic, selectText: "Select your favorite social network" });
The plugin is built to work as beautiful even without images!
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" ></script>
<div id="myDropdown"></div>
//Dropdown plugin data var ddData = [ { text: "Facebook", value: 1, selected: false, description: "Description with Facebook", imageSrc: "http://i.imgur.com/XkuTj3B.png" }, { text: "Twitter", value: 2, selected: false, description: "Description with Twitter", imageSrc: "http://i.imgur.com/8ScLNnk.png" }, { text: "LinkedIn", value: 3, selected: true, description: "Description with LinkedIn", imageSrc: "http://i.imgur.com/aDNdibj.png" }, { text: "Foursquare", value: 4, selected: false, description: "Description with Foursquare", imageSrc: "http://i.imgur.com/kFAk2DX.png" } ];
$("#myDropdown").ddslick({ data:ddData, width:300, selectText: "Select your preferred social network", imagePosition:"right", onSelected: function(selectedData){ //callback function: do something with selectedData; } });Note: Use onSelected callback function to do something after the dropdown option is selected. The selectedData will contain the selected text, value, description, imageSrc.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" ></script>
<select id="demo-htmlselect"> <option value="0" data-imagesrc="http://i.imgur.com/XkuTj3B.png" data-description="Description with Facebook">Facebook</option> <option value="1" data-imagesrc="http://i.imgur.com/8ScLNnk.png" data-description="Description with Twitter">Twitter</option> <option value="2" selected="selected" data-imagesrc="http://i.imgur.com/aDNdibj.png" data-description="Description with LinkedIn">LinkedIn</option> <option value="3" data-imagesrc="http://i.imgur.com/kFAk2DX.png" data-description="Description with Foursquare">Foursquare</option> </select>
$("#myDropdown").ddslick({ onSelected: function(selectedData){ //callback function: do something with selectedData; } });
background: #CCCCCC;
or background: transparent url("your-background-image.jpg") no-repeat 0 0 scroll
selectText
will be displayed. See demo 4 above.$("#demoSetSelected").ddslick("select", {index: i });
$("#demoSetSelected").ddslick("open");
$("#demoSetSelected").ddslick("close");
$("#demoSetSelected").ddslick("destroy");
selected
attribute will be passed to the original HTML select, so you don’t loose the selection. This will also unbind any event handlers attached by plugin to this control. See demo 2 above.