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"

docs/_includes/nav/examples.html

@@ -10,16 +10,17 @@
       <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>
+      <a href="#data-other">
+        Other data sources
+      </a>
+      <ul class="nav">
+        <li>
+          <a href="#data-array">Loading array data</a>
+        </li>
+        <li>
+          <a href="#data-ajax">Loading remote data</a>
+        </li>
+      </ul>
     </li>
     <li>
       <a href="#disabled">Disabled mode</a>
@@ -27,9 +28,6 @@
     <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>
@@ -37,7 +35,15 @@
       <a href="#hide-search">Hiding the search box</a>
     </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>
       <a href="#tags">Tagging support</a>
@@ -48,9 +54,6 @@
     <li>
       <a href="#matcher">Custom matcher</a>
     </li>
-    <li>
-      <a href="#themes">Theme support</a>
-    </li>
     <li>
       <a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
       <ul class="nav">
@@ -64,6 +67,23 @@
           <a href="#diacritics">Diacritics support</a>
         </li>
       </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>
   <a class="back-to-top" href="#top">
     Back to top

docs/examples.html

@@ -91,6 +91,7 @@ $(".js-example-basic-multiple").select2();
       </section>
 
       <section>
+
         <h1 id="placeholders">Placeholders</h1>
 
         <p>
@@ -125,49 +126,15 @@ $(".js-example-placeholder-multiple").select2({
   placeholder: "Select a state"
 });
 </script>
+
       </section>
 
       <section>
-        <h1 id="templating">Templating</h1>
-
-        <p>
-          Various display options of the Select2 component can be changed:
-          You can access the <code>&lt;option&gt;</code> element
-          (or <code>&lt;optgroup&gt;</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>
+        <h1 id="data-other" class="page-header">
+          Other data sources
+        </h1>
 
-      <section>
         <h1 id="data-array" >Loading array data</h1>
 
         <p>
@@ -208,10 +175,8 @@ $(".js-example-data-array-selected").select2({
   <option value="2" selected="selected">duplicate</option>
 </select>
 </script>
-      </section>
 
-      <section>
-        <h1 id="data-ajax" >Loading remote data</h1>
+        <h2 id="data-ajax" >Loading remote data</h2>
 
         <p>
           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>
 </select>
 </script>
-      </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>
 
         <p>
@@ -362,6 +295,7 @@ $(".js-programmatic-disable").on("click", function () {
   $(".js-example-disabled-multi").prop("disabled", true);
 });
 </script>
+
       </section>
 
       <section>
@@ -395,78 +329,6 @@ $(".js-programmatic-disable").on("click", function () {
 </script>
       </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>
 
         <h1 id="multiple-max">
@@ -497,6 +359,7 @@ $(".js-example-basic-multiple-limit").select2({
       </section>
 
       <section>
+
         <h1 id="hide-search">Hiding the search box</h1>
 
         <p>
@@ -522,7 +385,12 @@ $(".js-example-basic-hide-search").select2({
       </section>
 
       <section>
-        <h1 id="events">Events</h1>
+
+        <h1 id="programmatic-control" class="page-header">
+          Programmatic control
+        </h1>
+
+        <h2 id="events">Events</h2>
 
         <p>
           Select2 will trigger some events on the original select element,
@@ -601,9 +469,80 @@ function log (name, evt) {
   });
 }
 </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>
+
         <h1 id="tags">Tagging support</h1>
 
         <p>
@@ -637,6 +576,7 @@ $(".js-example-tags").select2({
       </section>
 
       <section>
+
         <h1 id="tokenizer">Automatic tokenization</h1>
 
         <p>
@@ -673,6 +613,7 @@ $(".js-example-tokenizer").select2({
       </section>
 
       <section>
+
         <h1 id="matcher">Custom matcher</h1>
 
         <p>
@@ -716,50 +657,17 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
       </section>
 
       <section>
-        <h1 id="themes">Theme support</h1>
-
-        <p>
-          Select2 supports custom themes using the
-          <a href="options.html#theme">theme option</a>
-          so you can style Select2 to match the rest of your application.
-        </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>
-
-        <pre data-fill-from=".js-code-theme"></pre>
-
-<script type="text/x-example-code" class="js-code-theme">
-$(".js-example-theme-single").select2({
-  theme: "classic"
-});
-
-$(".js-example-theme-multiple").select2({
-  theme: "classic"
-});
-</script>
 
       </section>
 
       <section>
+
         <h1 id="localization-rtl-diacritics" class="page-header">
           Localization, RTL and diacritics support
         </h1>
 
-        <h1 id="language">Multiple languages</h1>
+        <h2 id="language">Multiple languages</h2>
 
         <p>
           Select2 supports displaying the messages in different languages, as well
@@ -789,7 +697,7 @@ $(".js-example-language").select2({
 });
 </script>
 
-        <h1 id="rtl">RTL support</h1>
+        <h2 id="rtl">RTL support</h2>
 
         <p>
           Select2 will work on RTL websites if the <code>dir</code> attribute is
@@ -811,7 +719,7 @@ $(".js-example-rtl").select2({
 });
 </script>
 
-        <h1 id="diacritics">Diacritics support</h1>
+        <h2 id="diacritics">Diacritics support</h2>
 
         <p>
           Select2's default matcher will ignore diacritics, making it easier for
@@ -840,6 +748,120 @@ $(".js-example-rtl").select2({
 
 <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>
+          Select2 supports custom themes using the
+          <a href="options.html#theme">theme option</a>
+          so you can style Select2 to match the rest of your application.
+        </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>
+
+        <pre data-fill-from=".js-code-theme"></pre>
+
+<script type="text/x-example-code" class="js-code-theme">
+$(".js-example-theme-single").select2({
+  theme: "classic"
+});
+
+$(".js-example-theme-multiple").select2({
+  theme: "classic"
+});
+</script>
+
+        <h2 id="templating">Templating</h2>
+
+        <p>
+          Various display options of the Select2 component can be changed:
+          You can access the <code>&lt;option&gt;</code> element
+          (or <code>&lt;optgroup&gt;</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>
+
+        <h2 id="responsive">Responsive design - Percent width</h2>
+
+        <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>