From 75163d67cb80e4279965a97e9eeda5b171806085 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sun, 14 Feb 2016 13:33:33 -0500 Subject: [PATCH] Switched options page to use Jekyll highlighting --- docs/_includes/options/core/amd-support.html | 4 ++-- .../options/core/data-attributes.html | 20 ++++++++--------- docs/_includes/options/core/options.html | 20 ++++++++--------- docs/_includes/options/data/ajax.html | 16 +++++++------- docs/_includes/options/data/array.html | 8 +++---- docs/_includes/options/data/select.html | 22 +++++++++---------- .../_includes/options/dropdown/filtering.html | 16 +++++++------- .../_includes/options/dropdown/placement.html | 4 ++-- .../options/dropdown/selections.html | 8 +++---- .../selections/clearing-selections.html | 4 ++-- .../options/selections/placeholder.html | 12 +++++----- .../options/selections/templating.html | 4 ++-- 12 files changed, 69 insertions(+), 69 deletions(-) diff --git a/docs/_includes/options/core/amd-support.html b/docs/_includes/options/core/amd-support.html index faa23246..2cb6b307 100644 --- a/docs/_includes/options/core/amd-support.html +++ b/docs/_includes/options/core/amd-support.html @@ -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 amdBase and amdLanugageBase options.

-
+{% highlight js linenos %}
 $.fn.select2.defaults.set('amdBase', 'select2/');
 $.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
-
+{% endhighlight %}

Select2 is being placed before jQuery in my JavaScript file diff --git a/docs/_includes/options/core/data-attributes.html b/docs/_includes/options/core/data-attributes.html index 357bfaa9..db6078d9 100644 --- a/docs/_includes/options/core/data-attributes.html +++ b/docs/_includes/options/core/data-attributes.html @@ -22,21 +22,21 @@ This means that if you declare your <select> tag as...

-
-<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
-
+{% highlight html linenos %} + +{% endhighlight %}

Will be interpreted the same as initializing Select2 as...

-
+{% highlight js linenos %}
 $("select").select2({
   tags: "true",
   placeholder: "Select an option",
   allowClear: true
 });
-
+{% endhighlight %}

Are options with nested configurations supported? @@ -51,22 +51,22 @@ $("select").select2({ do not work in jQuery 1.x.

-
-<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
-
+{% highlight html linenos %} + +{% endhighlight %}

Which will be interpreted the same as initializing Select2 with...

-
+{% highlight js linenos %}
 $("select").select2({
   ajax: {
     url: "http://example.org/api/test",
     cache: true
   }
 });
-
+{% endhighlight %}

The value of the option is subject to jQuery's diff --git a/docs/_includes/options/core/options.html b/docs/_includes/options/core/options.html index 8f712626..aaa2b112 100644 --- a/docs/_includes/options/core/options.html +++ b/docs/_includes/options/core/options.html @@ -7,19 +7,19 @@ Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery element where you would like to initialize Select2.

-
+{% highlight js linenos %}
 $('select').select2();
-
+{% endhighlight %}

You can optionally pass an object containing all of the options that you would like to initialize Select2 with.

-
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'Select an option'
 });
-
+{% endhighlight %}

Can default options be set for all dropdowns? @@ -45,9 +45,9 @@ $('select').select2({ $.fn.select2.defaults.set("key", "value").

-
+{% highlight js linenos %}
 $.fn.select2.defaults.set("theme", "classic");
-
+{% endhighlight %}

How can I set a default value for a nested option? @@ -62,9 +62,9 @@ $.fn.select2.defaults.set("theme", "classic"); string.

-
+{% highlight js linenos %}
 $.fn.select2.defaults.set("ajax--cache", false);
-
+{% endhighlight %}

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

-
+{% highlight js linenos %}
 $.fn.select2.defaults.reset();
-
+{% endhighlight %} \ No newline at end of file diff --git a/docs/_includes/options/data/ajax.html b/docs/_includes/options/data/ajax.html index 0aa3b117..bfd677f1 100644 --- a/docs/_includes/options/data/ajax.html +++ b/docs/_includes/options/data/ajax.html @@ -29,7 +29,7 @@ You can use the ajax.processResults option to modify the data returned from the server before passing it to Select2.

-
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     url: '/example/api',
@@ -40,7 +40,7 @@ $('select').select2({
     }
   }
 });
-
+{% endhighlight %}

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 ajax.delay option.

-
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     url: '/example/api',
     delay: 250
   }
 });
-
+{% endhighlight %}

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 ajax.data option.

-
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     data: function (params) {
@@ -85,7 +85,7 @@ $('select').select2({
     }
   }
 });
-
+{% endhighlight %}

Can an AJAX plugin other than jQuery.ajax be used? @@ -95,7 +95,7 @@ $('select').select2({ Select2 uses the transport method defined in ajax.transport to send requests to your API. By default, this transport method is jQuery.ajax but this can be changed.

-
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     transport: function (params, success, failure) {
@@ -105,5 +105,5 @@ $('select').select2({
     }
   }
 });
-
+{% endhighlight %} \ No newline at end of file diff --git a/docs/_includes/options/data/array.html b/docs/_includes/options/data/array.html index 73176c4a..d9fec405 100644 --- a/docs/_includes/options/data/array.html +++ b/docs/_includes/options/data/array.html @@ -7,7 +7,7 @@ While Select2 is designed to be used with a <select> tag, the data that is used to search through and display the results can be loaded from a JavaScript array using the data option. This option should be passed in during the initialization of Select2.

-
+{% highlight js linenos %}
 $('select').select2({
   data: [
     {
@@ -17,7 +17,7 @@ $('select').select2({
     // ... more data objects ...
   ]
 });
-
+{% endhighlight %}

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 children property on the data objects that are passed in. This children 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 text property on the root data object.

-
+{% highlight js linenos %}
 {
   text: 'Group label',
   children: [
@@ -46,7 +46,7 @@ $('select').select2({
     // ... more data objects ...
   ]
 }
-
+{% endhighlight %}

How many levels of nesting are allowed? diff --git a/docs/_includes/options/data/select.html b/docs/_includes/options/data/select.html index 5db2b608..aa323012 100644 --- a/docs/_includes/options/data/select.html +++ b/docs/_includes/options/data/select.html @@ -15,13 +15,13 @@ A standard <select> box can display nested options by wrapping them with in an <optgroup> tag.

-
-<select>
-  <optgroup label="Group Name">
-    <option>Nested option</option>
-  </optgroup>
-</select>
-
+{% highlight html linenos %} + +{% endhighlight %}

How many levels of nesting can there be? @@ -47,23 +47,23 @@ Select2 will convert the <option> tag into a data object based on the following rules.

-
+{% highlight js linenos %}
 {
   "id": "value attribute" || "option text",
   "text": "label attribute" || "option text",
   "element": HTMLOptionElement
 }
-
+{% endhighlight %}

And <optgroup> tags will be converted into data objects using the following rules

-
+{% highlight js linenos %}
 {
   "text": "label attribute",
   "children": [ option data object, ... ],
   "elment": HTMLOptGroupElement
 }
-
+{% endhighlight %} \ No newline at end of file diff --git a/docs/_includes/options/dropdown/filtering.html b/docs/_includes/options/dropdown/filtering.html index 9a05511a..7e6bce75 100644 --- a/docs/_includes/options/dropdown/filtering.html +++ b/docs/_includes/options/dropdown/filtering.html @@ -7,13 +7,13 @@ Can Select2 wait until the user has typed a search term before triggering the request?

-
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     delay: 250 // wait 250 milliseconds before triggering the request
   }
 });
-
+{% endhighlight %} {% include options/not-written.html %} @@ -21,11 +21,11 @@ $('select').select2({ Select2 is allowing long search terms, can this be prevented? -
+{% highlight js linenos %}
 $('select').select2({
   maximumInputLength: 20 // only allow terms up to 20 characters long
 });
-
+{% endhighlight %} {% include options/not-written.html %} @@ -33,11 +33,11 @@ $('select').select2({ I only want the search box if there are enough results -
+{% highlight js linenos %}
 $('select').select2({
   minimumResultsForSearch: 20 // at least 20 results must be displayed
 });
-
+{% endhighlight %} {% include options/not-written.html %} @@ -45,11 +45,11 @@ $('select').select2({ How can I permanently hide the search box? -
+{% highlight js linenos %}
 $('select').select2({
   minimumResultsForSearch: Infinity
 });
-
+{% endhighlight %} {% include options/not-written.html %} \ No newline at end of file diff --git a/docs/_includes/options/dropdown/placement.html b/docs/_includes/options/dropdown/placement.html index 1962b49b..76fc3a39 100644 --- a/docs/_includes/options/dropdown/placement.html +++ b/docs/_includes/options/dropdown/placement.html @@ -13,11 +13,11 @@ Can I pick an element for the dropdown to be appended to? -
+{% highlight js linenos %}
 $('select').select2({
   dropdownParent: $('#my_amazing_modal')
 });
-
+{% endhighlight %} {% include options/not-written.html %} diff --git a/docs/_includes/options/dropdown/selections.html b/docs/_includes/options/dropdown/selections.html index c51b6662..1c9f86e3 100644 --- a/docs/_includes/options/dropdown/selections.html +++ b/docs/_includes/options/dropdown/selections.html @@ -7,11 +7,11 @@ Can I select the highlighted result when the dropdown is closed? -
+{% highlight js linenos %}
 $('select').select2({
   selectOnClose: true
 });
-
+{% endhighlight %} {% include options/not-written.html %} @@ -19,11 +19,11 @@ $('select').select2({ Can I prevent the dropdown from closing when a result is selected? -
+{% highlight js linenos %}
 $('select').select2({
   closeOnSelect: false
 });
-
+{% endhighlight %} {% include options/not-written.html %} \ No newline at end of file diff --git a/docs/_includes/options/selections/clearing-selections.html b/docs/_includes/options/selections/clearing-selections.html index fb393bd5..dd9c10d2 100644 --- a/docs/_includes/options/selections/clearing-selections.html +++ b/docs/_includes/options/selections/clearing-selections.html @@ -7,12 +7,12 @@ You can allow people to clear their current selections with the allowClear option when initializing Select2. Setting this option to true will enable an "x" icon that will reset the selection to the placeholder.

-
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'This is my placeholder',
   allowClear: true
 });
-
+{% endhighlight %}

Why is a placeholder required? diff --git a/docs/_includes/options/selections/placeholder.html b/docs/_includes/options/selections/placeholder.html index a6d29a1f..db428281 100644 --- a/docs/_includes/options/selections/placeholder.html +++ b/docs/_includes/options/selections/placeholder.html @@ -7,11 +7,11 @@ Select2 supports displaying a placeholder by default using the placeholder 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.

-
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'Select an option'
 });
-
+{% endhighlight %}

My first option is being displayed instead of my placeholder @@ -41,14 +41,14 @@ $('select').select2({ The placeholder option allows you to pass in a data object instead of just a string if you need more flexibility. The id of the data object should match the value of the placeholder option.

-
+{% highlight js linenos %}
 $('select').select2({
   placeholder: {
     id: '-1', // the value of the option
     text: 'Select an option'
   }
 });
-
+{% endhighlight %}

Can I change how the placeholder looks? @@ -58,7 +58,7 @@ $('select').select2({ When using Select2 when only a single selection can be made, the placeholder option will be passed through the standard templating methods, incluidng the templateSelection option, so you are able to change how it is displayed.

-
+{% highlight js linenos %}
 $('select').select2({
   templateResult: function (data) {
     if (data.id === '') { // adjust for custom placeholder values
@@ -68,7 +68,7 @@ $('select').select2({
     return data.text;
   }
 });
-
+{% endhighlight %}

When multiple selections are allowed, the placeholder will be displayed using the placeholder attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: Change an input's HTML5 placeholder color with CSS diff --git a/docs/_includes/options/selections/templating.html b/docs/_includes/options/selections/templating.html index 2e9fad57..19eb8f23 100644 --- a/docs/_includes/options/selections/templating.html +++ b/docs/_includes/options/selections/templating.html @@ -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 templateSelection option to a JavaScript function.

-
+{% highlight js linenos %}
 function template(data, container) {
   return data.text;
 }
@@ -15,7 +15,7 @@ function template(data, container) {
 $('select').select2({
   templateSelection: template
 });
-
+{% endhighlight %}

Nothing is being displayed when I select an option