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

一个jquery的图片下拉列表 ddSlick的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  3. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  4. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  5. Jquery实现图片的预加载与延时加载

    有很多项目经常会需要判断图片加载完成后执行相应的操作,或者需要图片延迟加载,网上虽然已经有很不错的插件,但要为这些效果还得单独加载一个插件的话总感觉有点不舒服,干脆自己写了个方法: 1 2 3 4 5 ...

  6. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  7. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. 超酷的jQuery百叶窗图片滑块实现教程

    原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flas ...

  9. jQuery百叶窗图片滑块

    超酷的jQuery百叶窗图片滑块实现教程   今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash ...

随机推荐

  1. 关于.ToList(): LINQ to Entities does not recognize the method ‘xxx’ method, and this method cannot be translated into a store expression.

    LINQ to Entities works by translating LINQ queries to SQL queries, then executing the resulting quer ...

  2. Git报错:insufficient permission for adding an object to repository database .git/objects

    在本地搭建Git服务器后,在开发机上push新代码,发现Git提示: insufficient permission for adding an object to repository databa ...

  3. Web---自己写的一个简单云相册~

    实现的功能是: 用户可以一次上传一个至多个文件. 用户可以下载其他人上传的图片. 用户可以查看其他所有人的图片. 用户只能删除通过自己IP上传的图片. 用到的技术: 文件上传下载.设计模式.Dom4j ...

  4. HDOJ/HDU 1022 Train Problem I(模拟栈)

    Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...

  5. JavaScript高级程序设计56.pdf

    选择选项 对于只允许选择一项的选择框,访问选中项最简单的方式是selectedIndex属性 var selectedOption=selectbox.options["selectbox. ...

  6. (转载)WindowsXP上安装和运行神器SqlMap的步骤

    在Windows XP上安装和运行SqlMap的步骤…… 1.首先下载SqlMap 点击下载. https://codeload.github.com/sqlmapproject/sqlmap/leg ...

  7. Kth Ancestor 第k个祖先问题

    题目出处 这道题目出自hackerrank的8月月赛的第三题. 题目大意: 先给出一棵树 之后有三种操作分别为:加边,查询,和删除一个节点 查询的时候要给出任意节点x的第k个祖先 每组数据有t个cas ...

  8. Eclipse常用插件推荐

    Eclipse Web Tools Platform(WTP) 地址:http://download.eclipse.org/webtools/ WTP十分强大,支持HTML, JavaScript, ...

  9. JSBinding+Bridge:逻辑代码中操作二进制数据

    以这2个函数为例 class File { public static byte[] ReadAllBytes(string path); public static void WriteAllByt ...

  10. Android开发艺术探索(三)——View的事件体系

    一.View基础知识 主要介绍内容有:View的位置参数.MotionEvent和TouchSlope对象.VelocityTracker.GestureDetector和Scroller对象 1.什 ...