前端插件之Bootstrap Dual Listbox使用
工欲善其事,必先利其器
对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统的学生、或是需要独自做Dashboard的后端工程师、亦或是像我这样半吊子的开发加运维,那么这个系列的文章你一定不要错过
Bootstrap Dual Listbox是一款基于Bootstrap的双向select选择框控件,作为对multiple select的扩展,使用起来非常简单,功能也更强大
项目Github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
基本使用
需要用到的JS和CSS文件位于项目代码下的dist目录中,需要将这个目录中的对应文件放入你的项目里,这一步不赘述
- 引入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">
<script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
- 加载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>
- 完成以上两步可以看到页面效果如下
非常简单,到这里已经可以正常使用这个控件了,更多的花样接着往下看
配置说明
整个界面为英文显示,有默认提示,如果你想将提示改为中文或添加自定义的提示内容,那么可以通过如下配置
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使用的更多相关文章
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- Jquery双向select控件Bootstrap Dual Listbox
效果预览: 一. 下载插件 github地址:https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox 也可以在这个网站中下载:http: ...
- 前端插件之Bootstrap Switch 选择框开关控制
简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
- 前端插件之Datatables使用--上篇
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,前边两篇分别介绍了Duallistbox插件和Select2插件的使用,这一篇开始Databases的征服之旅 D ...
- 前端插件之Datatables使用--下篇
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
- 前端学习之Bootstrap学习
一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...
- 前端插件@user
分享一个 @user 前端插件 开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...
随机推荐
- WebBrowser中获得脚本中的变量值
//项目中添加Micrsoft.mshtml引用 --c:/temp/temp.htm-- <html> <script language="JavaScript" ...
- Qt常见皮肤qss代码(有Metro的风格)
##QTabWidget 淡蓝色效果TabWidget(属性值lightblue) QTabWidget[lightblue = "true"] QTabBar::tab{ bor ...
- Qt元类型(MetaType)注册入门(附一些官方文档的关键摘录)
昨天调试项目时,突然发现如下消息: QObject::connect: Cannot queue arguments of type 'ERROR_LEVEL' (Make sure 'ERROR_L ...
- 核心思想:想清楚自己创业的目的(如果你没有自信提供一种更好的产品或服务,那就别做了,比如IM 电商 搜索)
这个时代对于学 IT 的人来说是幸运的.一个普通的程序员可以相对轻易地找到工作,可以轻易拿到比其他行业高得多的工资,甚至自己创建世界级的企业亦非空想.马云.马化腾等企业家的成功,似乎时刻提醒人们:即便 ...
- spring boot之actuator简介
当我们的开发工作进入尾声,部署上线之后,对于一个程序而言,可能才刚刚开始,对程序的运行情况的监控要伴随着整个生命周期. 如果这个工作由程序员自己来开发,也未尝不可,但本着不重复制造轮子的思想,我们尽量 ...
- 使用 Gitlab CI/CD 实现自动化发布站点到 IIS
说明 这里先介绍下两个东西 CI/CD.GitLab Runner,当然在此之前你需要对 git 有所了解,关于 git 这里不做说明,可以自行百度. 首先介绍 CI/CD :随着我们开发方式的转变, ...
- windows pyspider WEB显示框太小解决方法
环境:windows7 + chrome + pyspider 解决方法: WEB预览框过小的原因在于页面元素的css属性height被替换为60px: CSS文件所在地方:C:\Users\Admi ...
- 四种途径提升RabbitMQ传输数据的可靠性
前言 RabbitMQ虽然有对队列及消息等的一些持久化设置,但其实光光只是这一个是不能够保障数据的可靠性的,下面我们提出这样的质疑: (1)RabbitMQ生产者是不知道自己发布的消息是否已经正确达到 ...
- Burp Suite 基础知识(一)
前言 大家好,我是小白,下面开始我的表演,以下内容如有雷同纯属巧合,靴靴. (鞠躬 学到什么就写什么,可能有点乱哈. Burp Suite 是一款用于攻击 web 应用程序的集成平台,包含了许多工具 ...
- 如何确保TCP协议传输稳定可靠?
TCP,控制传输协议,它充分实现了数据传输时的各种控制功能:针对发送端发出的数据包确认应答信号ACK:针对数据包丢失或者出现定时器超时的重发机制:针对数据包到达接收端主机顺序乱掉的顺序控制:针对高效传 ...