Skip to content

B
bootstrap-multiselect
Commit 24553684 authored by David Stutz's avatar David Stutz
Browse files
Options

Updated documentation. In short: #380, #365, #381, #377, #385, #384, #388,... 

Updated documentation. In short: #380, #365, #381, #377, #385, #384, #388, #302, #305, #391, #374, #397, #400, #375, #383, #301, #382, #386, #387, #404.
parent ddd2fe8a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3091 additions and 2555 deletions
css/bootstrap-3.2.0.min.css 0 → 100644
View file @ 24553684
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap-affix.css 0 → 100644
View file @ 24553684
.affix,.affix-top{margin-top:60px}
\ No newline at end of file
css/bootstrap-example.css 0 → 100644
View file @ 24553684
.example{position:relative;padding:45px 15px 15px;margin:0 -15px 15px;background-color:#fafafa;box-shadow:inset 0 3px 6px rgba(0,0,0,.05);border-color:#e5e5e5 #eee #eee;border-style:solid;border-width:1px 0}.example:after{content:"Example";position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:1px}.example+.highlight{margin:-15px -15px 15px;border-radius:0;border-width:0 0 1px}@media (min-width:768px){.example{margin-left:0;margin-right:0;background-color:#fff;border-width:1px;border-color:#ddd;border-radius:4px 4px 0 0;box-shadow:none}.example+.highlight{margin-top:-16px;margin-left:0;margin-right:0;border-width:1px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}}.example>.btn,.example>.btn-group{margin-top:5px;margin-bottom:5px}
\ No newline at end of file
css/bootstrap-multiselect.css
View file @ 24553684
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li>label.multiselect-group{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} .multiselect-container .filter .btn{padding: 6px 3px;} .multiselect-container .filter .btn:hover{color: red;} .multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.filter .btn{padding:6px 3px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
\ No newline at end of file \ No newline at end of file
index.html
View file @ 24553684
This diff is collapsed.
js/bootstrap-3.2.0.min.js 0 → 100644
View file @ 24553684
This diff is collapsed.
js/bootstrap-multiselect.js
View file @ 24553684
...@@ -118,8 +118,8 @@ ...@@ -118,8 +118,8 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.disableIfEmpty) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disableIfEmpty(); this.disable();
} }
this.$select.hide().after(this.$container); this.$select.hide().after(this.$container);
...@@ -141,8 +141,10 @@ ...@@ -141,8 +141,10 @@
if (options.length === 0) { if (options.length === 0) {
return this.nonSelectedText + ' <b class="caret"></b>'; return this.nonSelectedText + ' <b class="caret"></b>';
} }
else { else if (options.length == $('option', $(select)).length) {
if (options.length > this.numberDisplayed) { return this.allSelectedText + ' <b class="caret"></b>';
}
else if (options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>'; return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>';
} }
else { else {
...@@ -152,9 +154,9 @@ ...@@ -152,9 +154,9 @@
selected += label + ', '; selected += label + ', ';
}); });
return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>'; return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
} }
}
}, },
/** /**
* Updates the title of the button similar to the buttonText function. * Updates the title of the button similar to the buttonText function.
...@@ -228,10 +230,10 @@ ...@@ -228,10 +230,10 @@
}, },
buttonClass: 'btn btn-default', buttonClass: 'btn btn-default',
dropRight: false,
selectedClass: 'active',
buttonWidth: 'auto', buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />', buttonContainer: '<div class="btn-group" />',
dropRight: false,
selectedClass: 'active',
// Maximum height of the dropdown menu. // Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false, maxHeight: false,
...@@ -246,10 +248,11 @@ ...@@ -246,10 +248,11 @@
filterPlaceholder: 'Search', filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both' // possible options: 'text', 'value', 'both'
filterBehavior: 'text', filterBehavior: 'text',
includeFilterClearBtn: false, includeFilterClearBtn: true,
preventInputChangeEvent: false, preventInputChangeEvent: false,
nonSelectedText: 'None selected', nonSelectedText: 'None selected',
nSelectedText: 'selected', nSelectedText: 'selected',
allSelectedText: 'All selected',
numberDisplayed: 3, numberDisplayed: 3,
disableIfEmpty: false, disableIfEmpty: false,
templates: { templates: {
...@@ -259,7 +262,7 @@ ...@@ -259,7 +262,7 @@
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>', filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
li: '<li><a href="javascript:void(0);"><label></label></a></li>', li: '<li><a href="javascript:void(0);"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>', divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item group"><label class="multiselect-group"></label></li>' liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
} }
}, },
...@@ -490,10 +493,8 @@ ...@@ -490,10 +493,8 @@
if ($('input[type="text"]', this.$container).is(':focus')) { if ($('input[type="text"]', this.$container).is(':focus')) {
return; return;
} }
if ((event.keyCode === 9 || event.keyCode === 27)
&& this.$container.hasClass('open')) {
// Close on tab or escape. if (event.keyCode === 9 && this.$container.hasClass('open')) {
this.$button.click(); this.$button.click();
} }
else { else {
...@@ -533,13 +534,13 @@ ...@@ -533,13 +534,13 @@
}, this)); }, this));
if(this.options.enableClickableOptGroups && this.options.multiple) { if(this.options.enableClickableOptGroups && this.options.multiple) {
$('li.group', this.$ul).on('click', $.proxy(function(event) { $('li.multiselect-group', this.$ul).on('click', $.proxy(function(event) {
event.stopPropagation(); event.stopPropagation();
var group = $(event.target).parent(); var group = $(event.target).parent();
// Search all option in optgroup // Search all option in optgroup
var $options = group.nextUntil('li.group'); var $options = group.nextUntil('li.multiselect-group');
// check or uncheck items // check or uncheck items
var allChecked = true; var allChecked = true;
...@@ -633,6 +634,10 @@ ...@@ -633,6 +634,10 @@
var $li = $(this.options.templates.liGroup); var $li = $(this.options.templates.liGroup);
$('label', $li).text(groupName); $('label', $li).text(groupName);
if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable');
}
this.$ul.append($li); this.$ul.append($li);
if ($(group).is(':disabled')) { if ($(group).is(':disabled')) {
...@@ -761,7 +766,7 @@ ...@@ -761,7 +766,7 @@
// Toggle current element (group or group item) according to showElement boolean // Toggle current element (group or group item) according to showElement boolean
$(element).toggle(showElement).toggleClass('filter-hidden', !showElement); $(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
// Differentiate groups and group items // Differentiate groups and group items
if ($('label', element).hasClass('multiselect-group')) { if ($(this).hasClass('multiselect-group')) {
// Remember group status // Remember group status
currentGroup = element; currentGroup = element;
currentGroupVisible = showElement; currentGroupVisible = showElement;
...@@ -851,6 +856,10 @@ ...@@ -851,6 +856,10 @@
for (var i = 0; i < selectValues.length; i++) { for (var i = 0; i < selectValues.length; i++) {
var value = selectValues[i]; var value = selectValues[i];
if (value === null || value === undefined) {
continue;
}
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
...@@ -902,9 +911,12 @@ ...@@ -902,9 +911,12 @@
} }
for (var i = 0; i < deselectValues.length; i++) { for (var i = 0; i < deselectValues.length; i++) {
var value = deselectValues[i]; var value = deselectValues[i];
if (value === null || value === undefined) {
continue;
}
var $option = this.getOptionByValue(value); var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value); var $checkbox = this.getInputByValue(value);
...@@ -1019,8 +1031,8 @@ ...@@ -1019,8 +1031,8 @@
this.updateButtonText(); this.updateButtonText();
this.updateSelectAll(); this.updateSelectAll();
if (this.options.disableIfEmpty) { if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disableIfEmpty(); this.disable();
} }
if (this.options.dropRight) { if (this.options.dropRight) {
...@@ -1112,18 +1124,6 @@ ...@@ -1112,18 +1124,6 @@
.addClass('disabled'); .addClass('disabled');
}, },
/**
* Disable the multiselect if there are no options in the select.
*/
disableIfEmpty: function () {
if ($('option', this.$select).length <= 0) {
this.disable();
}
else {
this.enable();
}
},
/** /**
* Set the options. * Set the options.
* *
......
less/bootstrap-multiselect.less
View file @ 24553684
...@@ -22,13 +22,17 @@ ...@@ -22,13 +22,17 @@
font-weight: bold; font-weight: bold;
} }
> label.multiselect-group { &.multiselect-group label {
margin: 0; margin: 0;
padding: 3px 20px 3px 20px; padding: 3px 20px 3px 20px;
height: 100%; height: 100%;
font-weight: bold; font-weight: bold;
} }
&.multiselect-group-clickable label {
cursor: pointer;
}
> a { > a {
padding: 0; padding: 0;
...@@ -56,10 +60,6 @@ ...@@ -56,10 +60,6 @@
padding: 6px 3px; padding: 6px 3px;
} }
.filter .btn:hover {
color: red;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn { .btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment