zoukankan      html  css  js  c++  java
  • 一个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,
          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.
     
  • 相关阅读:
    C#和JAVA的RSA密钥、公钥转换
    JAVA RSA私钥 加密(签名) 对应 C# RSA私钥 加密(签名)
    Senparc.Weixin.MP SDK 微信公众平台开发教程(九):自定义菜单接口说明
    微信资料
    OAuth2.0实战之微信授权篇
    URL中出现了%E2%80%8E(Zero-Width Space)
    AntDesign vue学习笔记(六)Table 显示图片
    NPOI导出 The maximum column width for an individual cell is 255 characters
    AntDesign vue学习笔记(五)导航菜单动态加载
    AntDesign vue学习笔记(四)使用组件切换
  • 原文地址:https://www.cnblogs.com/xmily/p/3407872.html
Copyright © 2011-2022 走看看