Bootstrap 5/4 的用户友好多选插件 - BsMultiSelect

Bootstrap 5/4 的用户友好多选插件 - BsMultiSelect

版本:

浏览量:279

最后更新:2021-09-05

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

只是Bootstrap 5(和 4)框架的另一个多选插件,它将多选列表转换为带有复选框的易于使用的下拉列表。

您的用户可以通过单击复选框从下拉列表中选择一个或多个选项。

要清除选择,只需单击x所选选项内的图标,就像标签输入一样。

更多功能:

  • RTL 支持。

  • 允许作为 ES 模块实现(不需要 jQuery)。

  • 表单验证。

  • 实时过滤器。

  • 根据 APACHE 2 获得许可。

如何使用它:

1. 要使用该插件,请确保您已安装 jQuery 库和 Bootstrap 5(或Bootstrap 4)框架。

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. 在 jQuery 之后加载 jQuery BsMultiSelect 插件的脚本。

<!-- For Bootstrap 5 -->
<script src="dist/js/BsMultiSelect.min.js"></script>
 
<!-- For Bootstrap 4 -->
<script src="dist/js/BsMultiSelect.bs4.min.js"></script>

3. Just call the function dashboardCodeBsMultiSelect on the multi select list and the plugin will do the rest.

<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").bsMultiSelect();
 
});

4. You can also define the options in the JavaScript as follows.

<div class="container">
  ...
</div>
$('.container').bsMultiSelect({
  options : [
    {text:"Asia", value:"C0",hidden:false,disabled:false,selected:true},
    {text:"Europe",value:"C1",hidden:false,disabled:false,selected:false},
    {text:"Australia",value:"C2",hidden:false,disabled:false,selected:false}
  ],
  getDisabled : () => {},
  getIsValid : () => {},
  getIsInvalid : () => {}
});

5. All default options to customize the plugin.

$("select").bsMultiSelect({
  useCssPatch: true,
  containerClass: "dashboardcode-bsmultiselect",
  css: css,
  cssPatch: cssPatch,
  placeholder: '',
  staticContentGenerator: null,
  getLabelElement: null,
  pickContentGenerator: null,
  choiceContentGenerator: null,
  buildConfiguration: null,
  isRtl: null,
  setSelected: null,
  required: null,
  optionsAdapter: null,
  options: null,
  getDisabled: null,
  getSize: null,
  getValidity: null,
  labelElement: null,
  valueMissingMessage: '',
  getIsValueMissing: null
});

6. Override the default styles & Bootstrap 4 classes to customize the plugin.

$("select").bsMultiSelect({
  cssPatch: {
    choices: {
      listStyleType: 'none'
    },
    picks: {
      listStyleType: 'none',
      display: 'flex',
      flexWrap: 'wrap',
      height: 'auto',
      marginBottom: '0'
    },
    choice: 'px-md-2 px-1',
    choice_hover: 'text-primary bg-light',
    filterInput: {
      border: '0px',
      height: 'auto',
      boxShadow: 'none',
      padding: '0',
      margin: '0',
      outline: 'none',
      backgroundColor: 'transparent',
      backgroundImage: 'none' // otherwise BS .was-vali<a href="https://www.jqueryscript.net/time-clock/">date</a>d set its image
 
    },
    filterInput_empty: 'form-control',
    // need for placeholder, TODO test form-control-plaintext
    // used in staticContentGenerator
    picks_disabled: {
      backgroundColor: '#e9ecef'
    },
    picks_focus: {
      borderColor: '#80bdff',
      boxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)'
    },
    picks_focus_valid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)'
    },
    picks_focus_invalid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)'
    },
    // used in BsAppearance
    picks_def: {
      minHeight: 'calc(2.25rem + 2px)'
    },
    picks_lg: {
      minHeight: 'calc(2.875rem + 2px)'
    },
    picks_sm: {
      minHeight: 'calc(1.8125rem + 2px)'
    },
    // used in pickContentGenerator
    pick: {
      paddingLeft: '0px',
      lineHeight: '1.5em'
    },
    pickButton: {
      fontSize: '1.5em',
      lineHeight: '.9em',
      float: "none"
    },
    pickContent_disabled: {
      opacity: '.65'
    },
    // used in choiceContentGenerator
    choiceContent: {
      justifyContent: 'initial'
    },
    // BS problem: without this on inline form menu items justified center
    choiceLabel: {
      color: 'inherit'
    },
    // otherwise BS .was-validated set its color
    choiceCheckBox: {
      color: 'inherit'
    },
    choiceLabel_disabled: {
      opacity: '.65'
    }
  }
});

7. You're able to style the plugin using your own CSS without Bootstrap 4.

