jquery-simpletree
Version:
jQuery plugin for TreeView support.
386 lines (339 loc) • 11 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jquery-simpletree usage example</title>
<link rel="stylesheet" href="../dist/css/simpletree.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<style>
body {
background-color: #f1f1f1;
font-family: 'Lato', sans-serif;
font-size: 13px;
}
div.spacer {
margin-bottom: 20px;
}
#buttons {
display: none;
}
</style>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../dist/js/jquery.simpletree.js?v=150623"></script>
<script>
$(function(){
// zero tree start on document ready
$('#zeroTree').simpleTree({startCollapsed: false});
// manage first tree
$('#maketree_one').on('click',function(){
$('#firstTree').simpleTree();
});
$('#destroytree_one').on('click',function(){
$('#firstTree').simpleTree('destroy');
});
// manage second tree
$('#maketree_two').on('click',function(){
$('#secondTree').simpleTree({startCollapsed: false});
$('#buttons').fadeIn();
});
$('#destroytree_two').on('click',function(){
$('#buttons').fadeOut();
$('#secondTree').simpleTree('destroy');
});
$('#maketree_two_collapse').on('click',function() {
$('#secondTree').simpleTree('collapse');
});
$('#maketree_two_expand').on('click',function() {
$('#secondTree').simpleTree('expand');
});
// ul of class tree
$('#maketree_tree').on('click',function(){
$('.mytree').simpleTree({startCollapsed: false});
});
// add elements to a tree and repaint
$('.add_element').on('click',function() {
var ref_node = $(this).data('add');
var $element = $('#'+ref_node);
if ($element.length) {
var added_element = '<li>Added li under ' + ref_node + '</li>';
if (($element).prop("tagName") == 'UL') {
$element.append(added_element);
} else {
var $ul = $element.children('ul');
if (!$ul.length) {
$ul = $("<ul></ul>").appendTo($element);
}
$ul.eq(0).append(added_element);
}
} else {
console.warn("Element #%s not found", ref_node);
}
// repaint the treeview
var topmost_parent = $element.parents('ul').last();
if (!topmost_parent.length)
topmost_parent = $element;
topmost_parent.simpleTree('repaint');
});
// remove elements from a tree and repaint
$('.remove_element').on('click',function() {
var ref_node = $(this).data('remove');
var $element = $('#'+ref_node);
var topmost_parent = $element.parents('ul').last();
if (!topmost_parent.length)
topmost_parent = $element;
if ($element.length) {
$element.remove();
} else {
console.warn("Element #%s not found", ref_node);
}
// repaint the treeview
topmost_parent.simpleTree('repaint');
});
});
</script>
</head>
<body>
<h1>Examples of jquery-simpletree:</h1>
<div class="spacer">
<ul>
<li><a href="#zero">Treeview applied on document ready</a></li>
<li><a href="#one">Treeview applied on click of button (start collapsed)</a></li>
<li><a href="#two">Treeview applied on click of button (start open)</a> - Example of expand all and collapse all methods, element dynamically added to the listm (re-paint of the treeview)</li>
<li><a href="#tree">Treeview applied on more lists of a matching class</a></li>
</ul>
</div>
<hr>
<div class="spacer">
<a name="zero"></a>
<ul id="zeroTree">
<li><a href="#"><b>ZERO LIST (set on document ready)</b></a>
<ul>
<li><a href="#">Sub-element 1</a></li>
<li>Sub-element 2</li>
<li>Sub-element 3
<ul>
<li><a href="#">Sub-sub-element 3.1</a></li>
<li>Sub-sub-element 3.2</li>
<li>Sub-sub-element 3.3</li>
<li><a href="#">Sub-sub-element 3.4</a>
<ul>
<li>Sub-sub-sub-element 3.4.1</li>
<li>Sub-sub-sub-element 3.4.2</li>
<li>Sub-sub-sub-element 3.4.3</li>
</ul>
</li>
<li>Sub-sub-element 3.5</li>
</ul>
</li>
<li>Sub-element 4</li>
</ul>
</li>
</ul>
</div>
<hr>
<div class="spacer">
<a name="one"></a>
<button id="maketree_one">Make a Tree with first list (start CLOSED)</button>
<button id="destroytree_one">Destroy tree</button>
<ul id="firstTree" class="tree">
<li><b>FIRST LIST</b></li>
<li><a href="#">Element 2</a>
<ul>
<li><a href="#">Sub-element 2.1</a></li>
<li>Sub-element 2.2</li>
<li>Sub-element 2.3
<ul style="background-color: #ccffcc;">
<li><a href="#">Sub-sub-element 2.3.1</a> <em>Light green BG here to test last child correct BG image</em></li>
<li>Sub-sub-element 2.3.2</li>
<li>Sub-sub-element 2.3.3</li>
<li><a href="#">Sub-sub-element 2.3.4</a>
<ul>
<li>Sub-sub-sub-element 2.3.4.1</li>
<li>Sub-sub-sub-element 2.3.4.2</li>
<li>Sub-sub-sub-element 2.3.4.3</li>
</ul>
</li>
<li>Sub-sub-element 2.3.5</li>
</ul>
</li>
<li>Sub-element 2.4</li>
</ul>
</li>
<li>Element 3</li>
<li class="st-open">Element 4 START OPEN
<ul>
<li>Sub-element 4.1</li>
<li><a href="#">Sub-element 4.2</a>
<ul>
<li><a href="#">Sub-sub-element 4.2.1</a></li>
<li><a href="#">Sub-sub-element 4.2.2</a></li>
</ul>
</li>
<li><a href="#">Sub-element 4.3</a>
<ul>
<li><a href="#">Sub-sub-element 4.3.1</a></li>
<li><a href="#">Sub-sub-element 4.3.2</a>
<ul>
<li><a href="#">Sub-sub-sub-element 4.3.2.1</a></li>
<li>Sub-sub-sub-element 4.3.2.2</li>
<li>Sub-sub-sub-element 4.3.2.3</li>
</ul>
</li>
<li><a href="#">Sub-sub-element 4.3.3</a></li>
<li><a href="#">Sub-sub-element 4.3.4</a></li>
<li class="st-open"><a href="#">Sub-sub-element 4.3.5 START OPEN</a>
<ul>
<li>Sub-sub-sub-element 4.3.5.1</li>
<li><a href="#">Sub-sub-sub-element 4.3.5.2</a></li>
<li>Sub-sub-sub-element 4.3.5.3</li>
</ul>
</li>
<li><a href="#">Sub-sub-element 4.3.6</a></li>
</ul>
</li>
</ul>
</li>
<li>Element 5</li>
<li>Element 6</li>
</ul>
</div>
<hr>
<div class="spacer">
<a name="two"></a>
<button id="maketree_two">Make a Tree with second list (start OPEN)</button>
<button id="destroytree_two">Destroy treeview</button>
<button id="maketree_two_collapse">Collapse all</button>
<button id="maketree_two_expand">Expand all</button>
<p id="buttons">
<button class="add_element" data-add="secondTree">Add an element at the end</button>
<button class="add_element" data-add="node-2-1" >Add an element under 2.1</button>
<button class="add_element" data-add="node-2-3-4" >Add an element under 2.3.4</button>
<button class="add_element" data-add="node-4-3">Add an element under 4.3</button>
<button class="add_element" data-add="node-4-3-4" >Add an element under 4.3.4</button>
<button class="add_element" data-add="node-5">Add an element under 5</button>
<button class="add_element" data-add="node-6-1" >Add an element under 6.1</button>
<button class="remove_element" data-remove="node-2-4">Remove element 2.4</button>
<button class="remove_element" data-remove="node-4-3-5">Remove element 4.3.5</button>
<button class="remove_element" data-remove="node-6">Remove element 6</button>
</p>
<ul id="secondTree" class="tree">
<li><b>SECOND LIST</b></li>
<li><a href="#">Element 2</a>
<ul>
<li id="node-2-1"><a href="#">Sub-element 2.1</a></li>
<li>Sub-element 2.2</li>
<li>Sub-element 2.3
<ul style="background-color: #ccffcc;">
<li><a href="#">Sub-sub-element 2.3.1</a> <em>Light green BG here to test last child correct BG image</em></li>
<li>Sub-sub-element 2.3.2</li>
<li>Sub-sub-element 2.3.3</li>
<li id="node-2-3-4"><a href="#">Sub-sub-element 2.3.4</a>
<ul>
<li>Sub-sub-sub-element 2.3.4.1</li>
<li>Sub-sub-sub-element 2.3.4.2</li>
<li>Sub-sub-sub-element 2.3.4.3</li>
</ul>
</li>
<li>Sub-sub-element 2.3.5</li>
</ul>
</li>
<li id="node-2-4">Sub-element 2.4</li>
</ul>
</li>
<li>Element 3</li>
<li>Element 4
<ul>
<li>Sub-element 4.1</li>
<li><a href="#">Sub-element 4.2</a>
<ul>
<li><a href="#">Sub-sub-element 4.2.1</a></li>
<li><a href="#">Sub-sub-element 4.2.2</a></li>
</ul>
</li>
<li id="node-4-3"><a href="#">Sub-element 4.3</a>
<ul>
<li><a href="#">Sub-sub-element 4.3.1</a></li>
<li><a href="#">Sub-sub-element 4.3.2</a>
<ul>
<li><a href="#">Sub-sub-sub-element 4.3.2.1</a></li>
<li>Sub-sub-sub-element 4.3.2.2</li>
<li>Sub-sub-sub-element 4.3.2.3</li>
</ul>
</li>
<li><a href="#">Sub-sub-element 4.3.3</a></li>
<li id="node-4-3-4"><a href="#">Sub-sub-element 4.3.4</a></li>
<li id="node-4-3-5"><a href="#">Sub-sub-element 4.3.5</a>
<ul>
<li>Sub-sub-sub-element 4.3.5.1</li>
<li><a href="#">Sub-sub-sub-element 4.3.5.2</a></li>
<li>Sub-sub-sub-element 4.3.5.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="node-5">Element 5
<li id="node-6">Element 6
<ul>
<li id="node-6-1"><a href="#">Sub-element 6.1</a></li>
</ul>
</li>
</ul>
</div>
<hr>
<div class="spacer">
<a name="tree"></a>
<button id="maketree_tree">Make a tree on all ul list of class "mytree" (start OPEN)</button>
<ul class="mytree">
<li><b>THIRD LIST</b>
<ul>
<li><a href="#">Sub-element 1</a></li>
<li>Sub-element 2</li>
<li>Sub-element 3
<ul>
<li><a href="#">Sub-sub-element 3.1</a></li>
<li>Sub-sub-element 3.2</li>
<li>Sub-sub-element 3.3</li>
<li class="st-collapsed"><a href="#">Sub-sub-element 3.4 START CLOSED</a>
<ul>
<li>Sub-sub-sub-element 3.4.1</li>
<li>Sub-sub-sub-element 3.4.2</li>
<li>Sub-sub-sub-element 3.4.3</li>
</ul>
</li>
<li>Sub-sub-element 3.5</li>
</ul>
</li>
<li>Sub-element 4</li>
</ul>
</li>
</ul>
<p></p>
<ul class="mytree">
<li><b>FOURTH LIST</b>
<ul>
<li><a href="#">Sub-element 1</a></li>
<li>Sub-element 2</li>
<li>Sub-element 3
<ul>
<li><a href="#">Sub-sub-element 3.1</a></li>
<li>Sub-sub-element 3.2</li>
<li>Sub-sub-element 3.3</li>
<li><a href="#">Sub-sub-element 3.4</a>
<ul>
<li>Sub-sub-sub-element 3.4.1</li>
<li>Sub-sub-sub-element 3.4.2</li>
<li>Sub-sub-sub-element 3.4.3</li>
</ul>
</li>
<li>Sub-sub-element 3.5</li>
</ul>
</li>
<li>Sub-element 4</li>
</ul>
</li>
</ul>
</div>
</body>
</html>