Takes an unordered list and makes all branches collapsable.
The "treeview" class is added if not already present.
To hide branches on first display, mark their li elements with the class "closed". If the "collapsed" option is used, mark initially open
branches with class "open".Arguments:
| options (Optional) | Options | |
|---|---|---|
| A set of key/value pairs that configure the treeview. All options are optional. | ||
Options:
| Name | Type | |
|---|---|---|
| animated | String, Number | |
| Speed of animation, see animate() for details, or no animation if not specified. | ||
| collapsed | Boolean | Default: false, all expanded |
| Start with all branches collapsed. | ||
| control | Selector | |
| Container for a treecontrol, allowing the user to expand, collapse and toggle all branches with one click. | ||
| unique | Boolean | Default: false |
| Set to allow only one branch on one level to be open (closing siblings which opening). | ||
| toggle | Callback | |
| Callback when toggling a branch. Arguments: "this" refers to the UL that was shown or hidden. Works only with speed option set (set speed: 1 to enable callback without animations). | ||
| persist | String | |
| Persist the tree state in cookies or the page location. If set to "location", looks for the anchor that matches location.href and activates that part of the treeview it. Great for href-based state-saving. If set to "cookie", saves the state of the tree on each click to a cookie and restores that state on page load. | ||
| cookieId | String | Default: "treeview" |
| The cookie name to use when persisting via persist:"cookie". | ||
| prerendered | Boolean | Default: false |
| Set to skip rendering of classes and hitarea divs, assuming that is done by the serverside. Makes the tree more obtrusive, but speeds up render times for large trees signicifcantly. | ||
Prerender a tree and add only event handlers. $("#tree").treeview({ prerendered: true }) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
<style type="text/css">
#browser {
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 68.75%;
}
</style>
<script>
$(document).ready(function(){
$("#tree").treeview({
prerendered: true
})
});
</script>
</head>
<body>
<ul class="treeview" id="tree">
<li class="expandable"><div class="hitarea expandable-hitarea"></div><span><strong>Home</strong></span>
<ul style="display: none;">
<li><a href="?x">Item X</a></li>
<li><a href="?y">Item Y</a> </li>
<li class="last"><a href="?z">Item Z</a></li>
</ul>
</li>
<li class="expandable lastExpandable"><div class="hitarea expandable-hitarea lastExpandable-hitarea"></div><span><strong>News</strong></span>
<ul style="display: none;">
<li><a href="?x">Item X</a></li>
<li><a href="?y">Item Y</a> </li>
<li class="last"><a href="?z">Item Z</a></li>
</ul>
</li>
</ul>
</body>
</html>
| ||
| add | Selector | |
| Populate the tree with more nodes using this option and calling the plugin again. The selector must match elements that were added somewhere to the existing tree. Classes and event handlers are applied to match the behaviour of the existing tree. | ||
Creates a treeview and adds more elements to it on button-click.
var tree = $(".selector").treeview(); $(".button").click(function() { var newSublist = $("<li><span class='folder'>New Sublist</span><ul>" + "<li><span class='file'>Item1</span></li>" + "<li><span class='file'>Item2</span></li></ul></li>").appendTo(tree); tree.treeview({ add: newSublist }); }); | ||
Examples:
| Name | Type |
|---|