手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

Bootstrap 4多选下拉框BsMultiSelect插件

时间:2020-06-25    点击: 次    来源:网络    作者:佚名 - 小 + 大

Bootstrap 4多选下拉框BsMultiSelect插件
简要教程

BsMultiSelect是一款基于Bootstrap 4的多选下拉框插件。该插件能够提供友好的多选功能,并提供一些情节模式和多种主题效果。

使用方法

安装:

npm install @dashboardcode/bsmultiselect                                  

在页面中引入下面的文件。

<!-- Stylesheet --><link rel="stylesheet" href="bootstrap.min.css"><!-- jQuery & Bootstrap --><script src="pathto//jquery-3.3.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="dist/js/BsMultiSelect.js"></script>                
HTML结构
<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">  <option value="AL">Alabama</option>  <option value="AK">Alaska</option>  <option value="AZ">Arizona</option>  <option value="AR">Arkansas</option>  <option selected value="CA">California</option>  ...</select>                                  
初始化插件
$(function(){  $("select").dashboardCodeBsMultiSelect();});                
配置参数

可用的配置参数的默认值如下:

$("select").bsMultiSelect({  selectedPanelDefMinHeight: 'calc(2.25rem + 2px)',  selectedPanelLgMinHeight: 'calc(2.875rem + 2px)',  selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)',  selectedPanelDisabledBackgroundColor: '#e9ecef',  selectedPanelFocusBorderColor: '#80bdff',  selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',  selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)',  selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)',  filterInputColor: '#495057',  selectedItemContentDisabledOpacity: '.65',  dropdDownLabelDisabledColor: '#6c757d',  containerClass: 'dashboardcode-bsmultiselect',  dropDownMenuClass: 'dropdown-menu',  dropDownItemClass: 'px-2',  dropDownItemHoverClass: 'text-primary bg-light',  selectedPanelClass: 'form-control',  selectedItemClass: 'badge',  removeSelectedItemButtonClass: 'close',  filterInputItemClass: '',  filterInputClass: ''});                                  

该基于Bootstrap 4的多选下拉框插件的github网址为:https://github.com/DashboardCode/BsMultiSelect

 Bootstrap 4多选下拉框BsMultiSelect插件 本地下载

上一篇:js扑克堆叠式卡片轮播图插件jQ

下一篇:基于Bootstrap4的Toast提示插件

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM