Skip to content

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

Fixed bug with bootstrap tabs. 

Bootstrap multiselect and tabs will now work on the same page.
parent 4eaa63b5
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 135 deletions
js/bootstrap-multiselect.js
View file @ aca02c24
/** /**
* bootstrap-multiselect.js 1.0.0 * bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect * https://github.com/davidstutz/bootstrap-multiselect
* *
* Copyright 2012 David Stutz * Copyright 2012 David Stutz
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
!function ($) { !function ($) {
"use strict"; // jshint ;_; "use strict"; // jshint ;_;
function Multiselect(select, options) { function Multiselect(select, options) {
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.select = $(select); this.select = $(select);
this.container = $(this.options.container) this.container = $(this.options.container)
.append('<button style="width:' + this.options.width + '" class="dropdown-toggle ' + this.options.button + '" data-toggle="dropdown">' + this.options.text($('option:selected', select)) + ' <b class="caret"></b></button>') .append('<button style="width:' + this.options.width + '" class="dropdown-toggle ' + this.options.button + '" data-toggle="dropdown">' + this.options.text($('option:selected', select)) + ' <b class="caret"></b></button>')
.append('<ul class="dropdown-menu"></ul>'); .append('<ul class="dropdown-menu"></ul>');
// Manually add the multiple attribute, if its not already set. // Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) { if (!this.select.attr('multiple')) {
this.select.attr('multiple', true); this.select.attr('multiple', true);
} }
// Build the dropdown. // Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) { $('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$(element).attr('selected', true); $(element).attr('selected', true);
} }
$('ul', this.container).append('<li><a href="#" style="padding:0;"><label style="margin:0;padding: 3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>'); $('ul', this.container).append('<li><a href="#" style="padding:0;"><label style="margin:0;padding: 3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).attr('selected') || false; var selected = $(element).attr('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.attr('checked', selected); checkbox.attr('checked', selected);
if (selected) { if (selected) {
checkbox.parents('li').addClass('active'); checkbox.parents('li').addClass('active');
} }
}, this)); }, this));
this.select.hide() this.select.hide()
.after(this.container); .after(this.container);
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) { $('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
var checked = $(event.target).attr('checked') || false; var checked = $(event.target).attr('checked') || false;
if (checked) { if (checked) {
$(event.target).parents('li').addClass('active'); $(event.target).parents('li').addClass('active');
} }
else { else {
$(event.target).parents('li').removeClass('active'); $(event.target).parents('li').removeClass('active');
} }
$('option[value="' + $(event.target).val() + '"]', this.select).attr('selected', checked); $('option[value="' + $(event.target).val() + '"]', this.select).attr('selected', checked);
$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>'); $('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>');
}, this)); }, this));
$('ul li a').on('click', function(event) { $('ul li a', this.container).on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
}; };
Multiselect.prototype = { Multiselect.prototype = {
defaults: { defaults: {
button: 'btn', button: 'btn',
width: 'auto', width: 'auto',
// Default text function will either print 'None selected' in case no option is selected, // 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. // or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed. // If more than 3 options are selected, the number of selected options is printed.
text: function(options) { text: function(options) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected'; return 'None selected';
} }
else if (options.length > 3) { else if (options.length > 3) {
return options.length + ' selected'; return options.length + ' selected';
} }
else { else {
var selected = ''; var selected = '';
options.each(function() { options.each(function() {
selected += $(this).text() + ', '; selected += $(this).text() + ', ';
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2);
} }
}, },
container: '<div class="btn-group" />', container: '<div class="btn-group" />',
}, },
constructor: Multiselect, constructor: Multiselect,
reset: function() { reset: function() {
}, },
// Destroy - unbind - the plugin. // Destroy - unbind - the plugin.
destroy: function() { destroy: function() {
this.container.remove(); this.container.remove();
this.select.show(); this.select.show();
}, },
// Get options by merging defaults and given options. // Get options by merging defaults and given options.
getOptions: function(options) { getOptions: function(options) {
return $.extend({}, this.defaults, options); return $.extend({}, this.defaults, options);
} }
}; };
$.fn.multiselect = function (option) { $.fn.multiselect = function (option) {
return this.each(function () { return this.each(function () {
var data = $(this).data('multiselect'), var data = $(this).data('multiselect'),
options = typeof option == 'object' && option; options = typeof option == 'object' && option;
if (!data) { if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options))); $(this).data('multiselect', (data = new Multiselect(this, options)));
} }
if (typeof option == 'string') { if (typeof option == 'string') {
data[option](); data[option]();
} }
}); });
} }
}(window.jQuery); }(window.jQuery);
\ No newline at end of file
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