Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Correcting Tree documentation markup order #1545

Merged
merged 1 commit into from
Sep 29, 2015
Merged

Correcting Tree documentation markup order #1545

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 34 additions & 31 deletions _includes/js/tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>