TreeView
@@adsenseTreeView
-
Favorites
- Projects
- Downloads
- Desktop
-
OneDrive
- Documents
-
Projects
- Metro UI CSS
- Restyle
- DNMarket
- Test Project
- Photos
- Videos
- Music
- Location
- Computers
- Phones
-
Network
- ASUS
- BARACUDA
- EPSON
- VUSOLO
- GALAXY S4
Checkbox & Radio
-
Checkboxes
- Play animations
- Play sounds
- Disabled leaf
- Read only
-
Radio buttons
- Play animations
- Play sounds
- Disabled leaf
- Show pictures
-
Mixed
- Play animations
- Play animations
- Play sounds
Indeterminate
-
Indeterminate
-
Play video
- AVI
- MPEG
- VIDX
- XVID
-
Options
- Option 1
- Option 2
-
Sub Options
- Sub Option 1
- Sub Option 2
- Sub Option 3
- Other
-
Play video
Simple tree
<div class="treeview" data-role="treeview">
<ul>
<li><span class="leaf">Leaf name</span></li>
...
<li>
<span class="leaf">Leaf name</span>
<ul>
<li><span class="leaf">Leaf name</span></li>
...
<li><span class="leaf">Leaf name</span></li>
</ul>
</li>
</ul>
</div>
Create node
<li class="node">
<span class="leaf">Leaf name</span>
<span class="node-toggle"></span>
<ul>
<li><span class="leaf">Leaf name</span></li>
...
<li><span class="leaf">Leaf name</span></li>
</ul>
</li>
Create collapsed node
<li class="node collapsed">
<span class="leaf">Leaf name</span>
<span class="node-toggle"></span>
<ul>
<li><span class="leaf">Leaf name</span></li>
...
<li><span class="leaf">Leaf name</span></li>
</ul>
</li>
Create anchor leaf
<li>
<a href="..." class="leaf">Leaf name</a>
</li>
Create leaf with icon (ex: Font Awesome), required class icon
<li>
<span class="leaf"><span class="icon mif-tablet"></span> Leaf name</span>
</li>
Create leaf with icon (ex: img), required class icon
<li>
<span class="leaf"><img src="..." class="icon"> Leaf name</span>
</li>
Create leaf with checkbox
<li data-mode="checkbox" data-name="checkbox_name" data-checked="true">
<span class="leaf">Leaf name</span>
</li>
Create leaf with radio button
<li data-mode="radio" data-name="radio_name" data-checked="true">
<span class="leaf">Leaf name</span>
</li>
Additional examples
Add leaf on click on leaf
Click on Root or any leaf
- Root
<div class="treeview"
data-role="treeview"
id="tree_add_leaf_example"
data-double-click="false"
data-on-click="tree_add_leaf_example_click">
<ul>
<li><span class="leaf">Root</span></li>
</ul>
</div>
<script>
function tree_add_leaf_example_click(leaf, node, pnode, tree){
tree.addLeaf(node, "Leaf item");
}
</script>
Add leaf on runtime
Click on leaf, then click button "Add leaf" or click button "Add root"
- Root
<div class="treeview"
data-role="treeview"
id="tree_add_leaf_runtime_example">
<ul>
<li><span class="leaf">Root</span></li>
</ul>
</div>
<script>
function tree_add_root_runtime_example_click(){
var tree = $("#tree_add_leaf_runtime_example").data("treeview");
tree.addLeaf(false, "Root");
}
function tree_add_leaf_runtime_example_click(){
var tree = $("#tree_add_leaf_runtime_example").data("treeview");
var node = tree.element.find('li.active');
tree.addLeaf(node, "Leaf item");
}
</script>
Add leaf with checkbox and radio
Click on leaf, then click button "Add leaf" or click button "Add root"
- Root
<div class="treeview"
data-role="treeview"
id="tree_add_leaf_runtime_example2">
<ul>
<li><span class="leaf">Root</span></li>
</ul>
</div>
<script>
function tree_add_leaf_checkbox_example_click(){
var tree = $("#tree_add_leaf_runtime_example2").data("treeview");
var node = tree.element.find('li.active');
tree.addLeaf(node, "Leaf item", {
mode: 'checkbox',
checked: (Math.round(Math.random()) === 0 ? false : true)
});
}
function tree_add_leaf_radio_example_click(){
var tree = $("#tree_add_leaf_runtime_example2").data("treeview");
var node = tree.element.find('li.active');
tree.addLeaf(node, "Leaf item", {
mode: 'radio',
name: 'r1',
checked: (Math.round(Math.random()) === 0 ? false : true)
});
}
</script>