fuelux
Version:
Base Fuel UX styles and controls
85 lines (79 loc) • 3.14 kB
HTML
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div class="form-group">
<label class="control-label">Items selectable only</label>
<div class="form-group">
<ul id="MyTree" class="tree" role="tree">
<!-- branch/folder template -->
<li class="tree-branch hidden" 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">Example Folder</span>
</button>
</div>
<ul class="tree-branch-children" role="group"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<!-- item template -->
<li class="tree-item hidden" data-template="treeitem" role="treeitem">
<button type="button" class="tree-item-name">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label">Example Item</span>
</button>
</li>
</ul>
<ul id="MyTree2" class="tree" role="tree">
<!-- branch/folder template -->
<li class="tree-branch hidden" 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">Example Folder</span>
</button>
</div>
<ul class="tree-branch-children" role="group"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<!-- item template -->
<li class="tree-item hidden" data-template="treeitem" role="treeitem">
<button type="button" class="tree-item-name">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label">Example Item</span>
</button>
</li>
</ul>
</div>
</div>
<div class="form-group">
<label class="control-label">Folders selectable</label>
<div class="form-group">
<ul id="MyTreeSelectableFolder" class="tree tree-folder-select" role="tree">
<!-- branch/folder template -->
<li class="tree-branch hidden" 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>
<span class="tree-label">Example Folder</span>
</button>
</div>
<ul class="tree-branch-children"></ul>
<div class="tree-loader" role="alert">Loading...</div>
</li>
<!-- item template -->
<li class="tree-item hidden" data-template="treeitem" role="treeitem">
<button type="button" class="tree-item-name">
<span class="glyphicon icon-item fueluxicon-bullet"></span>
<span class="tree-label">Example Item</span>
</button>
</li>
</ul>
</div>
</div>
</body>
</html>