前端插件之Bootstrap Dual Listbox使用教程


Posted in Javascript onJuly 23, 2019

对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统的学生、或是需要独自做Dashboard的后端工程师、亦或是像我这样半吊子的开发加运维,那么这个系列的文章你一定不要错过

Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件,作为对multiple select的扩展,使用起来非常简单,功能也更强大

项目Github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

基本使用

需要用到的JS和CSS文件位于项目代码下的dist目录中,需要将这个目录中的对应文件放入你的项目里,这一步不赘述

1.引入CSS/JS文件,由于bootstrap-duallistbox是基于bootstrap的,所以要先引入bootstrap相关的css和js

<!-- 加载bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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>
<script>
  var selectorx = $('select[name="groups"]').bootstrapDualListbox();
</script>

1.完成以上两步可以看到页面效果如下

非常简单,到这里已经可以正常使用这个控件了,更多的花样接着往下看

配置说明

整个界面为英文显示,有默认提示,如果你想将提示改为中文或添加自定义的提示内容,那么可以通过如下配置

var selectorx = $('select[name="groups"]').bootstrapDualListbox({
  nonSelectedListLabel: '未选择的组',
  selectedListLabel: '已选择的组',
  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.cn</option>');
selectorx.bootstrapDualListbox('refresh');

注意:上文中的所有selectorx都为加载duallistbox时实例化的select对象

完整Demo

为了方便大家学习,我写了个完整的demo,你可以在线查看效果或下载代码应用到自己的项目中

在线Demo地址:https://demo.ops-coffee.cn/duallistbox/

Github源码地址:https://github.com/ops-coffee/demo/tree/master/duallistbox

总结

以上所述是小编给大家介绍的前端插件之Bootstrap Dual Listbox使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jQuery中extend函数详解
Feb 13 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 #Javascript
vscode vue 文件模板的配置方法
Jul 23 #Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 #Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
这应该是最详细的响应式系统讲解了
Jul 22 #Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 #Javascript
微信小程序webview 脚手架使用详解
Jul 22 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
动态表格Table类的实现
2009/08/26 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
python win32 简单操作方法
2017/05/25 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python中什么是面向对象
2020/06/11 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
Python ellipsis 的用法详解
2020/11/20 Python
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
优秀语文教师事迹
2014/05/18 职场文书
假面舞会策划方案
2014/05/29 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
小学生暑假生活总结
2015/07/13 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js