Skip to content

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

Indentation and formatting again....

parent e50b62f2
Show whitespace changes
Inline Side-by-side
Showing with 1577 additions and 1582 deletions
README.md
View file @ aefeff49
......@@ -2,8 +2,6 @@
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.
Bootstrap 3 port by [Eduard Dudar](https://github.com/edudar).
## Documentation
Documentation, demonstrations and FAQ: [http://davidstutz.github.com/bootstrap-multiselect/](http://davidstutz.github.com/bootstrap-multiselect/).
......@@ -16,10 +14,14 @@ Every pull request is appreciated. To make it easier for me to merge fixes and n
* Include documentation for new options and features to avoid undocumented features.
* Add a thorough description to every pull request - so I am able to understand the purpose of the pull request.
* Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc. ...).
* Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc. ...) - **a tab should resemble four whitespaces**.
* Add comments to your code - to help me understand the committed code.
* Add a single pull request per fix or feature you add.
## Contributors
For a full list of contributors see [https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors](https://github.com/davidstutz/bootstrap-multiselect/graphs/contributors).
## License
This project is dual licensed under the Apache License, Version 2.0 and the BSD 3-Clause license.
......
index-2-3.html
View file @ aefeff49
......@@ -4,7 +4,6 @@
<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/bootstrap-multiselect.css" type="text/css">
......@@ -76,19 +75,19 @@
&lt;!-- Build your select: --&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;!-- Initialize the plugin: --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect();
});
});
&lt;/script&gt;
</pre>
......@@ -209,6 +208,7 @@
});
});
</script>
<p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
</p>
......@@ -600,7 +600,7 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonText: function(options, select) {
if (options.length == 0) {
......@@ -622,7 +622,7 @@
}
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -633,11 +633,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
numberDisplayed: 4
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -647,13 +647,13 @@
<td>A string that is displayed when no options are selected.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
nonSelectedText: 'You have not selected any options'
});
});
&lt;/script&gt;
});
&lt;/script&gt;
</pre>
</td>
</tr>
......@@ -663,7 +663,7 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&apos;.multiselect&apos;).multiselect({
buttonTitle: function(options, select) {
var selected = &apos;&apos;;
......@@ -673,7 +673,7 @@
return selected.substr(0, selected.length - 2);
},
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -684,11 +684,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn-primary btn-lg&apos;
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -708,11 +708,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonWidth: &apos;300px&apos;
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -725,11 +725,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -740,13 +740,13 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
label: function(element) {
return $(element).html()+&#39; (&#39;+$(element).val()+&#39;)&#39;;
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -757,11 +757,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectedClass: null
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -774,13 +774,13 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;);
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -798,13 +798,13 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
onDropdownShow: function(event) {
alert(&apos;Show event invoked!&apos;);
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -822,13 +822,13 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
onDropdownHide: function(event) {
alert(&apos;Hide event invoked!&apos;);
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -841,11 +841,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
maxHeight: 400
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -858,11 +858,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -875,12 +875,12 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -893,11 +893,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectAllText: true
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -910,11 +910,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectAllValue: 'multiselect-all',
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -927,11 +927,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -944,12 +944,12 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true,
filterBehavior: 'both'
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -962,11 +962,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableCaseInsensitiveFiltering: true
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -979,11 +979,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
filterPlaceholder: &apos;Search&apos;
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -996,11 +996,11 @@
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
dropRight: true
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1059,13 +1059,13 @@ templates: {
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
templates: {
divider: '&lt;div class="divider" data-role="divider"&gt;&lt;/div&gt;'
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1621,6 +1621,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
......@@ -1646,21 +1647,21 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td width="60%">
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$('#example34').multiselect();
$('#example34').multiselect();
$('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes');
});
$('#example34-select').on('click', function() {
$('#example34').multiselect('select', 'cheese');
$('#example34').multiselect('select', 'tomatoes');
});
$('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes');
});
$('#example34-deselect').on('click', function() {
$('#example34').multiselect('deselect', 'cheese');
$('#example34').multiselect('deselect', 'tomatoes');
});
$('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
});
$('#example34-values').on('click', function() {
$('#example34-text').text('Selected: ' + $('#example34').val()).addClass('alert alert-info');
});
&lt;/script&gt;
</pre>
</td>
......@@ -1685,12 +1686,12 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
/**
/**
* Gets whether all the options are selected
* @param {jQuery} $el
* @returns {bool}
*/
function multiselect_selected($el) {
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).prop('selected')) {
......@@ -1698,35 +1699,35 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}
});
return ret;
}
}
/**
/**
* Selects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_selectAll($el) {
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
}
/**
}
/**
* Deselects all the options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_deselectAll($el) {
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
});
}
}
/**
/**
* Clears all the selected options
* @param {jQuery} $el
* @returns {undefined}
*/
function multiselect_toggle($el, $btn) {
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text(&quot;Select All&quot;);
......@@ -1735,15 +1736,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
multiselect_selectAll($el);
$btn.text(&quot;Deselect All&quot;);
}
}
}
$(document).ready(function() {
$(document).ready(function() {
$('#example21').multiselect();
$(&quot;#example21-toggle&quot;).click(function(e) {
e.preventDefault();
multiselect_toggle($(&quot;#example21&quot;), $(this));
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1765,7 +1766,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$('#example22').multiselect({
buttonClass: 'btn',
buttonWidth: 'auto',
......@@ -1798,7 +1799,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1823,7 +1824,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
var firstConfigurationSet = {
includeSelectAllOption: false,
......@@ -1859,7 +1860,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
break;
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1883,7 +1884,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
$('#example37').multiselect({
onChange: function(option, checked) {
// Get selected options.
......@@ -1913,7 +1914,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}
}
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1938,7 +1939,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(document).ready(function() {
var orderCount = 0;
$('#example38').multiselect({
buttonText: function(options) {
......@@ -1956,7 +1957,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
selected.sort(function(a, b) {
return a[1] - b[1];
})
});
var text = '';
for (var i = 0; i < selected.length; i++) {
......@@ -1995,7 +1996,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
alert(text);
});
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -2019,7 +2020,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$('#example40').multiselect({
$('#example40').multiselect({
onChange: function(option, checked) {
var values = [];
$('#example40 option').each(function() {
......@@ -2030,7 +2031,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example40').multiselect('deselect', values);
}
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -2054,7 +2055,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$('#example42').multiselect({
$('#example42').multiselect({
onChange: function(option, checked) {
var selected = 0;
$('option', $('#example42')).each(function() {
......@@ -2067,7 +2068,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example42').siblings('div').children('ul').dropdown('toggle');
}
}
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -2093,7 +2094,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<td>
<pre class="linenums prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
$('#example40').multiselect({
$('#example40').multiselect({
onChange: function(option, checked) {
var values = [];
$('#example40 option').each(function() {
......@@ -2104,7 +2105,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
$('#example40').multiselect('deselect', values);
}
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -2118,6 +2119,7 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p>
For additional styling of the multiselect button, the CSS class <code>multiselect</code> can be used.
</p>
<style media="screen" type="text/css">
.add-styling-1 .multiselect {
width: 500px;
......@@ -2156,7 +2158,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
});
});
</script>
<div>
<table class="table table-striped">
<tr class="add-styling-1">
<td>
......@@ -2217,7 +2218,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</td>
</tr>
</table>
</div>
<div class="page-header">
<h1><a id="faq"></a>Frequently Asked Questions</h1>
......@@ -2244,7 +2244,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
</p>
<p>
<<<<<<< HEAD
<b>How to check whether filtering all options resulted no options being displayed (except the select all option)?</b>
</p>
......@@ -2270,15 +2269,15 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p>
Mainly there are two ways, either add a name to the <code>select</code>:
</p>
<pre class="linenums prettyprint">
<pre class="linenums prettyprint">
&lt;select id="example2" multiple="multiple" name="select[]"&gt;&lt;/select&gt;
</pre>
</pre>
<p>or add an appropriate name to the checkboxes:</p>
<pre class="linenums prettyprint">
<pre class="linenums prettyprint">
$('#example2').multiselect({
checkboxName: 'multiselect[]'
checkboxName: 'multiselect[]'
});
</pre>
</pre>
<p>
<b>How to change the button class depending on the number of selected options?</b>
......
index.html
View file @ aefeff49
......@@ -4,7 +4,6 @@
<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-3.1.1.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
......
js/bootstrap-multiselect.js
View file @ aefeff49
......@@ -5,11 +5,6 @@
* Copyright 2012 - 2014 David Stutz
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*
* 2014.07.17 - Neil Monroe (neil.monroe@gmail.com)
* When updating the button text, target only the main button. This allows
* for additional buttons in templates to remain unaffected. For example, extra
* buttons in the filter template.
*/
!function($) {
......
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