一个jquery的图片下拉列表 ddSlick

【ddSlick】http://designwithpc.com/Plugins/ddSlick

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:

   <divid="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.

 

How to use with HTML <select> and <option>

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

    

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

3. 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; 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.

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, the selected 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.