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

Switched options page to use Jekyll highlighting

Browse Source
This commit is contained in:
Kevin Brown 2016-02-14 13:33:33 -05:00
parent a126b53b4c
commit 75163d67cb
12 changed files with 69 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/options/core/amd-support.html
View File

@ -19,10 +19,10 @@
If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional dependencies or language files. You can manually set the prefixes to use for these files using the <code>amdBase</code> and <code>amdLanugageBase</code> options. If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional dependencies or language files. You can manually set the prefixes to use for these files using the <code>amdBase</code> and <code>amdLanugageBase</code> options.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$.fn.select2.defaults.set('amdBase', 'select2/'); $.fn.select2.defaults.set('amdBase', 'select2/');
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/'); $.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
</pre> {% endhighlight %}
<h3> <h3>
Select2 is being placed before jQuery in my JavaScript file Select2 is being placed before jQuery in my JavaScript file

20
docs/_includes/options/core/data-attributes.html
View File

@ -22,21 +22,21 @@
This means that if you declare your <code>&lt;select&gt;</code> tag as... This means that if you declare your <code>&lt;select&gt;</code> tag as...
</p> </p>
<pre class="prettyprint"> {% highlight html linenos %}
&lt;select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"&gt;&lt;/select&gt; <select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
</pre> {% endhighlight %}
<p> <p>
Will be interpreted the same as initializing Select2 as... Will be interpreted the same as initializing Select2 as...
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$("select").select2({ $("select").select2({
tags: "true", tags: "true",
placeholder: "Select an option", placeholder: "Select an option",
allowClear: true allowClear: true
}); });
</pre> {% endhighlight %}
<h3> <h3>
Are options with nested configurations supported? Are options with nested configurations supported?
@ -51,22 +51,22 @@ $("select").select2({
<a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>. <a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
</p> </p>
<pre class="prettyprint"> {% highlight html linenos %}
&lt;select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"&gt;&lt;/select&gt; <select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
</pre> {% endhighlight %}
<p> <p>
Which will be interpreted the same as initializing Select2 with... Which will be interpreted the same as initializing Select2 with...
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$("select").select2({ $("select").select2({
ajax: { ajax: {
url: "http://example.org/api/test", url: "http://example.org/api/test",
cache: true cache: true
} }
}); });
</pre> {% endhighlight %}
<p> <p>
The value of the option is subject to jQuery's The value of the option is subject to jQuery's

20
docs/_includes/options/core/options.html
View File

@ -7,19 +7,19 @@
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2. Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2(); $('select').select2();
</pre> {% endhighlight %}
<p> <p>
You can optionally pass an object containing all of the options that you would like to initialize Select2 with. You can optionally pass an object containing all of the options that you would like to initialize Select2 with.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
placeholder: 'Select an option' placeholder: 'Select an option'
}); });
</pre> {% endhighlight %}
<h3 id="setting-default-options"> <h3 id="setting-default-options">
Can default options be set for all dropdowns? Can default options be set for all dropdowns?
@ -45,9 +45,9 @@ $('select').select2({
<code>$.fn.select2.defaults.set("key", "value")</code>. <code>$.fn.select2.defaults.set("key", "value")</code>.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$.fn.select2.defaults.set("theme", "classic"); $.fn.select2.defaults.set("theme", "classic");
</pre> {% endhighlight %}
<h3> <h3>
How can I set a default value for a nested option? How can I set a default value for a nested option?
@ -62,9 +62,9 @@ $.fn.select2.defaults.set("theme", "classic");
string. string.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$.fn.select2.defaults.set("ajax--cache", false); $.fn.select2.defaults.set("ajax--cache", false);
</pre> {% endhighlight %}
<h3> <h3>
How can I reset all of the global default options? How can I reset all of the global default options?
@ -74,7 +74,7 @@ $.fn.select2.defaults.set("ajax--cache", false);
You can reset the default options to their initial values by calling You can reset the default options to their initial values by calling
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$.fn.select2.defaults.reset(); $.fn.select2.defaults.reset();
</pre> {% endhighlight %}
</section> </section>

16
docs/_includes/options/data/ajax.html
View File

@ -29,7 +29,7 @@
You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2. You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
ajax: { ajax: {
url: '/example/api', url: '/example/api',
@ -40,7 +40,7 @@ $('select').select2({
} }
} }
}); });
</pre> {% endhighlight %}
<h3> <h3>
A request is being triggered on every key stroke, can I delay this? A request is being triggered on every key stroke, can I delay this?
@ -50,14 +50,14 @@ $('select').select2({
By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the <code>ajax.delay</code> option. By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the <code>ajax.delay</code> option.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
ajax: { ajax: {
url: '/example/api', url: '/example/api',
delay: 250 delay: 250
} }
}); });
</pre> {% endhighlight %}
<p> <p>
This will tell Select2 to wait 250 milliseconds before sending the request out to your API. This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
@ -71,7 +71,7 @@ $('select').select2({
By default, Select2 will send the query term as well as the pagination data as query parameters in requests. You can override the data that is sent to your API, or change any of the query paramters, by overriding the <code>ajax.data</codE> option. By default, Select2 will send the query term as well as the pagination data as query parameters in requests. You can override the data that is sent to your API, or change any of the query paramters, by overriding the <code>ajax.data</codE> option.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
ajax: { ajax: {
data: function (params) { data: function (params) {
@ -85,7 +85,7 @@ $('select').select2({
} }
} }
}); });
</pre> {% endhighlight %}
<h3> <h3>
Can an AJAX plugin other than <code>jQuery.ajax</code> be used? Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
@ -95,7 +95,7 @@ $('select').select2({
Select2 uses the transport method defined in <code>ajax.transport</code> to send requests to your API. By default, this transport method is <code>jQuery.ajax</code> but this can be changed. Select2 uses the transport method defined in <code>ajax.transport</code> to send requests to your API. By default, this transport method is <code>jQuery.ajax</code> but this can be changed.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
ajax: { ajax: {
transport: function (params, success, failure) { transport: function (params, success, failure) {
@ -105,5 +105,5 @@ $('select').select2({
} }
} }
}); });
</pre> {% endhighlight %}
</section> </section>

