More grouping on the "Examples" page.
* "Loading array data" and "Loading remote data" now go together under "Other data sources", * "Events" and "Programmatic access" under "Programmatic control", * "Theme support", "Responsive design" and "Templating" under "Themes, templating and responsive design"
This commit is contained in:
Florian Kissling
parent
cd13697695
commit
a728044fa9
2 changed files with 266 additions and 224 deletions
|
|
@ -10,16 +10,17 @@
|
||||||
<a href="#placeholders">Placeholders</a>
|
<a href="#placeholders">Placeholders</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#templating">Templating</a>
|
<a href="#data-other">
|
||||||
</li>
|
Other data sources
|
||||||
<li>
|
</a>
|
||||||
<a href="#data-array">Loading array data</a>
|
<ul class="nav">
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="#data-array">Loading array data</a>
|
||||||
<a href="#data-ajax">Loading remote data</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="#data-ajax">Loading remote data</a>
|
||||||
<a href="#responsive">Responsive design</a>
|
</li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#disabled">Disabled mode</a>
|
<a href="#disabled">Disabled mode</a>
|
||||||
|
|
@ -27,9 +28,6 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="#disabled-results">Disabled results</a>
|
<a href="#disabled-results">Disabled results</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a href="#programmatic">Programmatic access</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="#multiple-max">Limiting the number of selections</a>
|
<a href="#multiple-max">Limiting the number of selections</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -37,7 +35,15 @@
|
||||||
<a href="#hide-search">Hiding the search box</a>
|
<a href="#hide-search">Hiding the search box</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#events">Events</a>
|
<a href="#programmatic-control">Programmatic control</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<a href="#events">Events</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#programmatic">Programmatic access</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#tags">Tagging support</a>
|
<a href="#tags">Tagging support</a>
|
||||||
|
|
@ -48,9 +54,6 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="#matcher">Custom matcher</a>
|
<a href="#matcher">Custom matcher</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a href="#themes">Theme support</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
|
<a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
|
|
@ -64,6 +67,23 @@
|
||||||
<a href="#diacritics">Diacritics support</a>
|
<a href="#diacritics">Diacritics support</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#themes-templating-responsive-design">
|
||||||
|
Themes, templating and responsive design
|
||||||
|
</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<a href="#themes">Theme support</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#templating">Templating</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#responsive">Responsive design</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a class="back-to-top" href="#top">
|
<a class="back-to-top" href="#top">
|
||||||
Back to top
|
Back to top
|
||||||
|
|
|
||||||
|
|
@ -91,6 +91,7 @@ $(".js-example-basic-multiple").select2();
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="placeholders">Placeholders</h1>
|
<h1 id="placeholders">Placeholders</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -125,49 +126,15 @@ $(".js-example-placeholder-multiple").select2({
|
||||||
placeholder: "Select a state"
|
placeholder: "Select a state"
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1 id="templating">Templating</h1>
|
|
||||||
|
|
||||||
<p>
|
<h1 id="data-other" class="page-header">
|
||||||
Various display options of the Select2 component can be changed:
|
Other data sources
|
||||||
You can access the <code><option></code> element
|
</h1>
|
||||||
(or <code><optgroup></code>) and any attributes on those elements
|
|
||||||
using <code>.element</code>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Templating is primarily controlled by the
|
|
||||||
<a href="options.html#templateResult"><code>templateResult</code></a>
|
|
||||||
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
|
||||||
options.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="s2-example">
|
|
||||||
<p>
|
|
||||||
<select class="js-example-templating js-states form-control"></select>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-templating"></pre>
|
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-templating">
|
|
||||||
function formatState (state) {
|
|
||||||
if (!state.id) { return state.text; }
|
|
||||||
var $state = $(
|
|
||||||
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
|
||||||
);
|
|
||||||
return $state;
|
|
||||||
};
|
|
||||||
|
|
||||||
$(".js-example-templating").select2({
|
|
||||||
templateResult: formatState
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h1 id="data-array" >Loading array data</h1>
|
<h1 id="data-array" >Loading array data</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -208,10 +175,8 @@ $(".js-example-data-array-selected").select2({
|
||||||
<option value="2" selected="selected">duplicate</option>
|
<option value="2" selected="selected">duplicate</option>
|
||||||
</select>
|
</select>
|
||||||
</script>
|
</script>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<h2 id="data-ajax" >Loading remote data</h2>
|
||||||
<h1 id="data-ajax" >Loading remote data</h1>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
||||||
|
|
@ -283,43 +248,11 @@ $(".js-data-example-ajax").select2({
|
||||||
<option value="3620194" selected="selected">select2/select2</option>
|
<option value="3620194" selected="selected">select2/select2</option>
|
||||||
</select>
|
</select>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1 id="responsive">Responsive design - Percent width</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Select2's width can be set to a percentage of its parent to support
|
|
||||||
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
|
||||||
width respectively.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="s2-example">
|
|
||||||
<p>
|
|
||||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-responsive"></pre>
|
|
||||||
|
|
||||||
<div class="alert alert-warning">
|
|
||||||
Select2 will do its best to resolve the percent width specified via a
|
|
||||||
css class, but it is not always possible. The best way to ensure that
|
|
||||||
Select2 is using a percent based width is to inline the
|
|
||||||
<code>style</code> declaration into the tag.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-responsive">
|
|
||||||
<select class="js-example-responsive" style="width: 50%"></select>
|
|
||||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
|
||||||
</script>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h1 id="disabled">Disabled mode</h1>
|
<h1 id="disabled">Disabled mode</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -362,6 +295,7 @@ $(".js-programmatic-disable").on("click", function () {
|
||||||
$(".js-example-disabled-multi").prop("disabled", true);
|
$(".js-example-disabled-multi").prop("disabled", true);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -395,78 +329,6 @@ $(".js-programmatic-disable").on("click", function () {
|
||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h1 id="programmatic">Programmatic access</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Select2 supports methods that allow programmatic control of the
|
|
||||||
component.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="s2-example">
|
|
||||||
<p>
|
|
||||||
<select class="js-example-programmatic js-states form-control"></select>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
|
||||||
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
|
||||||
<button class="js-programmatic-set-val btn btn-default">
|
|
||||||
Set "California"
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
|
||||||
<button class="js-programmatic-open btn btn-default">
|
|
||||||
Open
|
|
||||||
</button>
|
|
||||||
<button class="js-programmatic-close btn btn-default">
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
|
||||||
<button class="js-programmatic-init btn btn-default">
|
|
||||||
Init
|
|
||||||
</button>
|
|
||||||
<button class="js-programmatic-destroy btn btn-default">
|
|
||||||
Destroy
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
|
||||||
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
|
||||||
Set to California and Alabama
|
|
||||||
</button>
|
|
||||||
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
|
||||||
Clear
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
|
||||||
|
|
||||||
<script type="text/javascript" class="js-code-programmatic">
|
|
||||||
var $example = $(".js-example-programmatic");
|
|
||||||
var $exampleMulti = $(".js-example-programmatic-multi");
|
|
||||||
|
|
||||||
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
|
||||||
|
|
||||||
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
|
||||||
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
|
||||||
|
|
||||||
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
|
||||||
$(".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-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="multiple-max">
|
<h1 id="multiple-max">
|
||||||
|
|
@ -497,6 +359,7 @@ $(".js-example-basic-multiple-limit").select2({
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="hide-search">Hiding the search box</h1>
|
<h1 id="hide-search">Hiding the search box</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -522,7 +385,12 @@ $(".js-example-basic-hide-search").select2({
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1 id="events">Events</h1>
|
|
||||||
|
<h1 id="programmatic-control" class="page-header">
|
||||||
|
Programmatic control
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 id="events">Events</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 will trigger some events on the original select element,
|
Select2 will trigger some events on the original select element,
|
||||||
|
|
@ -601,9 +469,80 @@ function log (name, evt) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<h2 id="programmatic">Programmatic access</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Select2 supports methods that allow programmatic control of the
|
||||||
|
component.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="s2-example">
|
||||||
|
<p>
|
||||||
|
<select class="js-example-programmatic js-states form-control"></select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||||
|
<div class="btn-group btn-group-sm" aria-label="Set Select2 option">
|
||||||
|
<button class="js-programmatic-set-val btn btn-default">
|
||||||
|
Set "California"
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||||
|
<button class="js-programmatic-open btn btn-default">
|
||||||
|
Open
|
||||||
|
</button>
|
||||||
|
<button class="js-programmatic-close btn btn-default">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
|
||||||
|
<button class="js-programmatic-init btn btn-default">
|
||||||
|
Init
|
||||||
|
</button>
|
||||||
|
<button class="js-programmatic-destroy btn btn-default">
|
||||||
|
Destroy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||||
|
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
|
||||||
|
Set to California and Alabama
|
||||||
|
</button>
|
||||||
|
<button type="button" class="js-programmatic-multi-clear btn btn-default">
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||||
|
|
||||||
|
<script type="text/javascript" class="js-code-programmatic">
|
||||||
|
var $example = $(".js-example-programmatic");
|
||||||
|
var $exampleMulti = $(".js-example-programmatic-multi");
|
||||||
|
|
||||||
|
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
|
||||||
|
|
||||||
|
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
|
||||||
|
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
|
||||||
|
|
||||||
|
$(".js-programmatic-init").on("click", function () { $example.select2(); });
|
||||||
|
$(".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-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
|
||||||
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="tags">Tagging support</h1>
|
<h1 id="tags">Tagging support</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -637,6 +576,7 @@ $(".js-example-tags").select2({
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="tokenizer">Automatic tokenization</h1>
|
<h1 id="tokenizer">Automatic tokenization</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -673,6 +613,7 @@ $(".js-example-tokenizer").select2({
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
<h1 id="matcher">Custom matcher</h1>
|
<h1 id="matcher">Custom matcher</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -716,7 +657,108 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1 id="themes">Theme support</h1>
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<h1 id="localization-rtl-diacritics" class="page-header">
|
||||||
|
Localization, RTL and diacritics support
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 id="language">Multiple languages</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Select2 supports displaying the messages in different languages, as well
|
||||||
|
as providing your own
|
||||||
|
<a href="options.html#language">custom messages</a>
|
||||||
|
that can be displayed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The language does not have to be defined when Select2 is being
|
||||||
|
initialized, but instead can be defined in the <code>[lang]</code>
|
||||||
|
attribute of any parent elements as <code>[lang="es"]</code>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="s2-example">
|
||||||
|
<p>
|
||||||
|
<select class="js-example-language js-states form-control">
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre data-fill-from=".js-code-language"></pre>
|
||||||
|
|
||||||
|
<script type="text/x-example-code" class="js-code-language">
|
||||||
|
$(".js-example-language").select2({
|
||||||
|
language: "es"
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2 id="rtl">RTL support</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
||||||
|
set on the <code><select></code> or any parents of it. You can also
|
||||||
|
initialize Select2 with <code>dir: "rtl"</code> set.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="s2-example">
|
||||||
|
<p>
|
||||||
|
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre data-fill-from=".js-code-rtl"></pre>
|
||||||
|
|
||||||
|
<script type="text/x-example-code" class="js-code-rtl">
|
||||||
|
$(".js-example-rtl").select2({
|
||||||
|
dir: "rtl"
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2 id="diacritics">Diacritics support</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Select2's default matcher will ignore diacritics, making it easier for
|
||||||
|
users to filter results in international selects. Type "aero" into the
|
||||||
|
select below.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="s2-example">
|
||||||
|
<p>
|
||||||
|
<select class="js-example-diacritics form-control">
|
||||||
|
<option>Aeróbics</option>
|
||||||
|
<option>Aeróbics en Agua</option>
|
||||||
|
<option>Aerografía</option>
|
||||||
|
<option>Aeromodelaje</option>
|
||||||
|
<option>Águilas</option>
|
||||||
|
<option>Ajedrez</option>
|
||||||
|
<option>Ala Delta</option>
|
||||||
|
<option>Álbumes de Música</option>
|
||||||
|
<option>Alusivos</option>
|
||||||
|
<option>Análisis de Escritura a Mano</option>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||||
|
|
||||||
|
<script type="text/x-example-code" class="js-code-diacritics">
|
||||||
|
$(".js-example-diacritics").select2();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<h1 id="themes-templating-responsive-design" class="page-header">
|
||||||
|
Themes, templating and responsive design
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<h2 id="themes">Theme support</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 supports custom themes using the
|
Select2 supports custom themes using the
|
||||||
|
|
@ -752,94 +794,74 @@ $(".js-example-theme-multiple").select2({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
<h2 id="templating">Templating</h2>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h1 id="localization-rtl-diacritics" class="page-header">
|
|
||||||
Localization, RTL and diacritics support
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<h1 id="language">Multiple languages</h1>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 supports displaying the messages in different languages, as well
|
Various display options of the Select2 component can be changed:
|
||||||
as providing your own
|
You can access the <code><option></code> element
|
||||||
<a href="options.html#language">custom messages</a>
|
(or <code><optgroup></code>) and any attributes on those elements
|
||||||
that can be displayed.
|
using <code>.element</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
The language does not have to be defined when Select2 is being
|
Templating is primarily controlled by the
|
||||||
initialized, but instead can be defined in the <code>[lang]</code>
|
<a href="options.html#templateResult"><code>templateResult</code></a>
|
||||||
attribute of any parent elements as <code>[lang="es"]</code>.
|
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
||||||
|
options.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="s2-example">
|
<div class="s2-example">
|
||||||
<p>
|
<p>
|
||||||
<select class="js-example-language js-states form-control">
|
<select class="js-example-templating js-states form-control"></select>
|
||||||
</select>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-language"></pre>
|
<pre data-fill-from=".js-code-templating"></pre>
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-language">
|
<script type="text/x-example-code" class="js-code-templating">
|
||||||
$(".js-example-language").select2({
|
function formatState (state) {
|
||||||
language: "es"
|
if (!state.id) { return state.text; }
|
||||||
|
var $state = $(
|
||||||
|
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
||||||
|
);
|
||||||
|
return $state;
|
||||||
|
};
|
||||||
|
|
||||||
|
$(".js-example-templating").select2({
|
||||||
|
templateResult: formatState
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1 id="rtl">RTL support</h1>
|
<h2 id="responsive">Responsive design - Percent width</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Select2 will work on RTL websites if the <code>dir</code> attribute is
|
Select2's width can be set to a percentage of its parent to support
|
||||||
set on the <code><select></code> or any parents of it. You can also
|
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
||||||
initialize Select2 with <code>dir: "rtl"</code> set.
|
width respectively.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="s2-example">
|
<div class="s2-example">
|
||||||
<p>
|
<p>
|
||||||
<select class="js-example-rtl js-states form-control" dir="rtl"></select>
|
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-rtl"></pre>
|
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-rtl">
|
|
||||||
$(".js-example-rtl").select2({
|
|
||||||
dir: "rtl"
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1 id="diacritics">Diacritics support</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Select2's default matcher will ignore diacritics, making it easier for
|
|
||||||
users to filter results in international selects. Type "aero" into the
|
|
||||||
select below.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="s2-example">
|
|
||||||
<p>
|
<p>
|
||||||
<select class="js-example-diacritics form-control">
|
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||||
<option>Aeróbics</option>
|
|
||||||
<option>Aeróbics en Agua</option>
|
|
||||||
<option>Aerografía</option>
|
|
||||||
<option>Aeromodelaje</option>
|
|
||||||
<option>Águilas</option>
|
|
||||||
<option>Ajedrez</option>
|
|
||||||
<option>Ala Delta</option>
|
|
||||||
<option>Álbumes de Música</option>
|
|
||||||
<option>Alusivos</option>
|
|
||||||
<option>Análisis de Escritura a Mano</option>
|
|
||||||
</select>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
<pre data-fill-from=".js-code-responsive"></pre>
|
||||||
|
|
||||||
<script type="text/x-example-code" class="js-code-diacritics">
|
<div class="alert alert-warning">
|
||||||
$(".js-example-diacritics").select2();
|
Select2 will do its best to resolve the percent width specified via a
|
||||||
|
css class, but it is not always possible. The best way to ensure that
|
||||||
|
Select2 is using a percent based width is to inline the
|
||||||
|
<code>style</code> declaration into the tag.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/x-example-code" class="js-code-responsive">
|
||||||
|
<select class="js-example-responsive" style="width: 50%"></select>
|
||||||
|
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue