catch up to master
This commit is contained in:
Igor Vaynberg
parent
5432ea7a4d
commit
7a24555d66
@ -13,6 +13,7 @@ version: 3.0
|
||||
$(function() {
|
||||
var opts=$("#source").html(), opts2="<option></option>"+opts;
|
||||
$("select.populate").each(function() { var e=$(this); e.html(e.hasClass("placeholder")?opts2:opts); });
|
||||
$(".examples article:odd").addClass("zebra");
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
@ -231,6 +232,7 @@ $("#e10_3").select2({
|
||||
<li><code>width</code> option now supports various strategies instead of always being copied from the source element</li>
|
||||
<li>Clicks on a <code>label</code> associated with the source element are now redirected to Select2.</li>
|
||||
<li><code>val</code> will now only accept ids, if you want to specify the full object for the selection use the new <code>data</code> method instead. <code>val</code> will also now only work on non-selects if <code>initSelection</code> was specified.</li>
|
||||
<li>It is now possible to limit the number of options that can be selected in a multi-select component. See the <a href="#maximumSelectionSize">Maximum Selection Size</a> example</li>
|
||||
</ul>
|
||||
</div></div>
|
||||
</section>
|
||||
@ -246,7 +248,7 @@ $("#e10_3").select2({
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="examples">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h2>Examples</h2>
|
||||
@ -344,7 +346,7 @@ $("#e10_3").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="zebra row" id="multi">
|
||||
<article class="row" id="multi">
|
||||
<div class="span4">
|
||||
<h3>Multi-Value Select Boxes</h3>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||
@ -392,7 +394,7 @@ $("#e2_2").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="zebra row" id="minimum">
|
||||
<article class="row" id="minimum">
|
||||
<div class="span4">
|
||||
<h3>Minimum Input</h3>
|
||||
<p>Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:</p>
|
||||
@ -436,7 +438,7 @@ $("#e2_2").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="zebra row" id="data">
|
||||
<article class="row" id="data">
|
||||
<div class="span4">
|
||||
<h3>Loading Data</h3>
|
||||
<p>Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:</p>
|
||||
@ -452,6 +454,28 @@ $("#e2_2").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<script id="script_e19">
|
||||
$(document).ready(function() {
|
||||
$("#e19").select2({ maximumSelectionSize: 3 });
|
||||
});
|
||||
</script>
|
||||
<article class="row" id="maximumSelectionSize">
|
||||
<div class="span4">
|
||||
<h3>Maximum Selection Size</h3>
|
||||
<p>Select2 allows the developer to limit the number of items that can be selected in a multi-select control.
|
||||
In the example below only 3 or less items can be selected.</p>
|
||||
<p>
|
||||
<select multiple class="populate" id="e19" style="width:300px"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example Code</h3>
|
||||
<pre class="prettyprint linenums" id="code_e19">
|
||||
</pre>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="row" id="data_array">
|
||||
<div class="span4">
|
||||
<h3>Loading Array Data</h3>
|
||||
@ -476,7 +500,7 @@ $("#e2_2").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="zebra row" id="ajax">
|
||||
<article class="row" id="ajax">
|
||||
<div class="span12">
|
||||
<h3>Loading Remote Data</h3>
|
||||
<p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p>
|
||||
@ -506,7 +530,7 @@ $("#e2_2").select2({
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="zebra row" id="programmatic">
|
||||
<article class="row" id="programmatic">
|
||||
<script id="script_e8">
|
||||
$(document).ready(function() {
|
||||
$("#e8").select2();
|
||||
@ -606,7 +630,7 @@ $("#e11_2")
|
||||
</pre>
|
||||
</div>
|
||||
</article>
|
||||
<article class="row zebra" id="tags">
|
||||
<article class="row" id="tags">
|
||||
<script id="script_e12">
|
||||
$(document).ready(function () {
|
||||
$("#e12").select2({tags:["red", "green", "blue"]});
|
||||
@ -656,7 +680,7 @@ $("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change");
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="row zebra" id="lifecycle">
|
||||
<article class="row" id="lifecycle">
|
||||
<script id="script_e14">
|
||||
$(document).ready(function () {
|
||||
$("#e14").val(["AL","AZ"]).select2();
|
||||
@ -710,7 +734,7 @@ $("#e15").select2("container").find("ul.select2-choices").sortable({
|
||||
</article>
|
||||
|
||||
|
||||
<article class="row zebra" id="disabled">
|
||||
<article class="row" id="disabled">
|
||||
<script id="script_e16">
|
||||
$(document).ready(function () {
|
||||
$("#e16").select2();
|
||||
@ -827,6 +851,14 @@ $("#e18,#e18_2").select2();
|
||||
<p class="alert alert-info">Only applies to single-value select boxes</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td>maximumSelectionSize</td><td>int</td><td>
|
||||
<p>
|
||||
The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
|
||||
</p>
|
||||
<p>Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
|
||||
by the <code>formatSelectionTooBig</code> function</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td>placeholder</td><td>string</td><td>
|
||||
<p>Initial value that is selected if no other selection is made.</p>
|
||||
<p>The placeholder can also be specified as a <code>data-placeholder</code> attribute on the <code>select</code>
|
||||
@ -980,6 +1012,15 @@ $("#e18,#e18_2").select2();
|
||||
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>formatSelectionTooBig</td><td>function</td><td>
|
||||
Function used to render the "You cannot select any more choices" message
|
||||
<pre>formatSelectionTooBig(maxSize)</pre>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||
<tr><td>maxSize</td><td>string</td><td>The maximum specified size of the selection</td></tr>
|
||||
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>createSearchChoice</td><td>function</td><td>
|
||||
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
|
||||
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 94e004ef8c9e29deb1ca269ad541ddf8ef74dd84
|
||||
Subproject commit 08bf83f1a42c24189339a6fdc63028f9d200fdb2
|
||||
Loading…
x
Reference in New Issue
Block a user