$("select").bsMultiSelect({
  useCssPatch: false,
  css: {
    choices: 'dropdown-menu',
    // bs4, in bsmultiselect.scss as ul.dropdown-menu
    choice_hover: 'hover',
    //  not bs4, in scss as 'ul.dropdown-menu li.hover'
    choice_selected: '',
    choice_disabled: '',
    picks: 'form-control',
    // bs4, in scss 'ul.form-control'
    picks_focus: 'focus',
    // not bs4, in scss 'ul.form-control.focus'
    picks_disabled: 'disabled',
    //  not bs4, in scss 'ul.form-control.disabled'
    pick_disabled: '',
    pickFilter: '',
    filterInput: '',
    // used in BsPickContentStylingCorrector
    pick: 'badge',
    // bs4
    pickContent: '',
    pickContent_disabled: 'disabled',
    // not bs4, in scss 'ul.form-control li span.disabled'
    pickButton: 'close',
    // bs4
    // used in BsChoiceContentStylingCorrector
    // choice:  'dropdown-item', // it seems like hover should be managed manually since there should be keyboard support
    choiceCheckBox_disabled: 'disabled',
    //  not bs4, in scss as 'ul.form-control li .custom-control-input.disabled ~ .custom-control-label'
    choiceContent: 'custom-control custom-checkbox d-flex',
    // bs4 d-flex required for rtl to align items
    choiceCheckBox: 'custom-control-input',
    // bs4
    choiceLabel: 'custom-control-label justify-content-start',
    choiceLabel_disabled: ''
  }
});

8. Implement it as an ES module.

import Popper from "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.js"
import {BsMultiSelect} from "./dist/js/BsMultiSelect.esm.min.js"
var mySelect = document.querySelector('#select-id');
var environment = {window, Popper};
bsMultiSelect = BsMultiSelect(mySelect, environment, {
  // settings here
});

9. Update changes on the component with the following API methods.

$('select').bsMultiSelect("UpdateIsValid");
$('select').bsMultiSelect("UpdateDisabled");
$('select').bsMultiSelect("UpdateSize");
$('select').bsMultiSelect("UpdateWasValidated");
$('select').bsMultiSelect("UpdateValidy");
$('select').bsMultiSelect("UpdateOptionsSelected", index);
$('select').bsMultiSelect("UpdateOptionDisabled", index);
$('select').bsMultiSelect("UpdateOptionHidden", index);
// or all-in-one
$('select').bsMultiSelect("UpdateAppearance");
$('select').bsMultiSelect("UpdateData");

Changelog:

v1.1.17 (2021-09-02)

  • Bugfix

v1.1.16 (2021-08-25)

  • CSS update

v1.1.15 (2021-07-04)

  • optimizations

v1.1.14 (2021-07-04)

  • scrollIntoView improved

v1.1.13 (2021-06-29)

  • scrollIntoView for ChoicesDynamicStylingPlugin

v1.1.13 (2021-06-28)

  • scrollIntoView for ChoicesDynamicStylingPlugin

v1.1.12 (2021-06-26)

  • Bugfixes.

v1.1.11 (2021-06-25)

  • Bugfixes.

v1.1.8 (2021-06-24)

  • HighlightPlugin, CustomChoiceStylingPlugin, CustomPickStylingPlugin

v1.1.7 (2021-06-20)

  • ChoicesDynamicStylingPlugin

v1.1.6 (2021-06-17)

  • Bugfix

  • Improved 'no result' message.

v1.1.1 (2021-06-08)

  • IE11 set placeholder problem solved

v1.1.0 (2021-06-08)

  • breaking change in DOM generation

v1.0.4 (2021-06-05)

  • breaking change in DOM generation: previous dropdown ul become wrapped to div

v1.0.3 (2021-06-04)

  • problem with padding between picks in rtl solved

v1.0.1/2 (2021-06-03)

  • UMD bundle without jquery support

  • Floating labels (Bootstrap 5 version)

v1.0.0 (2021-05-27)

  • Supports Bootstrap 5

v0.6.27 (2020-08-19)

  • updated

v0.6.27 (2020-08-05)

  • restore compatability with old code

v0.6.25 (2020-07-02)

  • optimizations

v0.6.23 (2020-06-27)

  • optimization

v0.6.22 (2020-06-26)

  • Bugfixed

v0.6.21 (2020-06-25)

  • Bugfixed

v0.6.20 (2020-06-24)

  • Optimization.

v0.6.19 (2020-06-23)

  • Optimization.

v0.6.18 (2020-06-22)

  • Bugfix

v0.6.15 (2020-06-20)

  • Optimized layout api

