fixes #1336 by rearranging tree documentation order and providing add…

…itional explanation of markup
ExactTarget · Sep 28, 2015 · a6823c0 · a6823c0
1 parent 1a3b5b0
commit a6823c0
Showing 1 changed file with 34 additions and 31 deletions.
diff --git a/_includes/js/tree.html b/_includes/js/tree.html
@@ -252,15 +252,17 @@ <h2 id="tree-examples">Examples</h2>
   <p>Tree provides a categorical element selection. Use it to create a file system interface. Wrap the wrapper tree containers with <code>.fuelux .tree</code></p>
 
   <div class="form-group">
-    <label class="control-label">Items selectable only</label>
-    <p>Please note the location of <code>.glyphicon-play</code> <em>inside</em> <code>.tree-branch-name</code>.</p>
+    <label class="control-label">Folders selectable</label>
+    <p>Please note the location of <code>.glyphicon-play</code> <em>outside</em> <code>.tree-branch-name</code>. The control
+      allows folders to be selected by default unless the <code>folderSelect</code> option is set to <code>false</code>,
+      which then requires slightly different markup ("Items selectable only," shown further below)</p>
     <div class="form-group">
 
-      <ul class="tree" role="tree" id="myTree">
+      <ul class="tree tree-folder-select" role="tree" id="myTreeSelectableFolder">
         <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
           <div class="tree-branch-header">
+            <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
             <button type="button" class="tree-branch-name">
-              <span class="glyphicon icon-caret glyphicon-play"></span>
               <span class="glyphicon icon-folder glyphicon-folder-close"></span>
               <span class="tree-label"></span>
             </button>
@@ -278,12 +280,13 @@ <h2 id="tree-examples">Examples</h2>
 
     </div>
   </div>
+
 {% highlight html %}
-<ul class="tree" role="tree" id="myTree">
+<ul class="tree tree-folder-select" role="tree" id="myTree">
   <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
     <div class="tree-branch-header">
+      <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
       <button type="button" class="tree-branch-name">
-        <span class="glyphicon icon-caret glyphicon-play"></span>
         <span class="glyphicon icon-folder glyphicon-folder-close"></span>
         <span class="tree-label"></span>
       </button>
@@ -300,16 +303,18 @@ <h2 id="tree-examples">Examples</h2>
 </ul>
 {% endhighlight %}
 
+
   <div class="form-group">
-    <label class="control-label">Folders selectable</label>
-    <p>Please note the location of <code>.glyphicon-play</code> <em>outside</em> <code>.tree-branch-name</code>.</p>
+    <label class="control-label">Items selectable only</label>
+    <p>Please note the location of <code>.glyphicon-play</code> <em>inside</em> <code>.tree-branch-name</code>. This markup
+    is used if the <code>folderSelect</code> option is set to <code>false</code>.</p>
     <div class="form-group">
 
-      <ul class="tree tree-folder-select" role="tree" id="myTreeSelectableFolder">
+      <ul class="tree" role="tree" id="myTree">
         <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
           <div class="tree-branch-header">
-            <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
             <button type="button" class="tree-branch-name">
+              <span class="glyphicon icon-caret glyphicon-play"></span>
               <span class="glyphicon icon-folder glyphicon-folder-close"></span>
               <span class="tree-label"></span>
             </button>
@@ -327,28 +332,26 @@ <h2 id="tree-examples">Examples</h2>
 
     </div>
   </div>
-
-{% highlight html %}
-<ul class="tree tree-folder-select" role="tree" id="myTree">
-  <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
-    <div class="tree-branch-header">
-      <button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
-      <button type="button" class="tree-branch-name">
-        <span class="glyphicon icon-folder glyphicon-folder-close"></span>
+  {% highlight html %}
+  <ul class="tree" role="tree" id="myTree">
+    <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
+      <div class="tree-branch-header">
+        <button type="button" class="tree-branch-name">
+          <span class="glyphicon icon-caret glyphicon-play"></span>
+          <span class="glyphicon icon-folder glyphicon-folder-close"></span>
+          <span class="tree-label"></span>
+        </button>
+      </div>
+      <ul class="tree-branch-children" role="group"></ul>
+      <div class="tree-loader" role="alert">Loading...</div>
+    </li>
+    <li class="tree-item hide" data-template="treeitem" role="treeitem">
+      <button type="button" class="tree-item-name">
+        <span class="glyphicon icon-item fueluxicon-bullet"></span>
         <span class="tree-label"></span>
       </button>
-    </div>
-    <ul class="tree-branch-children" role="group"></ul>
-    <div class="tree-loader" role="alert">Loading...</div>
-  </li>
-  <li class="tree-item hide" data-template="treeitem" role="treeitem">
-    <button type="button" class="tree-item-name">
-      <span class="glyphicon icon-item fueluxicon-bullet"></span>
-      <span class="tree-label"></span>
-    </button>
-  </li>
-</ul>
-{% endhighlight %}
-
+    </li>
+  </ul>
+  {% endhighlight %}
 
 </div>