Skip to content

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

Updated license: dual licensed with Apache 2 and BSD 3-Clause. Fixed issues... 

Updated license: dual licensed with Apache 2 and BSD 3-Clause. Fixed issues with doubling "select all" options by using rebuild. Added buttonTitle option, see #138.
parent e439de8e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 403 deletions
.gitignore
View file @ ffc5a47f
# Project files.
*.project
.idea/
\ No newline at end of file
.idea/
nbproject/
\ No newline at end of file
README.md
View file @ ffc5a47f
......@@ -63,7 +63,23 @@ Defining the text of the button. Must be a function returning a string. All curr
},
});
});
**buttonTitle**
Defining the title text of the button. Similar to the `buttonText` option:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonTitle: function(options, select) {
var selected = '';
options.each(function () {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length - 2);
},
});
});
**buttonContainer**
The used container holding both the dropdown button and the dropdown menu.
......@@ -206,6 +222,10 @@ Thanks to [@robwesterlund](https://twitter.com/robwesterlund) for the hint :)
## License
This project is dual licensed under the Apache License, Version 2.0 and the BSD 3-Clause license.
### Apache License, Version 2.0
Copyright 2012, 2013 David Stutz
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
......@@ -213,3 +233,16 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
[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 distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
### BSD 3-Clause License
Copyright (c) 2012, 2013 David Stutz
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of the <ORGANIZATION> nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
beta.html deleted 100644 → 0
View file @ e439de8e
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="David Stutz" />
<link rel="stylesheet" href="css/bootstrap-2.3.2.min.css" type="text/css">
<link rel="stylesheet" href="css/prettify.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.beta.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<style>
.multiselect-all label {
font-weight: bold;
}
</style>
</head>
<body>
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="container-fluid" style="background:#F5F5F5;border-bottom:1px solid #DDDDDD;margin-bottom:16px;">
<div style="text-align:center;">
<h1 style="font-size:300%;margin: 26px 0px;">Bootstrap Multiselect</h1>
<p class="lead">
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
</div>
<div class="container">
<script type="text/javascript">
$(document).ready(function() {
$('#example').multiselect();
});
</script>
<select id="example">
<optgroup label="1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="2">
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="3">
<option value="5">5</option>
<option value="6">6</option>
</optgroup>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="container-fluid">
<hr>
<p>
&copy; 2012, 2013
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
</p>
</div>
</body>
</html>
index.html
View file @ ffc5a47f
......@@ -1024,6 +1024,27 @@
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>buttonTitle</code></td>
<td>Function defining the title of the button. Similar to the <code>buttonText</code> option.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&apos;.multiselect&apos;).multiselect({
buttonTitle: function(options, select) {
var selected = &apos;&apos;;
options.each(function () {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length - 2);
},
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1357,7 +1378,7 @@
<hr>
<p>
&copy; 2012, 2013
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
<a href="http://davidstutz.de">David Stutz</a> - dual licensed: <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>, <a href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause License</a>
</p>
</div>
</body>
......
js/bootstrap-multiselect.beta.js deleted 100644 → 0
View file @ e439de8e
/**
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!function ($) {
"use strict"; // jshint ;_;
/**
* Constructor.
*
* The constructor builds the dropdown and assigns event handling.
*
* @param object select
* @param object options
*/
function Multiselect(select, config) {
// Reference the current instance so proxy is not needed.
var self = this;
// Configuration is saved as config, so the plugin "configuration" and select "options" can be distinguished.
self.config = self.mergeConfig(config);
// The select options are saved in an internal data structure, which can be updated by refreh.
self.options = $('> optgroup, > option', $(select))
console.log(this.options);
// Save the select for refreshing the options later on.
self.select = select;
var ul = $('<ul class="dropdown-menu" role="dropdown"></ul>');
function buildLiFromOption(option) {
var label = $(option).attr('label') || $(option).text();
var value = $(option).val();
return $('<li><a href="#"><input type="checkbox" value="' + value + '" />' + label + '</a></li>');
}
// Now build up the dropdown list using checkboxes and labels.
$.each(self.options, function(index, element) {
var tag = $(element).prop('tagName');
if (tag.toLowerCase() == 'optgroup') {
$('> option', element).each(function() {
ul.append(buildLiFromOption(this));
});
}
else if (tag.toLowerCase() == 'option') {
ul.append(buildLiFromOption(element));
}
});
var container = $('<div class="dropdown"><button class="btn dropdown-toggle" data-toggle="dropdown">open</button></div>');
container.append(ul);
$(self.select).after(container);
$('> li > a').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
$('> li > a > checkbox', ul).on('click', function(event) {
console.log($(this).val());
this.select($(this).val());
});
};
Multiselect.prototype = {
/**
* @property object default options
*/
defaults: {
},
constructor: Multiselect,
/**
* Select the option represented by the given value.
*
* @param string value
*/
select: function(value) {
},
/**
* Deselect the option represented by the value.
*
* @param string value
*/
deselect: function(value) {
},
/**
* Destroy/unbind the plugin.
*/
destroy: function() {
},
/**
* Refresh the options.
*/
refresh: function() {
},
/**
* Get the selected options.
*
* @return selected
*/
selected: function() {
},
/**
* Get all deselected options
*
* @return deselected
*/
deselected: function() {
},
/**
* Merge the given and the default configuration options.
*
* @param object options
*/
mergeConfig: function(config) {
return $.extend({}, this.defaults, config);
},
};
$.fn.multiselect = function(option, parameter) {
return this.each(function() {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
// Initialize the multiselect.
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
// Call multiselect method.
if (typeof option == 'string') {
data[option](parameter);
}
});
};
$.fn.multiselect.Constructor = Multiselect;
$(function() {
$('select[data-role=multiselect]').multiselect();
});
}(window.jQuery);
js/bootstrap-multiselect.js
View file @ ffc5a47f
......@@ -2,19 +2,10 @@
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* Copyright 2012, 2013 David Stutz
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
* See the README.
*/
!function($) {"use strict";// jshint ;_;
......@@ -70,7 +61,9 @@
if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {
this.buildFilter();
}
// Build select all if enabled.
this.buildSelectAll();
this.buildDropdown();
this.updateButtonText();
......@@ -79,11 +72,11 @@
Multiselect.prototype = {
defaults : {
defaults: {
// 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.
// If more than 3 options are selected, the number of selected options is printed.
buttonText : function(options, select) {
buttonText: function(options, select) {
if (options.length == 0) {
return this.nonSelectedText + '<b class="caret"></b>';
}
......@@ -101,35 +94,43 @@
return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
}
},
// Like the buttonText option to update the title of the button.
buttonTitle: function(options, select) {
var selected = '';
options.each(function () {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length - 2);
},
// Is triggered on change of the selected options.
onChange : function(option, checked) {
},
buttonClass : 'btn',
dropRight : false,
selectedClass : 'active',
buttonWidth : 'auto',
buttonContainer : '<div class="btn-group" />',
buttonClass: 'btn',
dropRight: false,
selectedClass: 'active',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight : false,
includeSelectAllOption : false,
selectAllText : ' Select all',
selectAllValue : 'multiselect-all',
enableFiltering : false,
enableCaseInsensitiveFiltering : false,
filterPlaceholder : 'Search',
maxHeight: false,
includeSelectAllOption: false,
selectAllText: ' Select all',
selectAllValue: 'multiselect-all',
enableFiltering: false,
enableCaseInsensitiveFiltering: false,
filterPlaceholder: 'Search',
// possible options: 'text', 'value', 'both'
filterBehavior : 'text',
filterBehavior: 'text',
preventInputChangeEvent: false,
nonSelectedText: 'None selected',
nSelectedText: 'selected'
},
constructor : Multiselect,
constructor: Multiselect,
// Will build an dropdown element for the given option.
createOptionValue : function(element) {
createOptionValue: function(element) {
if ($(element).is(':selected')) {
$(element).attr('selected', 'selected').prop('selected', true);
}
......@@ -164,7 +165,7 @@
}
},
toggleActiveState : function(shouldBeActive) {
toggleActiveState: function(shouldBeActive) {
if (this.$select.attr('disabled') == undefined) {
$('button.multiselect.dropdown-toggle', this.$container).removeClass('disabled');
}
......@@ -173,16 +174,18 @@
}
},
// Build the dropdown and bind event handling.
buildDropdown : function() {
// Add the select all option to the select.
buildSelectAll: function() {
var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == this.options.selectAllValue : false;
// If options.includeSelectAllOption === true, add the include all
// checkbox.
// If options.includeSelectAllOption === true, add the include all checkbox.
if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) {
this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>');
}
},
// Build the dropdown and bind event handling.
buildDropdown: function() {
this.toggleActiveState();
this.$select.children().each($.proxy(function(index, element) {
......@@ -394,13 +397,13 @@
},
// Destroy - unbind - the plugin.
destroy : function() {
destroy: function() {
this.$container.remove();
this.$select.show();
},
// Refreshs the checked options based on the current state of the select.
refresh : function() {
refresh: function() {
$('option', this.$select).each($.proxy(function(index, element) {
var $input = $('.multiselect-container li input', this.$container).filter(function() {
return $(this).val() == $(element).val();
......@@ -433,7 +436,7 @@
},
// Select an option by its value.
select : function(value) {
select: function(value) {
var $option = $('option', this.$select).filter(function() {
return $(this).val() == value;
});
......@@ -454,7 +457,7 @@
},
// Deselect an option by its value.
deselect : function(value) {
deselect: function(value) {
var $option = $('option', this.$select).filter(function() {
return $(this).val() == value;
});
......@@ -475,7 +478,7 @@
},
// Rebuild the whole dropdown menu.
rebuild : function() {
rebuild: function() {
$('.multiselect-container', this.$container).html('');
this.buildDropdown(this.$select, this.options);
this.updateButtonText();
......@@ -487,25 +490,31 @@
},
// Get options by merging defaults and given options.
getOptions : function(options) {
getOptions: function(options) {
return $.extend({}, this.defaults, options);
},
updateButtonText : function() {
updateButtonText: function() {
var options = this.getSelected();
// First update the displayed button text.
$('button', this.$container).html(this.options.buttonText(options, this.$select));
// Now update the title attribute of the button.
$('button', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
},
// Get all selected options.
getSelected : function() {
getSelected: function() {
return $('option:selected[value!="' + this.options.selectAllValue + '"]', this.$select);
},
updateOriginalOptions : function() {
updateOriginalOptions: function() {
this.originalOptions = this.$select.clone()[0].options;
},
asyncFunction : function(callback, timeout, self) {
asyncFunction: function(callback, timeout, self) {
var args = Array.prototype.slice.call(arguments, 3);
return setTimeout(function() {
callback.apply(self || window, args);
......
js/knockout-2.3.0.js 0 → 100644
View file @ ffc5a47f
This diff is collapsed.
knockout-examples.html
View file @ ffc5a47f
This diff is collapsed.
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