Add sidebar anchor navigation to the "Examples" page.
This commit is contained in:
Florian Kissling
parent
3ed07a6fda
commit
bf7d273f89
67
docs/_includes/nav/examples.html
Normal file
67
docs/_includes/nav/examples.html
Normal file
@ -0,0 +1,67 @@
|
||||
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
|
||||
<ul class="nav s2-docs-sidenav">
|
||||
<li>
|
||||
<a href="#basic">The basics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#multiple">Multiple select boxes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#placeholders">Placeholders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#templating">Templating</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data-array">Loading array data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#data-ajax">Loading remote data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#responsive">Responsive design</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#disabled">Disabled mode</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#disabled-results">Disabled results</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#programmatic">Programmatic access</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#multiple-max">Limiting the number of selections</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#hide-search">Hiding the search box</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#events">Events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tags">Tagging support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tokenizer">Automatic tokenization</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#matcher">Custom matcher</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#diacritics">Diacritics support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#language">Multiple languages</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#themes">Theme support</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#rtl">RTL support</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="back-to-top" href="#top">
|
||||
Back to top
|
||||
</a>
|
||||
</nav>
|
||||
@ -28,11 +28,11 @@
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border: 1px solid #eee;
|
||||
&.linenums {
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
|
||||
box-shadow: inset 40px 0 0 #fbfbfb, inset 41px 0 0 #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +42,6 @@ ol.linenums {
|
||||
}
|
||||
ol.linenums li {
|
||||
padding-left: 12px;
|
||||
color: #bebec5;
|
||||
color: #bebebe;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
83
docs/_sass/_s2-docs-examples.scss
Normal file
83
docs/_sass/_s2-docs-examples.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.s2-example + pre,
|
||||
.s2-event-log + pre {
|
||||
margin: -15px -15px 15px;
|
||||
border-radius: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.s2-example + pre,
|
||||
.s2-event-log + pre {
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-width: 1px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-event-log {
|
||||
background: #002451;
|
||||
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding: 45px 15px 15px;
|
||||
margin: 0 -15px 15px;
|
||||
}
|
||||
|
||||
.s2-event-log:after {
|
||||
content: "Event Log";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #BBB;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.s2-example {
|
||||
position: relative;
|
||||
padding: 45px 15px 15px;
|
||||
margin: 0 -15px 15px;
|
||||
background-color: #FAFAFA;
|
||||
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
|
||||
border-color: #E5E5E5 #EEE #EEE;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.s2-example {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: #FFF;
|
||||
border-width: 1px;
|
||||
border-color: #eee;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.s2-event-log {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: -15px;
|
||||
border-width: 1px;
|
||||
border-color: #eee;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-example:after {
|
||||
content: "Example";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #BBB;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@ -8,6 +8,7 @@
|
||||
@import "s2-docs-footer";
|
||||
@import "s2-docs-alert";
|
||||
@import "s2-docs-home";
|
||||
@import "s2-docs-examples";
|
||||
@import "anchorjs";
|
||||
@import "jumbotron";
|
||||
@import "prettify";
|
||||
@ -62,11 +63,3 @@ pre {
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
}
|
||||
|
||||
.s2-docs-headline-example {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #959595;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@ -26,9 +26,10 @@ slug: examples
|
||||
</section>
|
||||
|
||||
<div class="container s2-docs-container">
|
||||
<section id="basic" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>The basics</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-9" role="main">
|
||||
<section>
|
||||
<h1 id="basic">The basics</h1>
|
||||
|
||||
<p>
|
||||
Select2 can take a regular select box like this...
|
||||
@ -42,12 +43,11 @@ slug: examples
|
||||
and turn it into this...
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-single js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre class="code" data-fill-from=".js-code-basic"></pre>
|
||||
|
||||
@ -62,23 +62,20 @@ $(document).ready(function() {
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="multiple" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Multiple select boxes</h1>
|
||||
<section>
|
||||
<h1 id="multiple">Multiple select boxes</h1>
|
||||
|
||||
<p>
|
||||
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple"></pre>
|
||||
|
||||
@ -91,35 +88,30 @@ $(".js-example-basic-multiple").select2();
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-md-4">
|
||||
<section>
|
||||
<h1 id="placeholders">Placeholders</h1>
|
||||
|
||||
<p>
|
||||
A placeholder value can be defined and will be displayed until a selection is made.
|
||||
A placeholder value can be defined and will be displayed until a
|
||||
selection is made. Select2 uses the <code>placeholder</code> attribute
|
||||
on multiple select boxes, which requires IE 10+. You can support it in
|
||||
older versions with
|
||||
<a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-placeholder-single js-states form-control">
|
||||
<option></option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Select2 uses the <code>placeholder</code> attribute on multiple select
|
||||
boxes, which requires IE 10+. You can support it in older versions with
|
||||
<a href="https://github.com/jamesallardice/Placeholders.js">the Placeholders.js polyfill</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-placeholder"></pre>
|
||||
|
||||
@ -133,22 +125,13 @@ $(".js-example-placeholder-multiple").select2({
|
||||
placeholder: "Select a state"
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-md-4">
|
||||
<section>
|
||||
<h1 id="templating">Templating</h1>
|
||||
|
||||
<p>
|
||||
Various display options of the Select2 component can be changed
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-templating js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Various display options of the Select2 component can be changed:
|
||||
You can access the <code><option></code> element
|
||||
(or <code><optgroup></code>) and any attributes on those elements
|
||||
using <code>.element</code>.
|
||||
@ -160,9 +143,12 @@ $(".js-example-placeholder-multiple").select2({
|
||||
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>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-templating"></pre>
|
||||
|
||||
@ -179,35 +165,29 @@ $(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="data-array" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Loading array data</h1>
|
||||
<section>
|
||||
<h1 id="data-array" >Loading array data</h1>
|
||||
|
||||
<p>
|
||||
Select2 provides a way to load the data from a local array.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-data-array form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can provide initial selections with array data by providing the
|
||||
option tag for the selected values, similar to how it would be done for
|
||||
a standard select.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-data-array form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-data-array-selected form-control">
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-data-array"></pre>
|
||||
|
||||
@ -228,12 +208,10 @@ $(".js-example-data-array-selected").select2({
|
||||
<option value="2" selected="selected">duplicate</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="data-ajax" class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>Loading remote data</h1>
|
||||
<section>
|
||||
<h1 id="data-ajax" >Loading remote data</h1>
|
||||
|
||||
<p>
|
||||
Select2 comes with AJAX support built in, using jQuery's AJAX methods.
|
||||
@ -305,12 +283,10 @@ $(".js-data-example-ajax").select2({
|
||||
<option value="3620194" selected="selected">select2/select2</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="responsive" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Responsive design - Percent width</h1>
|
||||
<section>
|
||||
<h1 id="responsive">Responsive design - Percent width</h1>
|
||||
|
||||
<p>
|
||||
Select2's width can be set to a percentage of its parent to support
|
||||
@ -318,6 +294,7 @@ $(".js-data-example-ajax").select2({
|
||||
width respectively.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
||||
</p>
|
||||
@ -326,8 +303,6 @@ $(".js-data-example-ajax").select2({
|
||||
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-responsive"></pre>
|
||||
|
||||
@ -342,12 +317,10 @@ $(".js-data-example-ajax").select2({
|
||||
<select class="js-example-responsive" style="width: 50%"></select>
|
||||
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="disabled" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Disabled mode</h1>
|
||||
<section>
|
||||
<h1 id="disabled">Disabled mode</h1>
|
||||
|
||||
<p>
|
||||
Select2 will response the <code>disabled</code> attribute on
|
||||
@ -355,6 +328,8 @@ $(".js-data-example-ajax").select2({
|
||||
with <code>disabled: true</code> to get the same effect.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
|
||||
<p>
|
||||
<select class="js-example-disabled js-states form-control" disabled="disabled"></select>
|
||||
</p>
|
||||
@ -363,7 +338,7 @@ $(".js-data-example-ajax").select2({
|
||||
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Programmatic enabling and disabling">
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Programmatic enabling and disabling">
|
||||
<button type="button" class="js-programmatic-enable btn btn-default">
|
||||
Enable
|
||||
</button>
|
||||
@ -374,9 +349,6 @@ $(".js-data-example-ajax").select2({
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-disabled">
|
||||
@ -390,12 +362,10 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="disabled-results" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Disabled results</h1>
|
||||
<section>
|
||||
<h1 id="disabled-results">Disabled results</h1>
|
||||
|
||||
<p>
|
||||
Select2 will correctly handled disabled results, both with data coming
|
||||
@ -404,6 +374,7 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
<code>disabled: true</code> set.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-disabled-results form-control">
|
||||
<option value="one">First</option>
|
||||
@ -412,8 +383,6 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled-results"></pre>
|
||||
|
||||
@ -424,18 +393,17 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="programmatic" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Programmatic access</h1>
|
||||
<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>
|
||||
@ -468,7 +436,7 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<div class="btn-group" role="group" aria-label="Programmatic setting and clearing Select2 options">
|
||||
<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>
|
||||
@ -479,9 +447,6 @@ $(".js-programmatic-disable").on("click", function () {
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-programmatic"></pre>
|
||||
|
||||
<script type="text/javascript" class="js-code-programmatic">
|
||||
@ -499,21 +464,27 @@ $(".js-programmatic-destroy").on("click", function () { $example.select2("destro
|
||||
$(".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>
|
||||
</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>
|
||||
<section>
|
||||
|
||||
<h1 id="multiple-max">
|
||||
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>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple-limit js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-multiple-limit"></pre>
|
||||
|
||||
@ -522,12 +493,11 @@ $(".js-example-basic-multiple-limit").select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="hide-search" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Hiding the search box</h1>
|
||||
<section>
|
||||
<h1 id="hide-search">Hiding the search box</h1>
|
||||
|
||||
<p>
|
||||
Select2 allows you to hide the search box depending on the number of
|
||||
@ -535,12 +505,11 @@ $(".js-example-basic-multiple-limit").select2({
|
||||
<code>Infinity</code> to tell Select2 to never display the search box.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-hide-search js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-hide-search"></pre>
|
||||
|
||||
@ -549,12 +518,11 @@ $(".js-example-basic-hide-search").select2({
|
||||
minimumResultsForSearch: Infinity
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="events" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Events</h1>
|
||||
<section>
|
||||
<h1 id="events">Events</h1>
|
||||
|
||||
<p>
|
||||
Select2 will trigger some events on the original select element,
|
||||
@ -563,14 +531,6 @@ $(".js-example-basic-hide-search").select2({
|
||||
<a href="options.html#events">on the options page</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<code>change</code> is fired whenever an option is selected or removed.
|
||||
</p>
|
||||
@ -594,11 +554,20 @@ $(".js-example-basic-hide-search").select2({
|
||||
<code>select2:unselect</code> is fired whenever a result is unselected.
|
||||
<code>select2:unselecting</code> is fired before this and can be prevented.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-states js-example-events form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="s2-event-log">
|
||||
<ul class="js-event-log"></ul>
|
||||
</div>
|
||||
|
||||
<pre data-fill-from=".js-code-events"></pre>
|
||||
|
||||
@ -632,34 +601,30 @@ function log (name, evt) {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tags" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Tagging support</h1>
|
||||
<section>
|
||||
<h1 id="tags">Tagging support</h1>
|
||||
|
||||
<p>
|
||||
Select2 can be used to quickly set up fields used for tagging.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-tags form-control" multiple="multiple">
|
||||
<option selected="selected">orange</option>
|
||||
<option>white</option>
|
||||
<option selected="selected">purple</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Note that when tagging is enabled the user can select from pre-existing
|
||||
options or create a new tag by picking the first choice, which is what
|
||||
the user has typed into the search box so far.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tags form-control" multiple="multiple">
|
||||
<option selected="selected">orange</option>
|
||||
<option>white</option>
|
||||
<option selected="selected">purple</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-tags"></pre>
|
||||
|
||||
@ -668,12 +633,11 @@ $(".js-example-tags").select2({
|
||||
tags: true
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="tokenizer" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Automatic tokenization</h1>
|
||||
<section>
|
||||
<h1 id="tokenizer">Automatic tokenization</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports ability to add choices automatically as the user is
|
||||
@ -681,6 +645,13 @@ $(".js-example-tags").select2({
|
||||
entering a space or a comma.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The separators that should be used when tokenizing can be specified
|
||||
using the <a href="options.html#tokenSeparators">tokenSeparators</a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-tokenizer form-control" multiple="multiple">
|
||||
<option>red</option>
|
||||
@ -688,16 +659,7 @@ $(".js-example-tags").select2({
|
||||
<option>green</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The separators that should be used when tokenizing can be specified
|
||||
using the <a href="options.html#tokenSeparators">tokenSeparators</a>
|
||||
options.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-tokenizer"></pre>
|
||||
|
||||
@ -707,22 +669,17 @@ $(".js-example-tokenizer").select2({
|
||||
tokenSeparators: [',', ' ']
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="matcher" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Custom matcher</h1>
|
||||
<section>
|
||||
<h1 id="matcher">Custom matcher</h1>
|
||||
|
||||
<p>
|
||||
Unlike other dropdowns on this page, this one matches options only if
|
||||
the term appears in the beginning of the string as opposed to anywhere:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-matcher-start js-states form-control"></select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This custom matcher uses a
|
||||
<a href="options.html#compat-matcher">compatibility module</a> that is
|
||||
@ -731,9 +688,12 @@ $(".js-example-tokenizer").select2({
|
||||
have the option of using a
|
||||
<a href="options.html#matcher">more complex matcher</a>.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-matcher-start js-states form-control"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-matcher-start"></pre>
|
||||
|
||||
@ -752,12 +712,11 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="diacritics" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Diacritics support</h1>
|
||||
<section>
|
||||
<h1 id="diacritics">Diacritics support</h1>
|
||||
|
||||
<p>
|
||||
Select2's default matcher will ignore diacritics, making it easier for
|
||||
@ -765,6 +724,7 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
select below.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-diacritics form-control">
|
||||
<option>Aeróbics</option>
|
||||
@ -780,20 +740,17 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-diacritics"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-diacritics">
|
||||
$(".js-example-diacritics").select2();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="language" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Multiple languages</h1>
|
||||
<section>
|
||||
<h1 id="language">Multiple languages</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports displaying the messages in different languages, as well
|
||||
@ -802,19 +759,18 @@ $(".js-example-diacritics").select2();
|
||||
that can be displayed.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-language js-states form-control">
|
||||
</select>
|
||||
</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>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-language"></pre>
|
||||
|
||||
@ -823,12 +779,11 @@ $(".js-example-language").select2({
|
||||
language: "es"
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="themes" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Theme support</h1>
|
||||
<section>
|
||||
<h1 id="themes">Theme support</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports custom themes using the
|
||||
@ -836,22 +791,21 @@ $(".js-example-language").select2({
|
||||
so you can style Select2 to match the rest of your application.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-theme-single js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
These are using the <code>classic</code> theme, which matches the old
|
||||
look of Select2.
|
||||
</p>
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-theme-single js-states form-control">
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-theme"></pre>
|
||||
|
||||
@ -864,28 +818,23 @@ $(".js-example-theme-multiple").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="rtl" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>RTL support</h1>
|
||||
<section>
|
||||
<h1 id="rtl">RTL support</h1>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
||||
<p>
|
||||
You can also use initialize Select2 with <code>dir: "rtl"</code> set.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="s2-docs-headline-example">Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-rtl"></pre>
|
||||
|
||||
@ -894,9 +843,14 @@ $(".js-example-rtl").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-md-3" role="complementary">
|
||||
{% include nav/examples.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select class="js-source-states" style="display: none;">
|
||||
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user