js插件 ddslick.js--一款带图片的下拉列表插件

ddslick.js学习

一款带图片的下拉列表插件

ddslick.js下载

官网链接 ddslick.js官网

ddslick.js使用方法

1.导入文件

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js" ></script>
    //这是官网上的导入版本

2.在html中需要的地方添加一个div容器

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

3.在javascript中创建数据源

    var ddData = [
    {
        text: "Facebook",//选项的主要文本内容
        value: 1,
        selected: false,//是否被选中
        description: "Description with Facebook",//选项的描述内容
        imageSrc: "https://i.imgur.com/XkuTj3B.png"//图片地址
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "https://i.imgur.com/8ScLNnk.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "https://i.imgur.com/aDNdibj.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "https://i.imgur.com/kFAk2DX.png"
    }
];

4.获取元素并使用ddslick方法

    $('#myDropdown').ddslick({
      data:ddData,//数据来源
      width:300,//列表宽度
      selectText: "Select your preferred social network",//列表未被选择时的内容
      imagePosition:"right",//图片位置
      onSelected: function(selectedData){//选项被选中执行的方法
          //callback function: do something with selectedData;
      }   
    });