Bootstrap 4多选下拉框BsMultiSelect插件

作者：管理员

发布时间：2020/2/26 17:11:38

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=897

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

　　使用方法

　　安装：

　　npminstall@dashboardcode/bsmultiselect

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

　　<!--Stylesheet-->

　　<linkrel="stylesheet"href="bootstrap.min.css">

　　<!--jQuery&Bootstrap-->

　　<scriptsrc="pathto//jquery-3.3.1.min.js"></script>

　　<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

　　<scriptsrc="bootstrap/4.3.1/js/bootstrap.min.js"></script>

　　<scriptsrc="dist/js/BsMultiSelect.js"></script>

　　HTML结构

　　<selectname="states"id="example"class="form-control"multiple="multiple"style="display:none;">

　　<optionvalue="AL">Alabama</option>

　　<optionvalue="AK">Alaska</option>

　　<optionvalue="AZ">Arizona</option>

　　<optionvalue="AR">Arkansas</option>

　　<optionselectedvalue="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:'0000.2remrgba(0,123,255,0.25)',

　　selectedPanelFocusValidBoxShadow:'0000.2remrgba(40,167,69,0.25)',

　　selectedPanelFocusInvalidBoxShadow:'0000.2remrgba(220,53,69,0.25)',

　　filterInputColor:'#495057',

　　selectedItemContentDisabledOpacity:'.65',

　　dropdDownLabelDisabledColor:'#6c757d',

　　containerClass:'dashboardcode-bsmultiselect',

　　dropDownMenuClass:'dropdown-menu',

　　dropDownItemClass:'px-2',

　　dropDownItemHoverClass:'text-primarybg-light',

　　selectedPanelClass:'form-control',

　　selectedItemClass:'badge',

　　removeSelectedItemButtonClass:'close',

　　filterInputItemClass:'',

　　filterInputClass:''

　　});

关键字：jQuery