一个jquery的图片下拉列表 ddSlick
【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.
一个jquery的图片下拉列表 ddSlick的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- jquery实现图片预加载
使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...
- 20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...
- Jquery实现图片的预加载与延时加载
有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- jquery实现图片切换和js实现图片切换
jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 超酷的jQuery百叶窗图片滑块实现教程
原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...
- jQuery百叶窗图片滑块
超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...
随机推荐
- sql截取数据库数字字段内容
round(columnName, precision) 四舍五入 trunc(columnName, precision) 强制截断
- 【转】eclipse内存设置,tomcat内存设置,查看内存大小
原文网址:http://www.cnblogs.com/youngjoy/p/4239978.html 首先可以通过java/jdk/bin下的java visualVM查看eclipse的内存大小和 ...
- 【转】在Ubuntu上下载、编译和安装Android最新源代码
原文网址:http://blog.csdn.net/luoshengyang/article/details/6559955 看完了前面说的几本书之后,对Linux Kernel和Android有一定 ...
- WinPcap编程入门实践
转自:http://www.cnblogs.com/blacksword/archive/2012/03/19/2406098.html WinPcap可能对大多数人都很陌生,我在这里就先简单介绍一下 ...
- android报错——The import android.util cannot be resolved
Eclipse导入外部Android工程时,总会遇到The import android.util cannot be resolved 错误,解决方法如下: 首先检查project.properti ...
- JavaScript---网络编程(1)-介绍、变量、运算符与语句
JavaScript也是一种编程语言.并不是Java的分支哦. 可以直接在浏览器中运行的编程语言. JavaScript 的历史故事: 1.JavaScript语言与名称的由来(Netscape,Su ...
- (转)Python:self
原文:http://www.douban.com/group/topic/19376685/ 这是对前面一个php程序员问python方法为什么要手写一个self的回答,当时那个帖非常的热闹,但是下面 ...
- uploadify上传图片(限制最多五张)
项目中遇到图片上传的情况,好多都是使用服务器上传控件进行上传的,很是不爽. 然后在网上找到了uploadify的方法,自己总结和修改后分享给大家. 项目文档预览: 1.引用原有css和js &l ...
- Spark RDD/Core 编程 API入门系列之map、filter、textFile、cache、对Job输出结果进行升和降序、union、groupByKey、join、reduce、lookup(一)
1.以本地模式实战map和filter 2.以集群模式实战textFile和cache 3.对Job输出结果进行升和降序 4.union 5.groupByKey 6.join 7.reduce 8. ...
- 2 weekend110的mapreduce介绍及wordcount + wordcount的编写和提交集群运行 + mr程序的本地运行模式
把我们的简单运算逻辑,很方便地扩展到海量数据的场景下,分布式运算. Map作一些,数据的局部处理和打散工作. Reduce作一些,数据的汇总工作. 这是之前的,weekend110的hdfs输入流之源 ...