Bootstrap đa lựa chọn có miễn phí không?
Kích thước tập tin. 1. 68 MBLượt xem Tổng cộng. 656072Cập nhật lần cuối. 08/07/2021 01. 35. 00 UTC Ngày Xuất bản. 27/11/2013 12. 52. 39 UTCTrang web chính thức. Tới trang webGiấy phép. MIT Show Tải xuống bản trình diễn Thêm trong danh mục này Xem các plugin được đề xuất TOP 100 Plugin jQuery 2022 Chrome, IE8+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Checkbox#Multiple Select Bootstrap Multiselect là một plugin jQuery dành cho Bootstrap 4 & 3 cho phép khách truy cập chọn nhiều tùy chọn từ danh sách chọn thả xuống có chứa các tùy chọn đơn lẻ dưới dạng hộp kiểm Được cấp phép theo Giấy phép Apache, Phiên bản 2. 0 & Điều khoản 3 BSD. Phiên bản Bootstrap 3 có sẵn tại đây Nhiều tính năng hơn
plugin thay thế
Xem thêm các plugin Multi Select tại
Sử dụng cơ bản1. Bao gồm thư viện javascript jQuery và khung Bootstrap của Twitter trên trang của bạn 2. Bao gồm plugin multiselect jQuery bootstrap trên trang, sau thư viện jQuery 3. Tạo một danh sách lựa chọn tiêu chuẩn 4. Gọi hàm trên phần tử chọn để khởi tạo plugin $(function(){ $('#demo').multiselect(); }); 5. Tất cả các tùy chọn plugin mặc định để tùy chỉnh nhiều lựa chọn $('#demo').multiselect({ // allows HTML content enableHTML: false, // CSS class of the multiselect button buttonClass: 'custom-select', // inherits the class of the button from the original select inheritClass: false, // width of the multiselect button buttonWidth: 'auto', // container that holds both the button as well as the dropdown buttonContainer: '', // places the dropdown on the right side dropRight: false, // places the dropdown on the top dropUp: false, // CSS class of the selected option selectedClass: 'active', // maximum height of the dropdown menu // if maximum height is exceeded a scrollbar will be displayed maxHeight: false, // includes Select All Option includeSelectAllOption: false, // shows the Select All Option if options are more than ... includeSelectAllIfMoreThan: 0, // Lable of Select All selectAllText: ' Select all', // the select all option is added as additional option within the select // o distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option. selectAllValue: 'multiselect-all', // control the name given to the select all option selectAllName: false, // if true, the number of selected options will be shown in parantheses when all options are seleted. selectAllNumber: true, // setting both includeSelectAllOption and enableFiltering to true, the select all option does always select only the visible option // with setting selectAllJustVisible to false this behavior is changed such that always all options (irrespective of whether they are visible) are selected selectAllJustVisible: true, // enables filtering enableFiltering: false, // determines if is case sensitive when filtering enableCaseInsensitiveFiltering: false, // enables full value filtering enableFullValueFiltering: false, // if true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group enableClickableOptGroups: false, // enables collapsible OptGroups enableCollapsibleOptGroups: false, // collapses all OptGroups on init collapseOptGroupsByDefault: false, // placeholder of filter filed filterPlaceholder: 'Search', // possible options: 'text', 'value', 'both' filterBehavior: 'text', // includes clear button inside the filter filed includeFilterClearBtn: true, // prevents input change event preventInputChangeEvent: false, // message to display when no option is selected nonSelectedText: 'None selected', // message to display if more than numberDisplayed options are selected nSelectedText: 'selected', // message to display if all options are selected allSelectedText: 'All selected', // determines if too many options would be displayed numberDisplayed: 3, // disables the multiselect if empty disableIfEmpty: false, // message to display if the multiselect is disabled disabledText: '', // the separator for the list of selected items for mouse-over delimiterText: ', ', // includes Reset Option includeResetOption: false, // includes Rest Divider includeResetDivider: false, // lable of Reset Option resetText: 'Reset', // indent group options indentGroupOptions: true, // possible options: 'never', 'always', 'ifPopupIsSmaller', 'ifPopupIsWider' widthSynchronizationMode: 'never', // text alignment buttonTextAlignment: 'center', // custom templates templates: { button: '', popupContainer: '', filter: ' 6. chức năng gọi lại /** * Default text function will either print 'None selected' in case no * option is selected or a list of the selected options up to a length * of 3 selected options. * * @param {jQuery} options * @param {jQuery} select * @returns {String} */ buttonText: function (options, select) { if (this.disabledText.length > 0 && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) { return this.disabledText; } else if (options.length === 0) { return this.nonSelectedText; } else if (this.allSelectedText && options.length === $('option', $(select)).length && $('option', $(select)).length !== 1 && this.multiple) { if (this.selectAllNumber) { return this.allSelectedText + ' (' + options.length + ')'; } else { return this.allSelectedText; } } else if (this.numberDisplayed != 0 && options.length > this.numberDisplayed) { return options.length + ' ' + this.nSelectedText; } else { var selected = ''; var delimiter = this.delimiterText; options.each(function () { var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); selected += label + delimiter; }); return selected.substr(0, selected.length - this.delimiterText.length); } }, /** * Updates the title of the button similar to the buttonText function. * * @param {jQuery} options * @param {jQuery} select * @returns {@exp;[email protected];substr} */ buttonTitle: function (options, select) { if (options.length === 0) { return this.nonSelectedText; } else { var selected = ''; var delimiter = this.delimiterText; options.each(function () { var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); selected += label + delimiter; }); return selected.substr(0, selected.length - this.delimiterText.length); } }, checkboxName: function (option) { return false; // no checkbox name }, /** * Create a label. * * @param {jQuery} element * @returns {String} */ optionLabel: function (element) { return $(element).attr('label') || $(element).text(); }, /** * Create a class. * * @param {jQuery} element * @returns {String} */ optionClass: function (element) { return $(element).attr('class') || ''; }, /** * Triggered on change of the multiselect. * * Not triggered when selecting/deselecting options manually. * * @param {jQuery} option * @param {Boolean} checked */ onChange: function (option, checked) { }, /** * Triggered when the dropdown is shown. * * @param {jQuery} event */ onDropdownShow: function (event) { }, /** * Triggered when the dropdown is hidden. * * @param {jQuery} event */ onDropdownHide: function (event) { }, /** * Triggered after the dropdown is shown. * * @param {jQuery} event */ onDropdownShown: function (event) { }, /** * Triggered after the dropdown is hidden. * * @param {jQuery} event */ onDropdownHidden: function (event) { }, /** * Triggered on select all. */ onSelectAll: function () { }, /** * Triggered on deselect all. */ onDeselectAll: function () { }, /** * Triggered after initializing. * * @param {jQuery} $select * @param {jQuery} $container */ onInitialized: function ($select, $container) { }, /** * Triggered on filtering. * * @param {jQuery} $filter */ onFiltering: function ($filter) { }, 7. phương pháp API // destroy the instance $('#demo').multiselect('destroy'); // refresh the checked checkboxes based on the currently selected options $('#demo').multiselect('refresh'); // rebuild the instance $('#demo').multiselect('rebuild'); // select an option $('#demo').multiselect('select', value); // deselect an option $('#demo').multiselect('deselect', value); // select all options $('#demo').multiselect('selectAll', justVisible); // deselect all options $('#demo').multiselect('deselectAll', justVisible); // update the text and title of the button $('#demo').multiselect('updateButtonText'); // update options $('#demo').multiselect('setOptions', options); // enable/disable the multiselect $('#demo').multiselect('disable'); $('#demo').multiselect('enable'); /* provide options programmatically var data = [ {label: 'Option 1', title: 'Option 1', value: '1', selected: true}, {label: 'Option 2', title: 'Option 2', value: '2'}, {label: 'Option 3', title: 'Option 3', value: '3', selected: true} ]; */ $('#demo').multiselect('dataprovider', data); // programmatically provide a new text to display in the button when all options are selected, at runtime $('#demo').multiselect('setAllSelectedText', value); Nhật ký thay đổiv1. 1. 1 (2021-08-07)
v1. 1. 0 (2021-07-30)
2020-12-22
v1. 0. 0 (2020-11-18)
2020-11-01
2018-03-04
2018-01-03
2017-12-18
2016-08-18
2016-07-30
2016-07-29
23-07-2016
2016-04-23
21-04-2016
2016-04-20
2016-04-18
v0. 9. 13 (15-10-2015)
2015-05-27
2015-04-12
2015-03-18
2015-03-01
2015-02-17
2015-02-14
2015-02-13
2014-11-02
2014-10-13
2014-08-08
2014-08-03
2014-07-15
2014-05-24
2014-04-02
2014-04-01
2014-03-31
2014-03-13
2014-03-12
2014-02-07
2014-01-09
2013-12-10
Plugin jQuery tuyệt vời này được phát triển bởi davidstutz. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức |