欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 选项卡 > 带图标的jQuery自定义下拉框插件 target=_blank

带图标的jQuery自定义下拉框插件 target=_blank

带图标的jQuery自定义下拉框插件 target=_blank

关键词:图标,下拉框,jquery下拉框插件,jquery下拉框,带图标的下拉框,jquery库,xuanxiangka

描述:这是一款带图标的jQuery自定义下拉框插件。该jquery插件可以动js代码中动态渲染下拉框的选项,生成带图标的下拉框选项,非常实用。

简要教程

这是一款带图标的jQuery自定义下拉框插件。该jquery插件可以动js代码中动态渲染下拉框的选项,生成带图标的下拉框选项,非常实用。

使用方法

在页面中引入customSelect.jquery.css、jquery和customSelect.jquery.min.js文件。

<link rel="stylesheet" href="customSelect.jquery.css">                  
<script src="js/jquery.min.js"></script>
<script src="js/customSelect.jquery.min.js"></script>                   
                
HTML结构

实用<input>元素来作为下拉框的容器。

<input type="hidden" id="countrySelecter" value=""> 
                
初始化插件

在页面DOM元素加完毕之后,通过下面的方法来初始化插件。

var myOptions = [
    ["ct", "ct.png", "Catalonia"],
    ["es", "es.png", "Spain"],
    ["gb", "gb.png", "Great Britain"],
    ["de", "de.png", "Germany"],
    ["it", "it.png", "Italy"],
    ["fi", "fi.png", "Finland"],
    ["fr", "fr.png", "France"]
],

var myTemplate = "<div class="jqcs_option" data-select-value="$0" style="background-image:url(example_icons/$1);">$2</div>"
                

配置参数

该jQuery自定义下拉框插件的可用配置参数有:

$.customSelect({
  identifier: "demo",
  selector: "#countrySelect",
  placeholder: "Select your country",
  options: myOptions,
  template: myTemplate
});
                

该jQuery自定义下拉框插件的github地址为:https://github.com/BanNsS1/jquery.customSelect

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_xuanxiangka/9266.html

 在线演示  免费下载
编号:201808290000009266
大小:0.05MB
上传时间:2018-10-10 07:00
素材由用户"zhaofeng0629"上传分享。

标签

最新推荐素材

与带图标的jQuery自定义下拉框插件 target=_blank相关的素材

.