RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-26 06:46:04 +03:00
Code Issues Projects Releases Wiki Activity

cleanup example and move examle based on PR comments.

Browse Source
This commit is contained in:
Zubair 2015-01-13 12:59:49 -05:00
parent 7515fa7f46
commit 160abdc54e
1 changed files with 195 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
docs/examples.html
View File

@ -33,7 +33,7 @@ slug: examples
<pre class="code" data-fill-from=".js-code-basic"></pre> <pre class="code" data-fill-from=".js-code-basic"></pre>
<script type="text/x-example-code" class="js-code-basic"> <script type="text/x-example-code" class="js-code-basic">
$(document).ready(function() { $(document).ready(function() {
$(".js-example-basic-single").select2(); $(".js-example-basic-single").select2();
}); });
@ -64,38 +64,9 @@ $(document).ready(function() {
<pre data-fill-from=".js-code-multiple"></pre> <pre data-fill-from=".js-code-multiple"></pre>
<script type="text/x-example-code" class="js-code-multiple"> <script type="text/x-example-code" class="js-code-multiple">
$(".js-example-basic-multiple").select2(); $(".js-example-basic-multiple").select2();
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</script>
</div>
</section>
<section id="multiple_max" class="row">
<div class="col-md-4">
<h1>Limited Multiple select boxes</h1>
<p>Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected.
The select below is declared with the <code>multiple</code> attribute with <code>maxSelectionLength</code> in the select2 options</p>
<p>
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
</p>
</div>
<div class="col-md-8">
<h2>Example code</h2>
<pre data-fill-from=".js-code-multiple-limit"></pre>
<script type="text/x-example-code" class="js-code-multiple-limit">
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
<select class="js-example-basic-multiple" multiple="multiple"> <select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option> <option value="AL">Alabama</option>
... ...
@ -134,16 +105,16 @@ $(".js-example-basic-multiple-limit").select2({
<pre data-fill-from=".js-code-placeholder"></pre> <pre data-fill-from=".js-code-placeholder"></pre>
<script type="text/javascript" class="js-code-placeholder"> <script type="text/javascript" class="js-code-placeholder">
$(".js-example-placeholder-single").select2({ $(".js-example-placeholder-single").select2({
placeholder: "Select a state", placeholder: "Select a state",
allowClear: true allowClear: true
}); });
$(".js-example-placeholder-multiple").select2({ $(".js-example-placeholder-multiple").select2({
placeholder: "Select a state" placeholder: "Select a state"
}); });
</script> </script>
</div> </div>
</section> </section>
@ -176,7 +147,7 @@ $(".js-example-placeholder-multiple").select2({
<pre data-fill-from=".js-code-data-array"></pre> <pre data-fill-from=".js-code-data-array"></pre>
<script type="text/x-example-code" class="js-code-data-array"> <script type="text/x-example-code" class="js-code-data-array">
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({ $(".js-example-data-array").select2({
@ -236,7 +207,7 @@ $(".js-example-data-array-selected").select2({
function you specify. function you specify.
</p> </p>
<script type="text/x-example-code" class="js-code-data-ajax"> <script type="text/x-example-code" class="js-code-data-ajax">
$(".js-data-example-ajax").select2({ $(".js-data-example-ajax").select2({
ajax: { ajax: {
url: "https://api.github.com/search/repositories", url: "https://api.github.com/search/repositories",
@ -264,7 +235,7 @@ $(".js-data-example-ajax").select2({
}); });
</script> </script>
<script type="text/x-example-code" class="js-code-data-ajax-html"> <script type="text/x-example-code" class="js-code-data-ajax-html">
<select class="js-data-example-ajax"> <select class="js-data-example-ajax">
<option value="select2/select2" selected="selected">select2/select2</option> <option value="select2/select2" selected="selected">select2/select2</option>
</select> </select>
@ -304,17 +275,17 @@ $(".js-data-example-ajax").select2({
<pre data-fill-from=".js-code-disabled"></pre> <pre data-fill-from=".js-code-disabled"></pre>
<script type="text/javascript" class="js-code-disabled"> <script type="text/javascript" class="js-code-disabled">
$(".js-programmatic-enable").on("click", function () { $(".js-programmatic-enable").on("click", function () {
$(".js-example-disabled").prop("disabled", false); $(".js-example-disabled").prop("disabled", false);
$(".js-example-disabled-multi").prop("disabled", false); $(".js-example-disabled-multi").prop("disabled", false);
}); });
$(".js-programmatic-disable").on("click", function () { $(".js-programmatic-disable").on("click", function () {
$(".js-example-disabled").prop("disabled", true); $(".js-example-disabled").prop("disabled", true);
$(".js-example-disabled-multi").prop("disabled", true); $(".js-example-disabled-multi").prop("disabled", true);
}); });
</script> </script>
</div> </div>
</section> </section>
@ -342,7 +313,7 @@ $(".js-programmatic-disable").on("click", function () {
<pre data-fill-from=".js-code-disabled-results"></pre> <pre data-fill-from=".js-code-disabled-results"></pre>
<script type="text/x-example-code" class="js-code-disabled-results"> <script type="text/x-example-code" class="js-code-disabled-results">
<select class="js-example-disabled-results"> <select class="js-example-disabled-results">
<option value="one">First</option> <option value="one">First</option>
<option value="two" disabled="disabled">Second (disabled)</option> <option value="two" disabled="disabled">Second (disabled)</option>
@ -407,20 +378,42 @@ $(".js-programmatic-disable").on("click", function () {
<pre data-fill-from=".js-code-programmatic"></pre> <pre data-fill-from=".js-code-programmatic"></pre>
<script type="text/javascript" class="js-code-programmatic"> <script type="text/javascript" class="js-code-programmatic">
var $example = $(".js-example-programmatic"); var $example = $(".js-example-programmatic");
var $exampleMulti = $(".js-example-programmatic-multi"); var $exampleMulti = $(".js-example-programmatic-multi");
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); }); $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); }); $(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); }); $(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); }); $(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); }); $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
</script>
</div>
</section>
<section id="multiple_max" class="row">
<div class="col-md-4">
<h1>Limiting the number of selections</h1>
<p>Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected.
The select below is declared with the <code>multiple</code> attribute with <code>maxSelectionLength</code> in the select2 options</p>
<p>
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
</p>
</div>
<div class="col-md-8">
<h2>Example code</h2>
<pre data-fill-from=".js-code-multiple-limit"></pre>
<script type="text/x-example-code" class="js-code-multiple-limit">
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
</script> </script>
</div> </div>
</section> </section>
@ -517,7 +510,7 @@ function log (name, args) {
<pre data-fill-from=".js-code-tags"></pre> <pre data-fill-from=".js-code-tags"></pre>
<script type="text/x-example-code" class="js-code-tags"> <script type="text/x-example-code" class="js-code-tags">
$(".js-example-tags").select2({ $(".js-example-tags").select2({
tags: true tags: true
}) })
@ -555,7 +548,7 @@ $(".js-example-tags").select2({
<pre data-fill-from=".js-code-tokenizer"></pre> <pre data-fill-from=".js-code-tokenizer"></pre>
<script type="text/x-example-code" class="js-code-tokenizer"> <script type="text/x-example-code" class="js-code-tokenizer">
$(".js-example-tokenizer").select2({ $(".js-example-tokenizer").select2({
tags: true, tags: true,
tokenSeparators: [',', ' '] tokenSeparators: [',', ' ']
@ -591,7 +584,7 @@ $(".js-example-tokenizer").select2({
<pre data-fill-from=".js-code-matcher-start"></pre> <pre data-fill-from=".js-code-matcher-start"></pre>
<script type="text/x-example-code" class="js-code-matcher-start"> <script type="text/x-example-code" class="js-code-matcher-start">
function matchStart (term, text) { function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true; return true;
@ -639,7 +632,7 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
<pre data-fill-from=".js-code-diacritics"></pre> <pre data-fill-from=".js-code-diacritics"></pre>
<script type="text/x-example-code" class="js-code-diacritics"> <script type="text/x-example-code" class="js-code-diacritics">
$(".js-example-diacritics").select2(); $(".js-example-diacritics").select2();
</script> </script>
</div> </div>
@ -672,7 +665,7 @@ $(".js-example-diacritics").select2();
<pre data-fill-from=".js-code-language"></pre> <pre data-fill-from=".js-code-language"></pre>
<script type="text/x-example-code" class="js-code-language"> <script type="text/x-example-code" class="js-code-language">
$(".js-example-language").select2({ $(".js-example-language").select2({
language: "es" language: "es"
}); });
@ -709,7 +702,7 @@ $(".js-example-language").select2({
<pre data-fill-from=".js-code-theme"></pre> <pre data-fill-from=".js-code-theme"></pre>
<script type="text/x-example-code" class="js-code-theme"> <script type="text/x-example-code" class="js-code-theme">
$(".js-example-theme-single").select2({ $(".js-example-theme-single").select2({
theme: "classic" theme: "classic"
}); });
@ -743,7 +736,7 @@ $(".js-example-theme-multiple").select2({
<pre data-fill-from=".js-code-rtl"></pre> <pre data-fill-from=".js-code-rtl"></pre>
<script type="text/x-example-code" class="js-code-rtl"> <script type="text/x-example-code" class="js-code-rtl">
$(".js-example-rtl").select2({ $(".js-example-rtl").select2({
dir: "rtl" dir: "rtl"
}); });
@ -816,13 +809,13 @@ $(".js-example-rtl").select2({
</select> </select>
<script type="text/javascript"> <script type="text/javascript">
var $states = $(".js-source-states"); var $states = $(".js-source-states");
var statesOptions = $states.html(); var statesOptions = $states.html();
$states.remove(); $states.remove();
$(".js-states").append(statesOptions); $(".js-states").append(statesOptions);
$("[data-fill-from]").each(function () { $("[data-fill-from]").each(function () {
var $this = $(this); var $this = $(this);
var codeContainer = $this.data("fill-from"); var codeContainer = $this.data("fill-from");
@ -832,11 +825,11 @@ $("[data-fill-from]").each(function () {
$this.text(code); $this.text(code);
$this.addClass("prettyprint linenums"); $this.addClass("prettyprint linenums");
}); });
prettyPrint(); prettyPrint();
$.fn.select2.amd.require( $.fn.select2.amd.require(
["select2/core", "select2/utils", "select2/compat/matcher"], ["select2/core", "select2/utils", "select2/compat/matcher"],
function (Select2, Utils, oldMatcher) { function (Select2, Utils, oldMatcher) {
var $basicSingle = $(".js-example-basic-single"); var $basicSingle = $(".js-example-basic-single");
@ -974,5 +967,5 @@ $.fn.select2.amd.require(
}); });
$(".js-example-rtl").select2(); $(".js-example-rtl").select2();
}); });
</script> </script>