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;}
\ No newline at end of file
.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
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 @@
this.updateButtonText();
this.updateSelectAll();
if (this.options.disableIfEmpty) {
this.disableIfEmpty();
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable();
}
this.$select.hide().after(this.$container);
......@@ -141,8 +141,10 @@
if (options.length === 0) {
return this.nonSelectedText + ' <b class="caret"></b>';
}
else {
if (options.length > this.numberDisplayed) {
else if (options.length == $('option', $(select)).length) {
return this.allSelectedText + ' <b class="caret"></b>';
}
else if (options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText + ' <b class="caret"></b>';
}
else {
......@@ -152,9 +154,9 @@
selected += label + ', ';
});
return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
}
}
},
/**
* Updates the title of the button similar to the buttonText function.
......@@ -228,10 +230,10 @@
},
buttonClass: 'btn btn-default',
dropRight: false,
selectedClass: 'active',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
dropRight: false,
selectedClass: 'active',
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false,
......@@ -246,10 +248,11 @@
filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both'
filterBehavior: 'text',
includeFilterClearBtn: false,
includeFilterClearBtn: true,
preventInputChangeEvent: false,
nonSelectedText: 'None selected',
nSelectedText: 'selected',
allSelectedText: 'All selected',
numberDisplayed: 3,
disableIfEmpty: false,
templates: {
......@@ -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>',
li: '<li><a href="javascript:void(0);"><label></label></a></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 @@
if ($('input[type="text"]', this.$container).is(':focus')) {
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();
}
else {
......@@ -533,13 +534,13 @@
}, this));
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();
var group = $(event.target).parent();
// Search all option in optgroup
var $options = group.nextUntil('li.group');
var $options = group.nextUntil('li.multiselect-group');
// check or uncheck items
var allChecked = true;
......@@ -633,6 +634,10 @@
var $li = $(this.options.templates.liGroup);
$('label', $li).text(groupName);
if (this.options.enableClickableOptGroups) {
$li.addClass('multiselect-group-clickable');
}
this.$ul.append($li);
if ($(group).is(':disabled')) {
......@@ -761,7 +766,7 @@
// Toggle current element (group or group item) according to showElement boolean
$(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
// Differentiate groups and group items
if ($('label', element).hasClass('multiselect-group')) {
if ($(this).hasClass('multiselect-group')) {
// Remember group status
currentGroup = element;
currentGroupVisible = showElement;
......@@ -851,6 +856,10 @@
for (var i = 0; i < selectValues.length; i++) {
var value = selectValues[i];
if (value === null || value === undefined) {
continue;
}
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);
......@@ -902,9 +911,12 @@
}
for (var i = 0; i < deselectValues.length; i++) {
var value = deselectValues[i];
if (value === null || value === undefined) {
continue;
}
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);
......@@ -1019,8 +1031,8 @@
this.updateButtonText();
this.updateSelectAll();
if (this.options.disableIfEmpty) {
this.disableIfEmpty();
if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
this.disable();
}
if (this.options.dropRight) {
......@@ -1112,18 +1124,6 @@
.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.
*
......
less/bootstrap-multiselect.less
View file @ 24553684
......@@ -22,13 +22,17 @@
font-weight: bold;
}
> label.multiselect-group {
&.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
height: 100%;
font-weight: bold;
}
&.multiselect-group-clickable label {
cursor: pointer;
}
> a {
padding: 0;
......@@ -56,10 +60,6 @@
padding: 6px 3px;
}
.filter .btn:hover {
color: red;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
border-top-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