ddSlick 是一个轻量级的 jQuery 插件用来实现定制的下拉组件。
主要特点: Adds images and description to otherwise boring drop downs. Uses JSON to populate the drop down options. Uses Minimum css and no external stylesheets to download. Supports callback functions on selection. Works as good even without images or description.
官网:http://designwithpc.com/Plugins/ddSlick
下载:ddSlick.min.js 或者 ddSlick.js
DEMO: http://designwithpc.com/Plugins/ddSlick#demo
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:
<div id="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.
参数:
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 thenselectText
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.
from: http://designwithpc.com/Plugins/ddSlick
个人更新: 官网把CSS集成到了js里面,因此修改它的CSS属性就变得困难了,所以我把js里面的CSS部分移出来了:
jquery.ddslick.css
.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;background:red;} .dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; } .dd-selected{ overflow:hidden; display:block; padding:10px 10px 5px 10px; font-weight:bold;} .dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;} .dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; } .dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;} .dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:auto;} .dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; } .dd-options > li:last-child > .dd-option{ border-bottom:none;} .dd-option:hover{ background:#f3f3f3; color:#000;} .dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; } .dd-option-selected { background:#f6f6f6; } .dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;} .dd-image-right { float:right; margin-right:15px; margin-left:5px;} .dd-container{ position:relative;} .dd-selected-text { font-weight:bold}
导入CSS文件的时候这样写:
<link href="/css/jquery.ddslick.css" id="css-ddslick" rel="stylesheet">
id="css-ddslick" 必须要写,一定要有!这样才能覆盖js中的CSS!
相关推荐
ddSlick 是一个轻量级的 jQuery 插件,它可以生成带图片的自定义下拉选择框,可以极大的提升网站的用户体验。当然了,它不仅仅可以为选择框增加图片,还可以增加一些简单的文字描述。ddSlick 使用 JSON 格式的数据...
数据来源:中国电力统计NJ-2021版
数据来源:中国电力统计NJ-2021版
词根单词 2.2.4 修改版.apk
毕业论文-基于JSP的个人通讯录管理系统设计与实现.docx
数据来源:中国电力统计NJ-2021版
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
数据来源:中国电力统计NJ-2021版
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
数据来源:中国人口与就业统计NJ-2023版
图书借阅管理系统设计与实现及论大学生写作能力.docx
Smart继电器编程器操作手册
毕业设计论文-基于C的人事管理系统设计与实现.docx
数据来源:中国劳动统计NJ-2023版
OPCEV096IPHT手册
数据来源:中国电力统计NJ-2021版
数据来源:中国人口与就业统计NJ-2023版
数据来源:中国人口与就业统计NJ-2023版
基于matlab实现应用遗传算法针对物流配送车辆路径规划问题进行求解.rar
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。