This example demonstates how to use the ContextMenu widget to add a context menu to a YUI TreeView control. The context menu allows the user to add, edit and remove items from a TreeView instance.
Please Note: Opera users will need to do the following to use this example:
When adding context menus to large data structures like a
<table>
or large list (<ol>
or <ul>
), it is recommended to bind a single
YAHOO.widget.ContextMenu instance to the structure's root element, than to a set
of its child nodes (<tr>
s or <li>
s).
Doing so significantly improves the performance of a web page or
application by reducing the number of "contextmenu" event handlers
as well as the number of YAHOO.widget.ContextMenu instances in memory.
Begin by creating a TreeView instance. Next, create an object that maps HTML ids to their corresponding TextNode instances. As each TextNode instance is added to the TreeView, store a reference to it in the map.
1 | /* |
2 | Initialize the TreeView instance when the "mytreeview" <div> |
3 | is ready to be scripted. |
4 | */ |
5 | |
6 | YAHOO.util.Event.onAvailable("mytreeview", function () { |
7 | |
8 | /* |
9 | Map of YAHOO.widget.TextNode instances in the |
10 | TreeView instance. |
11 | */ |
12 | |
13 | var oTextNodeMap = {}; |
14 | |
15 | |
16 | // Creates a TextNode instance and appends it to the TreeView |
17 | |
18 | function buildRandomTextBranch(p_oNode) { |
19 | |
20 | var oTextNode, |
21 | i; |
22 | |
23 | if (p_oNode.depth < 6) { |
24 | |
25 | for (i = 0; i < Math.floor(Math.random() * 4); i++) { |
26 | |
27 | oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false); |
28 | |
29 | oTextNodeMap[oTextNode.labelElId] = oTextNode; |
30 | |
31 | buildRandomTextBranch(oTextNode); |
32 | |
33 | } |
34 | |
35 | } |
36 | |
37 | } |
38 | |
39 | |
40 | // Create a TreeView instance |
41 | |
42 | var oTreeView = new YAHOO.widget.TreeView("mytreeview"); |
43 | |
44 | var n, oTextNode; |
45 | |
46 | for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) { |
47 | |
48 | oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false); |
49 | |
50 | /* |
51 | Add the TextNode instance to the map, using its |
52 | HTML id as the key. |
53 | */ |
54 | |
55 | oTextNodeMap[oTextNode.labelElId] = oTextNode; |
56 | |
57 | buildRandomTextBranch(oTextNode); |
58 | |
59 | } |
60 | |
61 | oTreeView.draw(); |
62 | |
63 | }); |
view plain | print | ? |
Once the TreeView is created, instantiate a ContextMenu specifying the TreeView
instance's root element as its trigger. Lastly, add a "triggerContextMenu"
event handler for the ContextMenu instance that uses the "contextEventTarget"
property to retrieve the TextNode instance that triggered its display.
A reference to the TextNode is stored in a variable
(oCurrentTextNode
), so that it can be manipulated by the
addNode
, editNodeLabel
, and deleteNode
functions.
1 | /* |
2 | The YAHOO.widget.TextNode instance whose "contextmenu" |
3 | DOM event triggered the display of the |
4 | ContextMenu instance. |
5 | */ |
6 | |
7 | var oCurrentTextNode = null; |
8 | |
9 | |
10 | /* |
11 | Adds a new TextNode as a child of the TextNode instance |
12 | that was the target of the "contextmenu" event that |
13 | triggered the display of the ContextMenu instance. |
14 | */ |
15 | |
16 | function addNode() { |
17 | |
18 | var sLabel = window.prompt("Enter a label for the new node: ", ""), |
19 | oChildNode; |
20 | |
21 | if (sLabel && sLabel.length > 0) { |
22 | |
23 | oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false); |
24 | |
25 | oCurrentTextNode.refresh(); |
26 | oCurrentTextNode.expand(); |
27 | |
28 | oTextNodeMap[oChildNode.labelElId] = oChildNode; |
29 | |
30 | } |
31 | |
32 | } |
33 | |
34 | |
35 | /* |
36 | Edits the label of the TextNode that was the target of the |
37 | "contextmenu" event that triggered the display of the |
38 | ContextMenu instance. |
39 | */ |
40 | |
41 | function editNodeLabel() { |
42 | |
43 | var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML); |
44 | |
45 | if (sLabel && sLabel.length > 0) { |
46 | |
47 | oCurrentTextNode.getLabelEl().innerHTML = sLabel; |
48 | |
49 | } |
50 | |
51 | } |
52 | |
53 | |
54 | /* |
55 | Deletes the TextNode that was the target of the "contextmenu" |
56 | event that triggered the display of the ContextMenu instance. |
57 | */ |
58 | |
59 | function deleteNode() { |
60 | |
61 | delete oTextNodeMap[oCurrentTextNode.labelElId]; |
62 | |
63 | oTreeView.removeNode(oCurrentTextNode); |
64 | oTreeView.draw(); |
65 | |
66 | } |
67 | |
68 | |
69 | /* |
70 | "contextmenu" event handler for the element(s) that |
71 | triggered the display of the ContextMenu instance - used |
72 | to set a reference to the TextNode instance that triggered |
73 | the display of the ContextMenu instance. |
74 | */ |
75 | |
76 | function onTriggerContextMenu(p_oEvent) { |
77 | |
78 | var oTarget = this.contextEventTarget, |
79 | Dom = YAHOO.util.Dom; |
80 | |
81 | /* |
82 | Get the TextNode instance that that triggered the |
83 | display of the ContextMenu instance. |
84 | */ |
85 | |
86 | var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ? |
87 | oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel"); |
88 | |
89 | if (oTextNode) { |
90 | |
91 | oCurrentTextNode = oTextNodeMap[oTarget.id]; |
92 | |
93 | } |
94 | else { |
95 | |
96 | // Cancel the display of the ContextMenu instance. |
97 | |
98 | this.cancel(); |
99 | |
100 | } |
101 | |
102 | } |
103 | |
104 | |
105 | /* |
106 | Instantiate a ContextMenu: The first argument passed to |
107 | the constructor is the id of the element to be created; the |
108 | second is an object literal of configuration properties. |
109 | */ |
110 | |
111 | var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", { |
112 | trigger: "mytreeview", |
113 | lazyload: true, |
114 | itemdata: [ |
115 | { text: "Add Child Node", onclick: { fn: addNode } }, |
116 | { text: "Edit Node Label", onclick: { fn: editNodeLabel } }, |
117 | { text: "Delete Node", onclick: { fn: deleteNode } } |
118 | ] }); |
119 | |
120 | |
121 | /* |
122 | Subscribe to the "contextmenu" event for the element(s) |
123 | specified as the "trigger" for the ContextMenu instance. |
124 | */ |
125 | |
126 | oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings