前端插件之BootstrapDualListbox使⽤教程
对于很多⾮专业前端开发来说写页⾯是⾮常痛苦的，借助框架或插件往往能够达到事半功倍的效果，本系列⽂章会介绍我在运维系统开发过程中⽤到的那些顺⼿的前端插件，如果你是想写XX管理系统的学⽣、或是需要独⾃做Dashboard的后端⼯程师、亦或是像我这样半吊⼦的开发加运维，那么这个系列的⽂章你⼀定不要错过
Bootstrap Dual Listbox是⼀款基于Bootstrap的双向select选择框控件，作为对multiple select的扩展，使⽤起来⾮常简单，功能也更强⼤
基本使⽤
需要⽤到的JS和CSS⽂件位于项⽬代码下的dist⽬录中，需要将这个⽬录中的对应⽂件放⼊你的项⽬⾥，这⼀步不赘述
1.引⼊CSS/JS⽂件，由于bootstrap-duallistbox是基于bootstrap的，所以要先引⼊bootstrap相关的css和js
<!-- 加载bootstrap -->
解读代码的网站
<script src="code.jquery/jquery-3.2.1.slim.min.js"></script>
<script src="maxcdn.bootstrapcdn/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- 加载bootstrap-dualllistbox -->
<link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css" rel="external nofollow" >
<script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
1.加载duallistbox插件
<select class="form-control" multiple="multiple" name="groups" size="10">
<option value="1">GroupA</option>
<option selected value="2">GroupB</option>
<option value="3">GroupC</option>
<option value="4">GroupD</option>
<option selected value="5">GroupE</option>
<option value="6">GroupF</option>
<option value="7">GroupG</option>
</select>
jquery下载文件插件<script>
var selectorx = $('select[name="groups"]').bootstrapDualListbox();
</script>
1.完成以上两步可以看到页⾯效果如下
⾮常简单，到这⾥已经可以正常使⽤这个控件了，更多的花样接着往下看
配置说明
trousers怎么读语音整个界⾯为英⽂显⽰，有默认提⽰，如果你想将提⽰改为中⽂或添加⾃定义的提⽰内容，那么可以通过如下配置security是什么意思啊中文
var selectorx = $('select[name="groups"]').bootstrapDualListbox({
nonSelectedListLabel: '未选择的组',
selectedListLabel: '已选择的组',drawable setbounds
filterTextClear: '展⽰所有',
filterPlaceHolder: '过滤搜索',
moveSelectedLabel: "添加",
moveAllLabel: '添加所有',
removeSelectedLabel: "移除",
removeAllLabel: '移除所有',
infoText: '共{0}个组',
infoTextFiltered: '搜索到{0}个组 ，共{1}个组',
infoTextEmpty: '列表为空',
});
以上配置都⽐较简单，对照中⽂就能知晓意思，不做过多解释，另外有⼏个⽀持的参数说明如下：
infoText：除了设置字符串外还可设置为false，当设置为false时可隐藏这段信息
showFilterInputs：默认为true，是否显⽰filter过滤框
moveOnSelect：默认为true，点击便会变更选项到对应的选择框内，如果设置为false则会在出现moveSelected的箭头需要点击箭头或者双击选项后才能变更选项到对应的选择框
nonSelectedFilter：未选中的默认过滤规则，可以配置为OPS-COFFEE-A则未选中的框内只会显⽰OPS-COFFEE-A
selectedFilter：已选中的默认规则，与noSelectedFilter类似
使⽤进阶
获取已选择的值
selectorx.val()
获取select插件对象
selectorx.bootstrapDualListbox('getContainer')
刷新插件元素⽤户界⾯
selectorx.bootstrapDualListbox('refresh');
删除bootstrap-duallistbox插件，恢复select原样
selectorx.bootstrapDualListbox('destroy');
动态添加select的option
selectorx.append('<option value="9" selected>ops-coffee</option>');
selectorx.bootstrapDualListbox('refresh');
distribute词根
注意：上⽂中的所有selectorx都为加载duallistbox时实例化的select对象
完整Demo
为了⽅便⼤家学习，我写了个完整的demo，你可以在线查看效果或下载代码应⽤到⾃⼰的项⽬中
总结
以上所述是⼩编给⼤家介绍的前端插件之Bootstrap Dual Listbox使⽤教程，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。