Skip to content

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

Updated documentation/README. Cosmetics. 

Updated documentation: includeSelectAll, selectAllText, selectedClass,
enabledFiltering and filterPlaceholder options. Updated the README.
moved the filter initialization to the buildDropdown method. The rebuild
method has to remove the search field, too, otherwise it will be
duplicated.
parent cbc25723
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 595 deletions
README.md
View file @ 67eb61ef
...@@ -188,6 +188,10 @@ The used container holding both the dropdown button and the dropdown menu. ...@@ -188,6 +188,10 @@ The used container holding both the dropdown button and the dropdown menu.
}); });
}); });
**selectedClass**
The class applied to the parent `<li>` of selected items. Default: active.
**dropRight** **dropRight**
Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false. Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false.
...@@ -196,6 +200,10 @@ Define if the menu should drop to the right of the button or not, by adding `pul ...@@ -196,6 +200,10 @@ Define if the menu should drop to the right of the button or not, by adding `pul
Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false. Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false.
**selectAllText**
Defines the label of the select all option.
**enableFiltering** **enableFiltering**
Define if a text input should be created to filter results. Note that 'select all' option will select all **FILTERED** options. Default is false. Define if a text input should be created to filter results. Note that 'select all' option will select all **FILTERED** options. Default is false.
...@@ -252,7 +260,7 @@ Deselects an option by its value. ...@@ -252,7 +260,7 @@ Deselects an option by its value.
## Additional Styling ## Additional Styling
Additional Styling can be done using the multiselect class: Additional Styling can be done using the following classes:
.multiselect { .multiselect {
text-align: left; text-align: left;
...@@ -260,8 +268,19 @@ Additional Styling can be done using the multiselect class: ...@@ -260,8 +268,19 @@ Additional Styling can be done using the multiselect class:
.multiselect b.caret { .multiselect b.caret {
float: right; float: right;
} }
.multiselect-group {
font-weight: bold;
text-decoration: underline;
}
.multiselect-all label {
font-weight: bold;
}
.multiselect-search {
color: red;
}
## Usage via data attributes ## Usage via Data Attributes
To hook up the control via data attributes, add the `data-role="multiselect"` attribute to your `<select>`. All selects with that attribute will be automatically wired up on jQuery load. To hook up the control via data attributes, add the `data-role="multiselect"` attribute to your `<select>`. All selects with that attribute will be automatically wired up on jQuery load.
...@@ -287,10 +306,6 @@ Thanks to [@robwesterlund](https://twitter.com/robwesterlund) for the hint :) ...@@ -287,10 +306,6 @@ Thanks to [@robwesterlund](https://twitter.com/robwesterlund) for the hint :)
> **@robwesterlund** - *@luisrudge The reason is that the multiselect plugin works on the option elements which are in the DOM. However, if you place your bindingHandler before the options bindingHandler, there won't be any option elements in the DOM when you call the multiselect plugin.* > **@robwesterlund** - *@luisrudge The reason is that the multiselect plugin works on the option elements which are in the DOM. However, if you place your bindingHandler before the options bindingHandler, there won't be any option elements in the DOM when you call the multiselect plugin.*
## Roadmap / Todo
* This solution for multiple selects is not usable for mobile devices (especially with touchscreen). ALternatives: Using Popovers instead of Dropdowns or checking for mobile devices and displaying normal select field (one row) for mobile devices.
## License ## License
Copyright 2012 David Stutz Copyright 2012 David Stutz
......
index.html
View file @ 67eb61ef
...@@ -15,14 +15,16 @@ ...@@ -15,14 +15,16 @@
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/prettify.js"></script> <script type="text/javascript" src="js/prettify.js"></script>
<style> <style>
.select-all-option label { font-weight: bold; } .multiselect-all label {
font-weight: bold;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<script> <script>
$('.dropdown input, .dropdown label').click(function (e) { $('.dropdown input, .dropdown label').click(function (event) {
e.stopPropagation(); event.stopPropagation();
}); });
</script> </script>
<div class="hero-unit"> <div class="hero-unit">
...@@ -111,11 +113,24 @@ ...@@ -111,11 +113,24 @@
$('#example24').multiselect(); $('#example24').multiselect();
$('#example25').multiselect({ dropRight: true }); $('#example25').multiselect({
dropRight: true
});
$('#example27').multiselect({
includeSelectAllOption: true
});
$('#example27').multiselect({ includeSelectAllOption: true }); // Add options for example 28.
for (var i = 1; i <= 500; i++) {
$('#example28').append('<option value="' + i + '">' + i + '</option>');
}
$('#example28').multiselect({ includeSelectAllOption: true, enableFiltering: true, maxHeight: 150 }); $('#example28').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
maxHeight: 150
});
}); });
</script> </script>
<p> <p>
...@@ -169,512 +184,10 @@ ...@@ -169,512 +184,10 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<select id="example28" multiple="multiple"> <select id="example28" multiple="multiple"></select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
<option value="101">101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
<option value="105">105</option>
<option value="106">106</option>
<option value="107">107</option>
<option value="108">108</option>
<option value="109">109</option>
<option value="110">110</option>
<option value="111">111</option>
<option value="112">112</option>
<option value="113">113</option>
<option value="114">114</option>
<option value="115">115</option>
<option value="116">116</option>
<option value="117">117</option>
<option value="118">118</option>
<option value="119">119</option>
<option value="120">120</option>
<option value="121">121</option>
<option value="122">122</option>
<option value="123">123</option>
<option value="124">124</option>
<option value="125">125</option>
<option value="126">126</option>
<option value="127">127</option>
<option value="128">128</option>
<option value="129">129</option>
<option value="130">130</option>
<option value="131">131</option>
<option value="132">132</option>
<option value="133">133</option>
<option value="134">134</option>
<option value="135">135</option>
<option value="136">136</option>
<option value="137">137</option>
<option value="138">138</option>
<option value="139">139</option>
<option value="140">140</option>
<option value="141">141</option>
<option value="142">142</option>
<option value="143">143</option>
<option value="144">144</option>
<option value="145">145</option>
<option value="146">146</option>
<option value="147">147</option>
<option value="148">148</option>
<option value="149">149</option>
<option value="150">150</option>
<option value="151">151</option>
<option value="152">152</option>
<option value="153">153</option>
<option value="154">154</option>
<option value="155">155</option>
<option value="156">156</option>
<option value="157">157</option>
<option value="158">158</option>
<option value="159">159</option>
<option value="160">160</option>
<option value="161">161</option>
<option value="162">162</option>
<option value="163">163</option>
<option value="164">164</option>
<option value="165">165</option>
<option value="166">166</option>
<option value="167">167</option>
<option value="168">168</option>
<option value="169">169</option>
<option value="170">170</option>
<option value="171">171</option>
<option value="172">172</option>
<option value="173">173</option>
<option value="174">174</option>
<option value="175">175</option>
<option value="176">176</option>
<option value="177">177</option>
<option value="178">178</option>
<option value="179">179</option>
<option value="180">180</option>
<option value="181">181</option>
<option value="182">182</option>
<option value="183">183</option>
<option value="184">184</option>
<option value="185">185</option>
<option value="186">186</option>
<option value="187">187</option>
<option value="188">188</option>
<option value="189">189</option>
<option value="190">190</option>
<option value="191">191</option>
<option value="192">192</option>
<option value="193">193</option>
<option value="194">194</option>
<option value="195">195</option>
<option value="196">196</option>
<option value="197">197</option>
<option value="198">198</option>
<option value="199">199</option>
<option value="200">200</option>
<option value="201">201</option>
<option value="202">202</option>
<option value="203">203</option>
<option value="204">204</option>
<option value="205">205</option>
<option value="206">206</option>
<option value="207">207</option>
<option value="208">208</option>
<option value="209">209</option>
<option value="210">210</option>
<option value="211">211</option>
<option value="212">212</option>
<option value="213">213</option>
<option value="214">214</option>
<option value="215">215</option>
<option value="216">216</option>
<option value="217">217</option>
<option value="218">218</option>
<option value="219">219</option>
<option value="220">220</option>
<option value="221">221</option>
<option value="222">222</option>
<option value="223">223</option>
<option value="224">224</option>
<option value="225">225</option>
<option value="226">226</option>
<option value="227">227</option>
<option value="228">228</option>
<option value="229">229</option>
<option value="230">230</option>
<option value="231">231</option>
<option value="232">232</option>
<option value="233">233</option>
<option value="234">234</option>
<option value="235">235</option>
<option value="236">236</option>
<option value="237">237</option>
<option value="238">238</option>
<option value="239">239</option>
<option value="240">240</option>
<option value="241">241</option>
<option value="242">242</option>
<option value="243">243</option>
<option value="244">244</option>
<option value="245">245</option>
<option value="246">246</option>
<option value="247">247</option>
<option value="248">248</option>
<option value="249">249</option>
<option value="250">250</option>
<option value="251">251</option>
<option value="252">252</option>
<option value="253">253</option>
<option value="254">254</option>
<option value="255">255</option>
<option value="256">256</option>
<option value="257">257</option>
<option value="258">258</option>
<option value="259">259</option>
<option value="260">260</option>
<option value="261">261</option>
<option value="262">262</option>
<option value="263">263</option>
<option value="264">264</option>
<option value="265">265</option>
<option value="266">266</option>
<option value="267">267</option>
<option value="268">268</option>
<option value="269">269</option>
<option value="270">270</option>
<option value="271">271</option>
<option value="272">272</option>
<option value="273">273</option>
<option value="274">274</option>
<option value="275">275</option>
<option value="276">276</option>
<option value="277">277</option>
<option value="278">278</option>
<option value="279">279</option>
<option value="280">280</option>
<option value="281">281</option>
<option value="282">282</option>
<option value="283">283</option>
<option value="284">284</option>
<option value="285">285</option>
<option value="286">286</option>
<option value="287">287</option>
<option value="288">288</option>
<option value="289">289</option>
<option value="290">290</option>
<option value="291">291</option>
<option value="292">292</option>
<option value="293">293</option>
<option value="294">294</option>
<option value="295">295</option>
<option value="296">296</option>
<option value="297">297</option>
<option value="298">298</option>
<option value="299">299</option>
<option value="300">300</option>
<option value="301">301</option>
<option value="302">302</option>
<option value="303">303</option>
<option value="304">304</option>
<option value="305">305</option>
<option value="306">306</option>
<option value="307">307</option>
<option value="308">308</option>
<option value="309">309</option>
<option value="310">310</option>
<option value="311">311</option>
<option value="312">312</option>
<option value="313">313</option>
<option value="314">314</option>
<option value="315">315</option>
<option value="316">316</option>
<option value="317">317</option>
<option value="318">318</option>
<option value="319">319</option>
<option value="320">320</option>
<option value="321">321</option>
<option value="322">322</option>
<option value="323">323</option>
<option value="324">324</option>
<option value="325">325</option>
<option value="326">326</option>
<option value="327">327</option>
<option value="328">328</option>
<option value="329">329</option>
<option value="330">330</option>
<option value="331">331</option>
<option value="332">332</option>
<option value="333">333</option>
<option value="334">334</option>
<option value="335">335</option>
<option value="336">336</option>
<option value="337">337</option>
<option value="338">338</option>
<option value="339">339</option>
<option value="340">340</option>
<option value="341">341</option>
<option value="342">342</option>
<option value="343">343</option>
<option value="344">344</option>
<option value="345">345</option>
<option value="346">346</option>
<option value="347">347</option>
<option value="348">348</option>
<option value="349">349</option>
<option value="350">350</option>
<option value="351">351</option>
<option value="352">352</option>
<option value="353">353</option>
<option value="354">354</option>
<option value="355">355</option>
<option value="356">356</option>
<option value="357">357</option>
<option value="358">358</option>
<option value="359">359</option>
<option value="360">360</option>
<option value="361">361</option>
<option value="362">362</option>
<option value="363">363</option>
<option value="364">364</option>
<option value="365">365</option>
<option value="366">366</option>
<option value="367">367</option>
<option value="368">368</option>
<option value="369">369</option>
<option value="370">370</option>
<option value="371">371</option>
<option value="372">372</option>
<option value="373">373</option>
<option value="374">374</option>
<option value="375">375</option>
<option value="376">376</option>
<option value="377">377</option>
<option value="378">378</option>
<option value="379">379</option>
<option value="380">380</option>
<option value="381">381</option>
<option value="382">382</option>
<option value="383">383</option>
<option value="384">384</option>
<option value="385">385</option>
<option value="386">386</option>
<option value="387">387</option>
<option value="388">388</option>
<option value="389">389</option>
<option value="390">390</option>
<option value="391">391</option>
<option value="392">392</option>
<option value="393">393</option>
<option value="394">394</option>
<option value="395">395</option>
<option value="396">396</option>
<option value="397">397</option>
<option value="398">398</option>
<option value="399">399</option>
<option value="400">400</option>
<option value="401">401</option>
<option value="402">402</option>
<option value="403">403</option>
<option value="404">404</option>
<option value="405">405</option>
<option value="406">406</option>
<option value="407">407</option>
<option value="408">408</option>
<option value="409">409</option>
<option value="410">410</option>
<option value="411">411</option>
<option value="412">412</option>
<option value="413">413</option>
<option value="414">414</option>
<option value="415">415</option>
<option value="416">416</option>
<option value="417">417</option>
<option value="418">418</option>
<option value="419">419</option>
<option value="420">420</option>
<option value="421">421</option>
<option value="422">422</option>
<option value="423">423</option>
<option value="424">424</option>
<option value="425">425</option>
<option value="426">426</option>
<option value="427">427</option>
<option value="428">428</option>
<option value="429">429</option>
<option value="430">430</option>
<option value="431">431</option>
<option value="432">432</option>
<option value="433">433</option>
<option value="434">434</option>
<option value="435">435</option>
<option value="436">436</option>
<option value="437">437</option>
<option value="438">438</option>
<option value="439">439</option>
<option value="440">440</option>
<option value="441">441</option>
<option value="442">442</option>
<option value="443">443</option>
<option value="444">444</option>
<option value="445">445</option>
<option value="446">446</option>
<option value="447">447</option>
<option value="448">448</option>
<option value="449">449</option>
<option value="450">450</option>
<option value="451">451</option>
<option value="452">452</option>
<option value="453">453</option>
<option value="454">454</option>
<option value="455">455</option>
<option value="456">456</option>
<option value="457">457</option>
<option value="458">458</option>
<option value="459">459</option>
<option value="460">460</option>
<option value="461">461</option>
<option value="462">462</option>
<option value="463">463</option>
<option value="464">464</option>
<option value="465">465</option>
<option value="466">466</option>
<option value="467">467</option>
<option value="468">468</option>
<option value="469">469</option>
<option value="470">470</option>
<option value="471">471</option>
<option value="472">472</option>
<option value="473">473</option>
<option value="474">474</option>
<option value="475">475</option>
<option value="476">476</option>
<option value="477">477</option>
<option value="478">478</option>
<option value="479">479</option>
<option value="480">480</option>
<option value="481">481</option>
<option value="482">482</option>
<option value="483">483</option>
<option value="484">484</option>
<option value="485">485</option>
<option value="486">486</option>
<option value="487">487</option>
<option value="488">488</option>
<option value="489">489</option>
<option value="490">490</option>
<option value="491">491</option>
<option value="492">492</option>
<option value="493">493</option>
<option value="494">494</option>
<option value="495">495</option>
<option value="496">496</option>
<option value="497">497</option>
<option value="498">498</option>
<option value="499">499</option>
<option value="500">500</option>
</select>
</td> </td>
<td> <td>
Multiselect with a 'Select all' option and filtering enabled Multiselect with a 'Select all' option and filtering enabled using the <code>enableFiltering</code> option.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -1493,7 +1006,7 @@ ...@@ -1493,7 +1006,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn-primary btn-large&apos;, buttonClass: &apos;btn-primary btn-large&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1517,7 +1030,7 @@ ...@@ -1517,7 +1030,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonWidth: &apos;300px&apos;, buttonWidth: &apos;300px&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1534,7 +1047,7 @@ ...@@ -1534,7 +1047,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;, buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1549,7 +1062,7 @@ ...@@ -1549,7 +1062,7 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
selectedClass: null, selectedClass: null
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1568,7 +1081,7 @@ ...@@ -1568,7 +1081,7 @@
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
onChange: function(element, checked) { onChange: function(element, checked) {
alert(&apos;Change event invoked!&apos;); alert(&apos;Change event invoked!&apos;);
}, }
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1585,7 +1098,92 @@ ...@@ -1585,7 +1098,92 @@
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
maxHeight: 400, maxHeight: 400
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllOption</code></td>
<td>
If set to <code>true</code> a 'Select all' option will be added.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>selectAllText</code></td>
<td>
The label for the 'Select all' option.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectAllText: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>enableFiltering</code></td>
<td>
If set to <code>true</code> a search field will be added to filter the visible options.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>filterPlaceholder</code></td>
<td>
The placeholder used in the search field if filtering is enabled.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
filterPlaceholder: &apos;Search&apos;
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>dropRight</code></td>
<td>
Will make the menu drop right if set to <code>true</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
enableFiltering: true
}); });
}); });
&lt;/script&gt; &lt;/script&gt;
...@@ -1611,11 +1209,17 @@ ...@@ -1611,11 +1209,17 @@
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
.add-styling .multiselect-all {
font-weight: bold;
}
.add-styling .multiselect-search {
color: red;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example15').multiselect({ $('#example15').multiselect({
buttonWidth: '500px', buttonWidth: '400px',
buttonText: function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected <b class="caret"></b>'; return 'None selected <b class="caret"></b>';
...@@ -1629,6 +1233,15 @@ ...@@ -1629,6 +1233,15 @@
} }
} }
}); });
for (var i = 1; i <= 100; i++) {
$('#example29').append('<option value="' + i + '">' + i + '</option>');
}
$('#example29').multiselect({
includeSelectAllOption: true,
enableFiltering: true
});
}); });
</script> </script>
<div class="add-styling"> <div class="add-styling">
...@@ -1665,6 +1278,26 @@ ...@@ -1665,6 +1278,26 @@
.multiselect-group { .multiselect-group {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
}
</pre>
</td>
</tr>
<tr>
<td>
<select id="example29" multiple="multiple">
</select>
</td>
<td>
Access the select all option by using the <code>.multiselect-all</code> class. The filter search field can be manipulated by using <code>.multiselect-search</code>;
</td>
<td>
<pre class="prettyprint linenums">
.multiselect-all label {
font-weight: bold;
}
.multiselect-search {
color: red;
} }
</pre> </pre>
</td> </td>
......
js/bootstrap-multiselect.js
View file @ 67eb61ef
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
if(typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect){ if(typeof ko != 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect){
ko.bindingHandlers.multiselect = { ko.bindingHandlers.multiselect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {},
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var ms = $(element).data('multiselect'); var ms = $(element).data('multiselect');
if (!ms) { if (!ms) {
$(element).multiselect(ko.utils.unwrapObservable(valueAccessor())); $(element).multiselect(ko.utils.unwrapObservable(valueAccessor()));
} else if (allBindingsAccessor().options().length !== ms.originalOptions.length) { }
else if (allBindingsAccessor().options().length !== ms.originalOptions.length) {
ms.updateOriginalOptions(); ms.updateOriginalOptions();
$(element).multiselect('rebuild'); $(element).multiselect('rebuild');
} }
...@@ -41,57 +41,14 @@ ...@@ -41,57 +41,14 @@
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.$select = $(select); this.$select = $(select);
this.originalOptions = this.$select.clone()[0].options; //we have to clone to create a new reference this.originalOptions = this.$select.clone()[0].options; //we have to clone to create a new reference
this.updateOriginalOptions = function() { this.query = '';
this.originalOptions = this.$select.clone()[0].options;
};
this.getFilteredOptions = function () {
if (this.query == '') return this.originalOptions;
var query = this.query;
return $(this.originalOptions).filter(function () {
return this.text.substring(0, query.length) == query
});
};
this.query = '';
this.searchTimeout = null; this.searchTimeout = null;
this.asyncFunction = function (callback, timeout, self) {
var args = Array.prototype.slice.call(arguments, 3);
return setTimeout(function () {
callback.apply(self || window, args);
}, timeout);
};
this.options.multiple = this.$select.attr('multiple') == "multiple"; this.options.multiple = this.$select.attr('multiple') == "multiple";
this.$container = $(this.options.buttonContainer) this.$container = $(this.options.buttonContainer)
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>') .append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText(this.getSelected(), this.$select) + '</button>')
.append('<div id="dropdown-container" class="dropdown-menu" style="position:absolute;"><ul style="list-style-type: none;margin:0;padding:0;"></ul></div>'); .append('<div class="multiselect-container dropdown-menu" style="position:absolute;"></div>');
if (this.options.enableFiltering) {
$('#dropdown-container', this.$container).prepend('<div class="input-prepend" style="padding:3px;"><span class="add-on"><i class="icon-search"></i></span><input id="multiselect-default-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>');
$('#multiselect-default-search', this.$container).val(this.query).click(function (event) {
event.stopPropagation();
}).keydown($.proxy(function (event) {
// This is useful to catch "keydown" events after the browser has updated the control
clearTimeout(this.searchTimeout);
this.searchTimeout = this.asyncFunction($.proxy(function () {
var inputValue = event.target.value;
if (inputValue != this.query) {
this.query = inputValue;
this.$select.empty();
var filteredValues = this.getFilteredOptions();
var newOptions = '';
for (var i = 0; i < filteredValues.length; i++) {
var option = filteredValues[i];
newOptions += '<option value="'+option.value+'">'+option.text+'</option>';
}
this.$select.html(newOptions);
this.rebuild();
}
}, this), 300, this);
}, this));
}
if (this.options.buttonWidth) { if (this.options.buttonWidth) {
$('button', this.$container).css({ $('button', this.$container).css({
...@@ -99,17 +56,6 @@ ...@@ -99,17 +56,6 @@
}); });
} }
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('#dropdown-container ul', this.$container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
});
$('input[type="text"]', this.$container).width('75%');
}
this.buildDropdown(); this.buildDropdown();
this.updateButtonText(); this.updateButtonText();
...@@ -178,10 +124,10 @@ ...@@ -178,10 +124,10 @@
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var $checkbox = $('input', $li); var $checkbox = $('input', $li);
$checkbox.val(value); $checkbox.val(value);
if (value == 'select-all-option') $checkbox.parent().parent().addClass('select-all-option'); if (value == 'select-all-option') $checkbox.parent().parent().addClass('multiselect-all');
$('label', $li).append(" " + label); $('label', $li).append(" " + label);
$('#dropdown-container ul', this.$container).append($li); $('.multiselect-container ul', this.$container).append($li);
if ($(element).is(':disabled')) { if ($(element).is(':disabled')) {
$checkbox.attr('disabled', 'disabled').prop('disabled', true).parents('li').addClass('disabled'); $checkbox.attr('disabled', 'disabled').prop('disabled', true).parents('li').addClass('disabled');
...@@ -196,8 +142,22 @@ ...@@ -196,8 +142,22 @@
// Build the dropdown and bind event handling. // Build the dropdown and bind event handling.
buildDropdown: function () { buildDropdown: function () {
$('.multiselect-container', this.$container).html('<ul style="list-style-type: none;margin:0;padding:0;"></ul>');
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('.multiselect-container ul', this.$container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden'
});
$('input[type="text"]', this.$container).width('75%');
}
var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == 'select-all-option' : false; var alreadyHasSelectAll = this.$select[0][0] ? this.$select[0][0].value == 'select-all-option' : 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) { if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) {
this.$select.prepend('<option value="select-all-option">' + this.options.selectAllText + '</option>'); this.$select.prepend('<option value="select-all-option">' + this.options.selectAllText + '</option>');
} }
...@@ -212,7 +172,7 @@ ...@@ -212,7 +172,7 @@
// Add a header for the group. // Add a header for the group.
var $li = $('<li><label style="margin:0;padding:3px 20px 3px 20px;height:100%;" class="multiselect-group"></label></li>'); var $li = $('<li><label style="margin:0;padding:3px 20px 3px 20px;height:100%;" class="multiselect-group"></label></li>');
$('label', $li).text(groupName); $('label', $li).text(groupName);
$('#dropdown-container ul', this.$container).append($li); $('.multiselect-container ul', this.$container).append($li);
// Add the options of the group. // Add the options of the group.
$('option', group).each($.proxy(function (index, element) { $('option', group).each($.proxy(function (index, element) {
...@@ -223,15 +183,16 @@ ...@@ -223,15 +183,16 @@
this.createOptionValue(element); this.createOptionValue(element);
} }
else { else {
// ignore illegal tags // Ignore illegal tags.
} }
}, this)); }, this));
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('#dropdown-container ul li input', this.$container).on('change', $.proxy(function (event) { $('.multiselect-container ul li input', this.$container).on('change', $.proxy(function (event) {
var checked = $(event.target).prop('checked') || false; var checked = $(event.target).prop('checked') || false;
var isSelectAllOption = $(event.target).val() == 'select-all-option'; var isSelectAllOption = $(event.target).val() == 'select-all-option';
// Apply or unapply the configured selected class.
if (this.options.selectedClass) { if (this.options.selectedClass) {
if (checked) { if (checked) {
$(event.target).parents('li').addClass(this.options.selectedClass); $(event.target).parents('li').addClass(this.options.selectedClass);
...@@ -248,12 +209,14 @@ ...@@ -248,12 +209,14 @@
var $optionsNotThis = $('option', this.$select).not($option); var $optionsNotThis = $('option', this.$select).not($option);
var $checkboxesNotThis = $('input', this.$container).not($(event.target)); var $checkboxesNotThis = $('input', this.$container).not($(event.target));
// Toggle all options if the select all option was changed.
if (isSelectAllOption) { if (isSelectAllOption) {
$checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).trigger('click'); $checkboxesNotThis.filter(function () { return $(this).is(':checked') != checked; }).trigger('click');
} }
if (checked) { if (checked) {
$option.prop('selected', true); $option.prop('selected', true);
if (this.options.multiple) { if (this.options.multiple) {
$option.attr('selected', 'selected'); $option.attr('selected', 'selected');
} }
...@@ -286,7 +249,7 @@ ...@@ -286,7 +249,7 @@
this.$select.change(); this.$select.change();
}, this)); }, this));
$('#dropdown-container ul li a', this.$container).on('touchstart click', function (event) { $('.multiselect-container ul li a', this.$container).on('touchstart click', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
...@@ -339,6 +302,37 @@ ...@@ -339,6 +302,37 @@
event.preventDefault(); event.preventDefault();
} }
}, this)); }, this));
// Enable filtering.
if (this.options.enableFiltering) {
$('.multiselect-container', this.$container).prepend('<div class="input-prepend" style="padding:3px;"><span class="add-on"><i class="icon-search"></i></span><input class="multiselect-search" type="text" placeholder="' + this.options.filterPlaceholder + '"></div>');
$('.multiselect-search', this.$container).val(this.query).on('click', function (event) {
event.stopPropagation();
}).on('keydown', $.proxy(function (event) {
// This is useful to catch "keydown" events after the browser has updated the control.
clearTimeout(this.searchTimeout);
this.searchTimeout = this.asyncFunction($.proxy(function () {
var inputValue = event.target.value;
if (inputValue != this.query) {
this.query = inputValue;
this.$select.empty();
var filteredValues = this.getFilteredOptions();
var newOptions = '';
for (var i = 0; i < filteredValues.length; i++) {
var option = filteredValues[i];
newOptions += '<option value="' + option.value + '">' + option.text + '</option>';
}
this.$select.html(newOptions);
this.rebuild();
}
}, this), 300, this);
}, this));
}
}, },
// Destroy - unbind - the plugin. // Destroy - unbind - the plugin.
...@@ -350,7 +344,7 @@ ...@@ -350,7 +344,7 @@
// Refreshs the checked options based on the current state of the select. // Refreshs the checked options based on the current state of the select.
refresh: function() { refresh: function() {
$('option', this.$select).each($.proxy(function(index, element) { $('option', this.$select).each($.proxy(function(index, element) {
var $input = $('#dropdown-container ul li input', this.$container).filter(function () { var $input = $('.multiselect-container ul li input', this.$container).filter(function () {
return $(this).val() == $(element).val(); return $(this).val() == $(element).val();
}); });
...@@ -383,7 +377,7 @@ ...@@ -383,7 +377,7 @@
// Select an option by its value. // Select an option by its value.
select: function(value) { select: function(value) {
var $option = $('option', this.$select).filter(function () { return $(this).val() == value; }); var $option = $('option', this.$select).filter(function () { return $(this).val() == value; });
var $checkbox = $('#dropdown-container ul li input', this.$container).filter(function () { return $(this).val() == value; }); var $checkbox = $('.multiselect-container ul li input', this.$container).filter(function () { return $(this).val() == value; });
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.parents('li').addClass(this.options.selectedClass); $checkbox.parents('li').addClass(this.options.selectedClass);
...@@ -399,7 +393,7 @@ ...@@ -399,7 +393,7 @@
// Deselect an option by its value. // Deselect an option by its value.
deselect: function(value) { deselect: function(value) {
var $option = $('option', this.$select).filter(function () { return $(this).val() == value; }); var $option = $('option', this.$select).filter(function () { return $(this).val() == value; });
var $checkbox = $('#dropdown-container ul li input', this.$container).filter(function () { return $(this).val() == value; }); var $checkbox = $('.multiselect-container ul li input', this.$container).filter(function () { return $(this).val() == value; });
if (this.options.selectedClass) { if (this.options.selectedClass) {
$checkbox.parents('li').removeClass(this.options.selectedClass); $checkbox.parents('li').removeClass(this.options.selectedClass);
...@@ -414,7 +408,7 @@ ...@@ -414,7 +408,7 @@
// Rebuild the whole dropdown menu. // Rebuild the whole dropdown menu.
rebuild: function() { rebuild: function() {
$('#dropdown-container ul', this.$container).html(''); $('.multiselect-container', this.$container).html('');
this.buildDropdown(this.$select, this.options); this.buildDropdown(this.$select, this.options);
this.updateButtonText(); this.updateButtonText();
}, },
...@@ -429,8 +423,30 @@ ...@@ -429,8 +423,30 @@
$('button', this.$container).html(this.options.buttonText(options, this.$select)); $('button', this.$container).html(this.options.buttonText(options, this.$select));
}, },
// Get all selected options.
getSelected: function () { getSelected: function () {
return $('option:selected[value!="select-all-option"]', this.$select); return $('option:selected[value!="select-all-option"]', this.$select);
},
// Get filtered options.
getFilteredOptions: function () {
if (this.query == '') return this.originalOptions;
var query = this.query;
return $(this.originalOptions).filter(function () {
return this.text.substring(0, query.length) == query
});
},
updateOriginalOptions: function() {
this.originalOptions = this.$select.clone()[0].options;
},
asyncFunction: function (callback, timeout, self) {
var args = Array.prototype.slice.call(arguments, 3);
return setTimeout(function () {
callback.apply(self || window, args);
}, timeout);
} }
}; };
...@@ -456,4 +472,5 @@ ...@@ -456,4 +472,5 @@
$(function() { $(function() {
$("select[data-role=multiselect]").multiselect(); $("select[data-role=multiselect]").multiselect();
}); });
}(window.jQuery); }(window.jQuery);
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