v0.6.14 (2020-06-19)

  • FilterAspect redesign

v0.6.13 (2020-06-18)

  • Layout redesign

v0.6.12 (2020-06-17)

  • API changes

v0.6.11 (2020-06-16)

  • Bugfix

v0.6.10 (2020-06-15)

  • Bugfix

v0.6.9 (2020-06-13)

  • Optimized

v0.6.8 (2020-06-13)

  • Optimized API

v0.6.7 (2020-06-11)

  • Bugfix

v0.6.5 (2020-06-11)

  • Optimized.

v0.6.4 (2020-06-10)

  • Optimized.

v0.6.3 (2020-06-09)

  • Fixed ReferenceError: adjustLegacySettings is not defined

v0.6.2 (2020-06-08)

  • Updated API

v0.6.0 (2020-06-02)

  • changed API names

v0.5.68 (2020-06-01)

  • optimizations

v0.5.67 (2020-05-31)

  • optimizations

v0.5.66 (2020-05-30)

  • optimizations

v0.5.65 (2020-05-29)

  • Fixed IE11 flex start.

v0.5.64 (2020-05-29)

  • optimizations

v0.5.63 (2020-05-21)

  • optimizations

v0.5.62 (2020-05-20)

  • optimizations

v0.5.61 (2020-05-19)

  • Bug fixed

v0.5.60 (2020-05-18)

  • Bug fixed

v0.5.59 (2020-05-17)

  • Bug fixed

v0.5.58 (2020-05-05)

  • FormRestoreOnBackwardPlugin

v0.5.57 (2020-05-05)

  • optimizations

v0.5.56 (2020-05-04)

  • added Placeholder plugin

v0.5.55 (2020-05-01)

  • optimizations

v0.5.53 (2020-04-30)

  • optimizations

v0.5.52 (2020-04-29)

  • optimizations

v0.5.51 (2020-04-28)

  • optimizations

v0.5.50 (2020-04-26)

  • plugin api available for BsMultiSelect esm module

v0.5.49 (2020-04-25)

  • Added preventOverflow option to popover.

v0.5.48 (2020-04-24)

  • API changed

v0.5.47 (2020-04-22)

  • Bugfix

v0.5.46 (2020-04-21)

  • API changed.

v0.5.45 (2020-04-19)

  • Improvement

v0.5.44 (2020-04-18)

  • alignToFilterInputItemLocation optimized

v0.5.43 (2020-04-17)

  • Fixed flex start on IE11.

v0.5.42 (2020-04-16)

  • optimizations

v0.5.41 (2020-04-15)

  • Changed API - UpdateOptionHidden

  • Bugfixed

v0.5.40 (2020-03-18)

  • Optimization.

v0.5.39 (2020-03-17)

  • Better User Experience.

v0.5.38 (2020-03-16)

  • Bug fixed

v0.5.37 (2020-03-15)

  • Methods updated

v0.5.36 (2020-03-12)

  • Added UpdateOptionInserted method

v0.5.35 (2020-03-11)

  • optimizations

v0.5.34 (2020-03-10)

  • optimizations

v0.5.33 (2020-03-09)

  • optimizations

v0.5.32 (2020-03-08)

  • Added new method UpdateOptionsDisabled

  • Renamed UpdateSelected to UpdateOptionsSelected

v0.5.31 (2020-03-07)

  • Bugfixed

v0.5.30 (2020-03-06)

  • Fixed memory leak bug

v0.5.29 (2020-03-05)

  • Press Enter in the input will open the dropdown

v0.5.28 (2020-03-04)

  • Optimized for filter

v0.5.27 (2020-03-03)

  • Fixed full match issue

v0.5.26 (2020-03-02)

  • optimizations

v0.5.25 (2020-03-01)

  • optimizations

v0.5.24 (2020-02-29)

  • added UpdateSelected API

v0.5.23 (2020-02-28)

  • configs optimized

v0.5.22 (2020-02-27)

  • optimizations

v0.5.21 (2020-02-26)

  • Styling update

v0.5.20 (2020-02-25)

  • Bugfix

v0.5.19 (2020-02-24)

  • optimizations

v0.5.18 (2020-02-24)

  • API updated

v0.5.16 (2020-02-22)

  • Optimization

v0.5.15 (2020-02-21)

  • setSelected will not remove selected attribute

v0.5.14 (2020-02-20)

  • new method UpdateAppearance

v0.5.13 (2020-02-19)

  • BsMultiSelect jQuery prototype can create instance (was only return)

v0.5.12 (2020-02-18)

  • Bugfix

v0.5.11 (2020-02-17)

  • Added GetChoices() method that returns 'dropdown' menu

v0.5.10 (2020-02-12)

  • ES6 module

