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！

?

justcoding.ikeepstudying.com

?