脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端插件之Bootstrap Dual Listbox使用

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

 更新时间：2019年07月23日 09:40:07   作者：运维咖啡吧  
这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

对于很多非专业前端开发来说写页面是非常痛苦的，借助框架或插件往往能够达到事半功倍的效果，本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件，如果你是想写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使用教程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 那些项目中常见的TypeScript错误总结

    那些项目中常见的TypeScript错误总结

    这篇文章主要给大家总结介绍了一些项目中常见的TypeScript错误的相关资料,如果你想查看所有的错误信息和错误码,可以浏览TypeScript的源代码仓库,当然随着 ts 版本的更新,官网也会逐渐增加更多新的类型错误,需要的朋友可以参考下
    2022-03-03
  • 基于JS实现01支付后的10秒倒计时

    基于JS实现01支付后的10秒倒计时

    这是一个通过js实现的支付后的页面，点击支付会跳出一个弹窗，提示你是否要确定支付，确定后进入付后界面，该页面有着10秒倒计时，计时结束后便会返回原界面，也可以选择立刻返回，来返回主页面，这篇文章主要介绍了基于JS实现01支付后的10秒倒计时,需要的朋友可以参考下
    2023-03-03
  • javascript中typeof的使用示例

    javascript中typeof的使用示例

    本文为大家介绍下javascript中typeof的使用，下面有个不错的示例，感兴趣的朋友可以参考下
    2013-12-12
  • 详解设置Webstorm 利用babel将ES6自动转码成ES5

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    这篇文章主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 理解javascript中的回调函数(callback)

    理解javascript中的回调函数(callback)

    这篇文章主要介绍了理解javascript中的回调函数(callback),本文着重于对回调函数概念的理解,需要的朋友可以参考下
    2014-09-09
  • 深入学习JavaScript对象

    深入学习JavaScript对象

    今天小编就和大家深入学习JavaScript对象，感兴趣的小伙伴们可以参考一下，大家一起学习。
    2015-10-10
  • 一文了解你不知道的JavaScript闭包篇

    一文了解你不知道的JavaScript闭包篇

    这篇文章主要为大家详细介绍了一些你不知道的JavaScript闭包相关知识，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣的可以跟随小编一起学习一下
    2022-11-11
  • js中创建对象的几种方式

    js中创建对象的几种方式

    本文主要介绍了js中创建对象的几种方式。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 详解JavaScript对象和数组

    详解JavaScript对象和数组

    这篇文章主要介绍了JavaScript对象和数组，需要的朋友可以参考下
    2015-12-12
  • JS随即打乱数组实现代码

    JS随即打乱数组实现代码

    使用javascript过程中，偶尔会用到数值，而且是打乱后的数值，本文将介绍一种高效打乱数组的方法,需要的朋友可以参考下
    2012-12-12

最新评论