8
docs/_includes/options/data/array.html
View File

@ -7,7 +7,7 @@
While Select2 is designed to be used with a <code>&lt;select&gt;</code> tag, the data that is used to search through and display the results can be loaded from a JavaScript array using the <code>data</code> option. This option should be passed in during the initialization of Select2. While Select2 is designed to be used with a <code>&lt;select&gt;</code> tag, the data that is used to search through and display the results can be loaded from a JavaScript array using the <code>data</code> option. This option should be passed in during the initialization of Select2.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
data: [ data: [
{ {
@ -17,7 +17,7 @@ $('select').select2({
// ... more data objects ... // ... more data objects ...
] ]
}); });
</pre> {% endhighlight %}
<h3> <h3>
What properties are required on the objects passed in to the array? What properties are required on the objects passed in to the array?
@ -35,7 +35,7 @@ $('select').select2({
Nested results should be specified using the <code>children</code> property on the data objects that are passed in. This <code>children</code> property should be an array of data objects that are grouped under this option, and the label for the group should be specified as the <code>text</code> property on the root data object. Nested results should be specified using the <code>children</code> property on the data objects that are passed in. This <code>children</code> property should be an array of data objects that are grouped under this option, and the label for the group should be specified as the <code>text</code> property on the root data object.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
{ {
text: 'Group label', text: 'Group label',
children: [ children: [
@ -46,7 +46,7 @@ $('select').select2({
// ... more data objects ... // ... more data objects ...
] ]
} }
</pre> {% endhighlight %}
<h3> <h3>
How many levels of nesting are allowed? How many levels of nesting are allowed?

22
docs/_includes/options/data/select.html
View File

@ -15,13 +15,13 @@
A standard <code>&lt;select&gt;</code> box can display nested options by wrapping them with in an <code>&lt;optgroup&gt;</code> tag. A standard <code>&lt;select&gt;</code> box can display nested options by wrapping them with in an <code>&lt;optgroup&gt;</code> tag.
</p> </p>
<pre class="prettyprint"> {% highlight html linenos %}
&lt;select&gt; <select>
&lt;optgroup label="Group Name"&gt; <optgroup label="Group Name">
&lt;option&gt;Nested option&lt;/option&gt; <option>Nested option</option>
&lt;/optgroup&gt; </optgroup>
&lt;/select&gt; </select>
</pre> {% endhighlight %}
<h3> <h3>
How many levels of nesting can there be? How many levels of nesting can there be?
@ -47,23 +47,23 @@
Select2 will convert the <code>&lt;option&gt;</code> tag into a data object based on the following rules. Select2 will convert the <code>&lt;option&gt;</code> tag into a data object based on the following rules.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
{ {
"id": "value attribute" || "option text", "id": "value attribute" || "option text",
"text": "label attribute" || "option text", "text": "label attribute" || "option text",
"element": HTMLOptionElement "element": HTMLOptionElement
} }
</pre> {% endhighlight %}
<p> <p>
And <code>&lt;optgroup&gt;</code> tags will be converted into data objects using the following rules And <code>&lt;optgroup&gt;</code> tags will be converted into data objects using the following rules
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
{ {
"text": "label attribute", "text": "label attribute",
"children": [ option data object, ... ], "children": [ option data object, ... ],
"elment": HTMLOptGroupElement "elment": HTMLOptGroupElement
} }
</pre> {% endhighlight %}
</section> </section>

16
docs/_includes/options/dropdown/filtering.html
View File

@ -7,13 +7,13 @@
Can Select2 wait until the user has typed a search term before triggering the request? Can Select2 wait until the user has typed a search term before triggering the request?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
ajax: { ajax: {
delay: 250 // wait 250 milliseconds before triggering the request delay: 250 // wait 250 milliseconds before triggering the request
} }
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
@ -21,11 +21,11 @@ $('select').select2({
Select2 is allowing long search terms, can this be prevented? Select2 is allowing long search terms, can this be prevented?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
maximumInputLength: 20 // only allow terms up to 20 characters long maximumInputLength: 20 // only allow terms up to 20 characters long
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
@ -33,11 +33,11 @@ $('select').select2({
I only want the search box if there are enough results I only want the search box if there are enough results
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
minimumResultsForSearch: 20 // at least 20 results must be displayed minimumResultsForSearch: 20 // at least 20 results must be displayed
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
@ -45,11 +45,11 @@ $('select').select2({
How can I permanently hide the search box? How can I permanently hide the search box?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
minimumResultsForSearch: Infinity minimumResultsForSearch: Infinity
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
</section> </section>

4
docs/_includes/options/dropdown/placement.html
View File

@ -13,11 +13,11 @@
Can I pick an element for the dropdown to be appended to? Can I pick an element for the dropdown to be appended to?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
dropdownParent: $('#my_amazing_modal') dropdownParent: $('#my_amazing_modal')
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}

8
docs/_includes/options/dropdown/selections.html
View File

@ -7,11 +7,11 @@
Can I select the highlighted result when the dropdown is closed? Can I select the highlighted result when the dropdown is closed?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
selectOnClose: true selectOnClose: true
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
@ -19,11 +19,11 @@ $('select').select2({
Can I prevent the dropdown from closing when a result is selected? Can I prevent the dropdown from closing when a result is selected?
</h3> </h3>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
closeOnSelect: false closeOnSelect: false
}); });
</pre> {% endhighlight %}
{% include options/not-written.html %} {% include options/not-written.html %}
</section> </section>

4
docs/_includes/options/selections/clearing-selections.html
View File

@ -7,12 +7,12 @@
You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder. You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
placeholder: 'This is my placeholder', placeholder: 'This is my placeholder',
allowClear: true allowClear: true
}); });
</pre> {% endhighlight %}
<h3> <h3>
Why is a placeholder required? Why is a placeholder required?

12
docs/_includes/options/selections/placeholder.html
View File

@ -7,11 +7,11 @@
Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option. Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
placeholder: 'Select an option' placeholder: 'Select an option'
}); });
</pre> {% endhighlight %}
<h3> <h3>
My first option is being displayed instead of my placeholder My first option is being displayed instead of my placeholder
@ -41,14 +41,14 @@ $('select').select2({
The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option. The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
placeholder: { placeholder: {
id: '-1', // the value of the option id: '-1', // the value of the option
text: 'Select an option' text: 'Select an option'
} }
}); });
</pre> {% endhighlight %}
<h3> <h3>
Can I change how the placeholder looks? Can I change how the placeholder looks?
@ -58,7 +58,7 @@ $('select').select2({
When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, incluidng the <code>templateSelection</code> option, so you are able to change how it is displayed. When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, incluidng the <code>templateSelection</code> option, so you are able to change how it is displayed.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
$('select').select2({ $('select').select2({
templateResult: function (data) { templateResult: function (data) {
if (data.id === '') { // adjust for custom placeholder values if (data.id === '') { // adjust for custom placeholder values
@ -68,7 +68,7 @@ $('select').select2({
return data.text; return data.text;
} }
}); });
</pre> {% endhighlight %}
<p> <p>
<strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a> <strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a>

4
docs/_includes/options/selections/templating.html
View File

@ -7,7 +7,7 @@
When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box. You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function. When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box. You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
</p> </p>
<pre class="prettyprint"> {% highlight js linenos %}
function template(data, container) { function template(data, container) {
return data.text; return data.text;
} }
@ -15,7 +15,7 @@ function template(data, container) {
$('select').select2({ $('select').select2({
templateSelection: template templateSelection: template
}); });
</pre> {% endhighlight %}
<h3> <h3>
Nothing is being displayed when I select an option Nothing is being displayed when I select an option