jQuery TreeView Menu (v1.4)
Description: jQuery TreeView Menu brings together all the most practical features requested in a Tree Menu into one awesome menu script. The markup for the menu is simply a HTML list before the script transforms it into a TreeView Menu that supports the following:
-
Three different ways to specify the initial state of the tree nodes:
- 1) All collapsed by default
- 2) All collapsed except ones with CSS class "
open
", or - 3) All expanded except ones with CSS class "
closed
".
- Ability to specify that only one tree branch is open at any time, collapsing any previous open branches.
-
Two types of persistence supported:
- 1) "
Cookie
" based, persisting last tree state before user navigates away from page. - 2) "
Location
" based, expanding the branch or node with an "href
" value that matches that of the current page (location.href
). This lets you expand a particular branch that corresponds to the current page.
- 1) "
- Supports optional animation with variable speed.
- Controls can be added that collapses, expands, or toggles all nodes within a tree.
- Supports optional asynchronous loading of the tree, so inner branches are loaded on demand based on JSON data returned from the server.
Now this is a Tree Menu!
Demos
Demo #1:
Notes:
Configuration code: $("#navigation").treeview({ |
Demo #2:
Click here to add a New Folder node to the end of the existing tree
Notes:
Configuration code: $("#browser").treeview({ |
Demo #3:
Notes:
Configuration code: $("#red").treeview({ |
Directions
Directions: Simply download jquery.treeview.zip, and refer to the demo page for the full source of the above 3 demos.
Setting Up a Tree View on your page
The markup for a Tree View Menu on your page should simply be a valid HTML list with a unique ID and CSS class that styles it:
<ul id="mymenu" class="filetree"> " " <ul>
Then, transform it into a Tree View Menu by calling the function
Treeview()
, invoked when the page has loaded to ensure the menu exists at
time of invocation code in bold):
$(document).ready(function(){ $("#mymenu").treeview({ collapsed: true, other options... }); });
Note the outer most container code in bold- always define your TreeView configuration code(s) inside it so they are invoked only when the page has loaded.
treeview()
function options
The main Treeview()
function used to render a tree supports the
following options passed in as parameters, all of which are optional:
Parameter | Description |
---|---|
animated: speed |
Sets the animation speed. Valid values are one of the
strings "slow ", "normal ", "fast ",
or an integer representing milliseconds, such as 1000 for 1
second animation.To disable animation, remove this option entirely. |
collapsed: true|false |
Sets whether all nodes should be collapsed by default.
Defaults to |
unique: true|false |
Sets whether only one tree node can be open at any time,
collapsing any previous open nodes. Defaults to |
persist: "location|cookie" |
Persists the tree's expand/collapse state in one of two
ways:
To disable persistence, remove this option entirely. |
cookieId: string |
The desired custom cookie name to use when persisting
via persist: "cookie" .$("#mytree").treeview({ Defaults to interval value when this option is not defined. |
control: jQuery selector |
Specifies the HTML element(s) on the page that will
contain links to collapse, expand, and toggle all nodes within the tree,
in that order. The valid value is a jQuery selector, most
commonly, "#mycontainerid ", where "mycontainerid" should be
the ID of the control element. For example:The HTML: <div id="masstoggler"> The configuration code: $("#mytree").treeview({ Order is important when specifying the toggler links within the control element- the first link will always be assigned the "collapse all" behaviour, the second link the "expand all" behaviour, and finally, the last the "toggle all" behaviour. Make sure the option " |
toggle: callbackfunction |
Callback when toggling a branch. Arguments: "this "
refers to the LI element with its sub UL
either shown or hidden. Works only with speed option set (set speed: 1
to enable callback without animations):
$("mytree").treeview({ To disable toggle, remove this option entirely. |
add: jQuery selector |
Extends the tree with additional nodes by adding them
somewhere within the existing tree (as specified by the jQuery
selector), then refreshes the tree to account for the new nodes. The
jQuery selector must point to node(s) within the tree that already
exist.
The following defines a link (with ID " $("#sampletree").treeview({collapsed: true}); Demo:
Where the new branch gets added within the tree depends on the code in bold. Here are some examples: //adds new branch to the very end of the entire
tree
In other words, use a valid
jQuery
selector to identify the |
prerendered: true/false |
If set to true , skips parsing of branches
within the tree with explicit classes defined, or DIVs within three with
class "hitarea ". This makes the tree more obtrusive, but
speeds up render times for large trees significantly. For branches that
are not parsed by the script, it is up to you to manually define their
initial states using CSS, as the script will not do this for you (ie:
setting "collapsed: true " has no effect on these branches):Portion HTML of a sample tree with prerendered enabled: " Defaults to |
url: "source.php" |
If defined, starts with an empty tree, then
asynchronously
adds branches to the tree when requested based on data returned from the
server (in JSON format), specifically the specified server side script
(ie: "source.php ").Sample initial HTML Markup on page: <ul id="asynctree"> Sample configuration code: $("#asynctree").treeview({ See "Async Treeview example" for more info on this option. |
Specifying which branches within the tree should be expanded or contracted by default
When you define a TreeView Menu on your page, there are 3 ways in general to
specify the initial states of the branches within it. To specify that all
branches be collapsed by default, just define the "collapsed: true
"
option within the configuration code:
$("#navigation").treeview({
collapsed: true,
unique: true,
persist: "location"
});
To specify that all branches be collapsed except particular ones,
still define "collapsed: true
" above, but inside the tree's HTML,
insert the CSS class "open
" inside the parent LI
of
the branch that should be explicitly open:
<li class="open"><a href="#">Folder 3 (open by
default)</a>
<ul>
<ll>Item 3.1</li>
<ll>Item 3.1</li>
<ll>Item 3.1</li>
</ul>
</li>
"
"
To specify that all branches appear as they normally would except for certain
ones that should be collapsed by default, first, undeclare "collapsed:
true
" from the configuration code, then insert the CSS class "closed
"
inside the parent LI
of the branch that should be explicitly
closed:
<li class="closed"><a href="#">Folder 3 (open by
default)</a>
<ul>
<ll>Item 3.1</li>
<ll>Item 3.1</li>
<ll>Item 3.1</li>
</ul>
</li>
"
"
Table Of Contents
This script consists of an index page plus 1 supplementary page: