一个jquery的图片下拉列表 ddSlick
2024-08-27 09:54:22
【ddSlick】http://designwithpc.com/Plugins/ddSlick
How to use with JSON data
Include the plugin javascript file along with jquery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>- Create an empty placeholder for the custom drop down: eg:
<divid="myDropdown"></div>
- Get the drop down options (JSON Data) to be binded to plugin:
//Dropdown plugin data
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
]; Attach plugin to this placeholder like:
$('#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 drop down option is selected. The selectedData will contain the selected text, value, description, imageSrc.
How to use with HTML <select> and <option>
- Include the plugin javascript file along with jquery:
<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<scripttype="text/javascript"src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script> - Add HTML5 data attributes to your select elements: eg:
<selectid="demo-htmlselect">
<optionvalue="0"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"data-description="Description with Facebook">Facebook</option>
<optionvalue="1"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"data-description="Description with Twitter">Twitter</option>
<optionvalue="2"selected="selected"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"data-description="Description with LinkedIn">LinkedIn</option>
<optionvalue="3"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"data-description="Description with Foursquare">Foursquare</option>
</select> - Attach plugin to this HTML select element:
$('#myDropdown').ddslick({
onSelected:function(selectedData){//callback function: do something with selectedData;}});
Plugin Options:
- data default value '[]'
JSON data to populate drop down plugin options - width default value '260'
Width in px for the drop down plugin i.e. 400, or "400px". - height default value 'null'
Height in px for the drop down options i.e. 300, or "300px". The scroller will automatically
be added if options overflows the height. - background default value '#eee'
Background for your drop down. You can use the css shorthand notation for setting
backgrounds
i.e.background: #CCCCCC;
orbackground: transparent url('your-background-image.jpg')
no-repeat 0 0 scroll - selectText default value 'Select...'
Set default text to display when no option is selected. - imagePosition default value 'left'
Set positioning of image in your drop down, left or right. See demo 5 above. - showSelectedHTML default value 'true'
Set what to be displayed as selected. Setting false will only display title. Setting
true displays title, description and image. - defaultSelectedIndex default value 'null'
Set the default index to be selected when initializing plugin. If not provided then
selectText
will be displayed. See demo 4 above. - truncateDescription default value 'true'
Truncate the long description when selected. Options however display the full text.
The plugin still returns complete description on selection. See demo 6 above. - onSelected default value 'function () { }'
Callback function when an option is selected in the drop down. See demo 3 above. - keepJSONItemsOnTop default value 'false'
You can use both HTML select elements and JSON data to populate your drop down.
By default JSON items are added in drop down after the select options.
Plugin Methods:
- select
You may use plugin's select method like$('#demoSetSelected').ddslick('select',
{index: i });
to select a particular index. See demo 3 above. - select
You may use plugin's open method like$('#demoSetSelected').ddslick('open');
to open drop down options. - close
You may use plugin's close method like$('#demoSetSelected').ddslick('close');
to close drop down options. - destroy
You may use plugin's destroy method to restore to original element like$('#demoSetSelected').ddslick('destroy');
If you had selected an option with ddSlick, theselected
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.
最新文章
- python学习笔记:Day02
- oc实例变量初始化方法
- Java学习第一步: Win7配置JDK环境
- Phaser中很多对象都有一个anchor属性
- hadoop中Text类 与 java中String类的区别
- spark性能调优:资源优化
- 【转】PWM占空比和分辨率
- ubuntu14.04如何卸载qq
- IOS-Archiver文件归档(2)
- iOS 推荐博客
- Nyoj 城市平乱(图论)
- SAML2.0 协议初识(一)
- 编写shell时,提示let/typeset:not found
- php析构方法
- 【medium】78. Subsets
- vi命令撤销及恢复
- Class的 getSuperclass与getGenericSuperclass区别
- Tomcat应用部署
- nmap参数原理抓包分析
- spring proxy-target-class
热门文章
- POJ_1065_Wooden_Sticks_(动态规划,LIS+鸽笼原理)
- WordPress &#39;is_serialized()&#39;远程任意代码执行漏洞(CVE-2013-4338)
- STM32F0308开发环境的选择--CooCox CoIDE篇
- Asp.net--Ajax前后台数据交互
- 用SQL描述树
- 《C语言程序设计现代方法》第1章 C语言概述
- List迭代循环时出现分问题
- .net 加水印 图片变大很多 解决方法
- HTML5 application cache
- 三种纯CSS实现三角形的方法