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

当前位置:主页 > jQuery库 > 表单 > 带图标的jQuery自定义下拉框插件
带图标的jQuery自定义下拉框插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-08-25
    阅读:
简要教程

这是一款带图标的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