这是一款带图标的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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!