v0.5.9 (2020-02-12)

  • optimizations

v0.5.8 (2020-02-10)

  • optimizations

v0.5.6/7 (2020-02-09)

  • optimizations

v0.5.5 (2020-02-08)

  • Fixed the styling of dropdown

v0.5.4 (2020-02-06)

  • configuring css/cssPatch, assuming null/undefined value to styles property - the property will be removed from default styles dictionary

v0.5.3 (2020-02-06)

  • justification in dropdown menu for inline form solved

v0.5.2 (2020-02-05)

  • Bugs fixed

v0.5.0 (2020-02-04)

  • updated

v0.4.34beta (2020-01-24)

  • normalized options

  • mem leak solved

  • rtl support

v0.4.33 (2019-12-21)

  • better suport of group-input

v0.4.32 (2019-12-20)

  • getSize, getDisabled, getIsValid, getIsInValid (actual for js-object initiated) are available to setup from configuration

v0.4.31 (2019-12-20)

  • Better padding for sm lg sizes

v0.4.30 (2019-12-19)

  • configuration.setSelected as hook for pre and post selection events

v0.4.29 (2019-12-17)

  • supports form-control-lg/sm

  • supports input-group-lg and input-group-sm (on container)

v0.4.27 (2019-12-17)

  • better look on phone devices

v0.4.26 (2019-12-16)

  • fixed placeholder issues.

v0.4.20 (2019-12-14)

  • placeholder on IE11 looks better

v0.4.19 (2019-12-14)

  • Added placeholder support

v0.4.18 (2019-12-13)

  • "no flick" dom elements instantioning in html;  bootstrap prepend, append; select all and deselect all methods

v0.4.17 (2019-12-11)

  • Supports fieldset

v0.4.10/11/12 (2019-12-08)

  • form reset support

  • removed console output

  • now "GetContainer" returns container div

  • fixed bugs

v0.4.10/11/12 (2019-12-07)

  • uncheck selected error has been solved

  • esc first close the dropdown then modal

v0.4.9 (2019-12-06)

  • small optimizations & bug fix

v0.4.6 (2019-12-03)

  • Bugfix

v0.4.5 (2019-11-28)

  • ESC keydown now processed with preventDefault (to do not duplicate clear text custom functionality)

v0.4.4 (2019-11-27)

  • click inside selected panel doesn't clear the filter input (we have bootrap x for this and ESC button)

v0.4.3 (2019-11-26)

  • Fixed: "two dropdown items can be hovered for a moment" (one by mouse second from keyboard)

v0.4.2 (2019-11-13)

  • configuration API changed; "selected" happens when full text entered

v0.4.1 (2019-11-01)

  • added "buildConfiguration" method

v0.4.0 (2019-10-25)

  • added "buildConfiguration" method

  • id generation for label-input was redesigned once more time (now id is used first, if id is absent then name is used)

  • checkbox without ids from now (js events are used to reference label and checbox, not "for-id" functionality).

v0.3.0 (2019-10-21)

  • configuration object is now named "configuration" (was options)

  • id generation - new ids (btw, id generation can be customized assigning configuration.createCheckBoxId and configuration.createInputId methods)

v0.2.24 (2019-07-28)

  • adding (hardcoded) css foat:none to "cancel" button span (x)  because BS team have added float:rigth to it (why?) in one of newest BS versions; this was the reason that sometimes badge's "x" button moved to new line separately.

v0.2.23 (2019-07-27)

  • support bsMultiSelect on dropdown: click to remove/unselect the item is now processed in setTimout(..,0) this helps filter out close clicks in dropdown's hide event handler (investigate that clicks target was bsMultiSelect and ignore it)

v0.2.22 (2019-04-12)

  • better UX, when only one left in aotosuggestion list - tab and enter select it

2018-10-11

  • height initial -> auto since IE11 doesn't support initial (and node updates)

2018-07-25

  • support BS 4.1.3 fixed height form-control

2018-06-25

  • fix "can select disable"

2018-06-23

  • v0.2.9: Bugfix

2018-06-22

  • v0.2.7

2018-06-20

  • Bugfix

2018-06-13

  • renamed readonly to disabled

2018-06-11

  • dispose for label click return last for value

2018-06-06

  • fixe auto close after selection

  • fix options bug

2018-06-05

  • trigger change on original select

2018-06-02

  • dynamic disabled support

2018-05-31

  • adoptFilterInputLength in clearFilterInput

2018-05-24

  • adoptFilterInputLength in clearFilterInput

2018-05-23

  • v0.1.3: code adjusted by eslint; fixed bug with visible menu selector

2018-05-21

  • v0.1.0

 

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。