Group diacritics, RTL and l10n examples.

Just an example – very unsure what goes with what.

docs/_includes/nav/examples.html

@@ -48,18 +48,22 @@
     <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>
+      <a href="#localization-rtl-diacritics">Localization, RTL and diacritics support</a>
+      <ul class="nav">
+        <li>
+          <a href="#language">Multiple languages</a>
+        </li>
+        <li>
+          <a href="#rtl">RTL support</a>
+        </li>
+        <li>
+          <a href="#diacritics">Diacritics support</a>
+        </li>
+      </ul>
   </ul>
   <a class="back-to-top" href="#top">
     Back to top

docs/examples.html

@@ -716,40 +716,49 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
       </section>
 
       <section>
-        <h1 id="diacritics">Diacritics support</h1>
+        <h1 id="themes">Theme 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.
+          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-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 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-diacritics"></pre>
+        <pre data-fill-from=".js-code-theme"></pre>
 
-<script type="text/x-example-code" class="js-code-diacritics">
-$(".js-example-diacritics").select2();
+<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>
 
         <p>
@@ -780,68 +789,57 @@ $(".js-example-language").select2({
 });
 </script>
 
-      </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>
+        <h1 id="rtl">RTL support</h1>
 
         <p>
-          These are using the <code>classic</code> theme, which matches the old
-          look of Select2.
+          Select2 will work on RTL websites if the <code>dir</code> attribute is
+          set on the <code>&lt;select&gt;</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-theme-single js-states form-control">
-            </select>
-          </p>
-
-          <p>
-            <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
+            <select class="js-example-rtl js-states form-control" dir="rtl"></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"
-});
+        <pre data-fill-from=".js-code-rtl"></pre>
 
-$(".js-example-theme-multiple").select2({
-  theme: "classic"
+<script type="text/x-example-code" class="js-code-rtl">
+$(".js-example-rtl").select2({
+  dir: "rtl"
 });
 </script>
 
-      </section>
-
-      <section>
-        <h1 id="rtl">RTL support</h1>
+        <h1 id="diacritics">Diacritics support</h1>
 
         <p>
-          Select2 will work on RTL websites if the <code>dir</code> attribute is
-          set on the <code>&lt;select&gt;</code> or any parents of it. You can also
-          initialize Select2 with <code>dir: "rtl"</code> set.
+          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-rtl js-states form-control" dir="rtl"></select>
+            <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-rtl"></pre>
+        <pre data-fill-from=".js-code-diacritics"></pre>
 
-<script type="text/x-example-code" class="js-code-rtl">
-$(".js-example-rtl").select2({
-  dir: "rtl"
-});
+<script type="text/x-example-code" class="js-code-diacritics">
+$(".js-example-diacritics").select2();
 </script>
 
       </section>