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 each 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 an <table> and giving <tr> elements that should have the same context menu a similar class name.

Next, use the onContentReady method of the Event utility to listen for when the <table> element is are ready to be scripted.

Inside the function passed to the Event Utility's onContentReady method, create a shortcut to the Dom Utility (since it will be used frequently) and an object literal that maps each class name to a set of MenuItem configuration properties.

Lastly, add a "triggerContextMenu" event handler to the ContextMenu instance. This event handler makes use of the "contextEventTarget" property to determine which <tr> element was the target of the "contextmenu" event. Once found, the <tr> element's class name is used to look up its corresponding menu items in the "oContextMenuItems" map, which are then added to the ContextMenu instance via the "addItems" method.

Configuration for This Example

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.