"http://www.w3.org/TR/html4/strict.dtd">
Example: Adding A Context Menu To A TreeView (YUI Library)
h1 {
font-weight: bold;
margin: 0 0 1em 0;
}
body {
padding: 1em;
}
p, ul {
margin: 1em 0;
}
p em,
#operainstructions li em {
font-weight: bold;
}
#operainstructions {
list-style-type: square;
margin-left: 2em;
}
/*
Initialize the TreeView instance when the "mytreeview"
is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("mytreeview", function () {
/*
Map of YAHOO.widget.TextNode instances in the
TreeView instance.
*/
var oTextNodeMap = {};
// Creates a TextNode instance and appends it to the TreeView
function buildRandomTextBranch(p_oNode) {
var oTextNode,
i;
if (p_oNode.depth < 6) {
for (i = 0; i < Math.floor(Math.random() * 4); i++) {
oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
}
}
// Create a TreeView instance
var oTreeView = new YAHOO.widget.TreeView("mytreeview");
var n, oTextNode;
for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) {
oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false);
/*
Add the TextNode instance to the map, using its
HTML id as the key.
*/
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
oTreeView.draw();
/*
The YAHOO.widget.TextNode instance whose "contextmenu"
DOM event triggered the display of the
ContextMenu instance.
*/
var oCurrentTextNode = null;
/*
Adds a new TextNode as a child of the TextNode instance
that was the target of the "contextmenu" event that
triggered the display of the ContextMenu instance.
*/
function addNode() {
var sLabel = window.prompt("Enter a label for the new node: ", ""),
oChildNode;
if (sLabel && sLabel.length > 0) {
oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);
oCurrentTextNode.refresh();
oCurrentTextNode.expand();
oTextNodeMap[oChildNode.labelElId] = oChildNode;
}
}
/*
Edits the label of the TextNode that was the target of the
"contextmenu" event that triggered the display of the
ContextMenu instance.
*/
function editNodeLabel() {
var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML);
if (sLabel && sLabel.length > 0) {
oCurrentTextNode.getLabelEl().innerHTML = sLabel;
}
}
/*
Deletes the TextNode that was the target of the "contextmenu"
event that triggered the display of the ContextMenu instance.
*/
function deleteNode() {
delete oTextNodeMap[oCurrentTextNode.labelElId];
oTreeView.removeNode(oCurrentTextNode);
oTreeView.draw();
}
/*
"contextmenu" event handler for the element(s) that
triggered the display of the ContextMenu instance - used
to set a reference to the TextNode instance that triggered
the display of the ContextMenu instance.
*/
function onTriggerContextMenu(p_oEvent) {
var oTarget = this.contextEventTarget,
Dom = YAHOO.util.Dom;
/*
Get the TextNode instance that that triggered the
display of the ContextMenu instance.
*/
var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ?
oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");
if (oTextNode) {
oCurrentTextNode = oTextNodeMap[oTarget.id];
}
else {
// Cancel the display of the ContextMenu instance.
this.cancel();
}
}
/*
Instantiate a ContextMenu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
trigger: "mytreeview",
lazyload: true,
itemdata: [
{ text: "Add Child Node", onclick: { fn: addNode } },
{ text: "Edit Node Label", onclick: { fn: editNodeLabel } },
{ text: "Delete Node", onclick: { fn: deleteNode } }
] });
/*
Subscribe to the "contextmenu" event for the element(s)
specified as the "trigger" for the ContextMenu instance.
*/
oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
});