Menu TreeView Widget
The presentation differences between the default treeview widget and this
one were accomplished by modifying the css styles in tree.css. The
functionality is the same, except the menu does not allow multiple siblings
to be expanded at one time (when you expand a node, all of its expanded
siblings are collapsed.
Expand all
Collapse all
var tree;
var nodes = new Array();
var nodeIndex = 0;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
tree.onExpand = function(node) {
// alert(node.index + " was expanded");
}
tree.onCollapse = function(node) {
// alert(node.index + " was collapsed");
}
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var thisId = nodeIndex++;
var thisLabel = "menu" + i;
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, tree.getRoot(), false);
// nodes[thisId] = new YAHOO.widget.MenuNode({label:thisLabel, href:"http://asdf"}, tree.getRoot(), false);
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, tree.getRoot(), false);
var p1 = nodes[thisId];
var l1 = thisLabel;
for (var j = 0; j < Math.floor(Math.random()*6) + 1; j++) {
thisId = nodeIndex++;
thisLabel = l1 + "-" + j;
// nodes[thisId] = new YAHOO.widget.TextNode({ label: thisLabel }, p1, true);
nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p1, false);
var p2 = nodes[thisId];
var l2 = thisLabel;
for (var k =0; k < Math.floor(Math.random()*6) + 1; k++) {
thisId = nodeIndex++;
thisLabel = l2 + "-" + k;
/*
var data = {
id: thisId,
label: thisLabel,
href: "javascript:onLabelClick(" + thisId + ")"
}
*/
var data = {
label: thisLabel,
href: "javascript:void(window.open('http://www.yahoo.com'))"
}
nodes[thisId] = new YAHOO.widget.TextNode(data, p2, false);
nodes[thisId].labelStyle = "emLabel";
// nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel, p2, false);
}
}
}
// nodes[0] = new YAHOO.widget.TextNode(tree.getRoot(), false, "label-0");
tree.draw();
}
var selectedId = null;
function onLabelClick(id) {
var node = tree.getNodeByProperty("id", id);
// alert(node.label);
var el = node.getLabelEl()
YAHOO.log("pos: " + YAHOO.util.Dom.getXY(el));
el.style.backgroundColor = "#c5dbfc";
if (selectedId != null) {
node = tree.getNodeByProperty("id", selectedId);
node.getLabelEl().style.backgroundColor = "white";
}
selectedId = id;
}