jQuery : ddSlick 自定义select下拉框 custom drop down with images and description.

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

1. 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>

2. Create an empty placeholder for the custom drop down: eg:

   <div id="myDropdown"></div>

3. 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"
       }
   ];

4. 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; or background: 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.

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！

更多参考:

jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover

jQuery: jScroll 下拉加载更多

jQuery模拟原生态App上拉刷新下拉加载效果代码

jQuery : ddSlick 自定义select下拉框 custom drop down with images and description.

jQuery: textarea 自动适应高度 无下拉条 Elastic

本文: jQuery : ddSlick 自定义select下拉框  custom drop down with images and description.