Cut & Paste Folding Treeview Menu
|
Description: This is an versatile folding Treeview menu using YUI's treeview control. It lets you define a collapsible tree with support for arbitrary number of levels, plus the ability to make any node a link with it! YUI may not be the easiest thing to work with for beginners, which is why we've created a custom function on top of it to simply the process of creating a tree, adding levels, and making a node a link etc. All you have to do is call one function. There's no stopping you now!
Example:
Directions: Just download the below zip file, and refer to the source inside demo.htm. It contains the same 3 demos as above.
You define a treeview menu simply by calling the function "jktreeview()", for example:
<!-- TreeView Demo 1 //-->
var pinetree=new jktreeview("tree1")
pinetree.addItem("JavaScript Kit", "", "http://www.javascriptkit.com")
pinetree.addItem("Free Scripts", "",
"http://www.javascriptkit.com/cutpastejava.shtml")
var branch3=pinetree.addItem("References") //A TREE BRANCH WITH NO URL FOR
ITSELF
pinetree.addItem("JavaScript Reference", branch3,
"http://www.javascriptkit.com/jsref/") //Add this item to branch3
pinetree.addItem("DOM Reference", branch3,
"http://www.javascriptkit.com/domref/") //Add this item to branch3
pinetree.addItem("CSS Reference", branch3,
"http://www.javascriptkit.com/dhtmltutors/cssreference.shtml") //Add this item
to branch3
pinetree.addItem("JavaScript Tutorials", "",
"http://www.javascriptkit.com/javatutors/")
pinetree.treetop.draw(); //REQUIRED LINE: Initalize tree
Enjoy!