Skip to content

Instantly share code, notes, and snippets.

@sdesai

sdesai/gist:865349

Created March 11, 2011 02:15
Show Gist options
  • Save sdesai/865349 to your computer and use it in GitHub Desktop.
Save sdesai/865349 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example: Adding A Context Menu To A Table (YUI Library)</title>
<!-- Standard reset and fonts -->
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
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;
}
#dataset {
border: solid 1px #000;
}
#dataset tr.odd {
background-color: #ccc;
}
#dataset tr.selected {
background-color: #039;
}
#dataset td {
border: solid 1px #000;
padding: .25em .5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/container/container_core.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="../../build/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize the ContextMenu instance when the the elements
that trigger their display are ready to be scripted.
*/
YAHOO.util.Event.onContentReady("dataset", function () {
var Dom = YAHOO.util.Dom;
/*
Map of CSS class names to arrays of MenuItem
configuration properties.
*/
var oContextMenuItems = {
"type1": [
"Context Menu 1, Item 1",
{
text: "Context Menu 1, Item 2",
submenu: {
id: "submenu1",
lazyload: true,
itemdata: [
"Context Menu 1 Submenu, Item 1",
"Context Menu 1 Submenu, Item 2",
"Context Menu 1 Submenu, Item 3",
"Context Menu 1 Submenu, Item 4"
]
}
},
"Context Menu 1, Item 3",
"Context Menu 1, Item 4"
],
"type2": [
"Context Menu 2, Item 1",
"Context Menu 2, Item 2",
"Context Menu 2, Item 3",
"Context Menu 2, Item 4",
"Context Menu 2, Item 5",
"Context Menu 2, Item 6",
"Context Menu 2, Item 7",
"Context Menu 2, Item 8",
"Context Menu 2, Item 9",
"Context Menu 2, Item 10"
],
"type3": [
"Context Menu 3, Item 1",
"Context Menu 3, Item 2",
"Context Menu 3, Item 3",
"Context Menu 3, Item 4"
],
"type4": [
"Context Menu 4, Item 1",
"Context Menu 4, Item 2"
],
"type5": [
"Context Menu 5, Item 1",
"Context Menu 5, Item 2",
"Context Menu 5, Item 3",
"Context Menu 5, Item 4",
"Context Menu 5, Item 5",
"Context Menu 5, Item 6"
]
};
var oSelectedTR, // The currently selected TR
rendered; // Whether or not the menu has been rendered
/*
"triggerContextMenu" event handler for the ContextMenu instance -
replaces the content of the ContextMenu instance based
on the CSS class name of the <tr> element that triggered
its display.
*/
function onTriggerContextMenu(p_sType, p_aArgs) {
var oTarget = this.contextEventTarget,
aMenuItems,
aClasses;
if (this.getRoot() == this) {
/*
Get the <tr> that was the target of the
"contextmenu" event.
*/
oSelectedTR = oTarget.nodeName.toUpperCase() == "TR" ?
oTarget : Dom.getAncestorByTagName(oTarget, "TR");
/*
Get the array of MenuItems for the CSS class name from
the "oContextMenuItems" map.
*/
if (Dom.hasClass(oSelectedTR, "odd")) {
aClasses = oSelectedTR.className.split(" ");
aMenuItems = oContextMenuItems[aClasses[0]];
} else {
aMenuItems = oContextMenuItems[YAHOO.lang.trim(oSelectedTR.className)];
}
// Remove the existing content from the ContentMenu instance
this.clearContent();
// Add the new set of items to the ContentMenu instance
this.addItems(aMenuItems);
// Render the ContextMenu instance with the new content
// CHANGE: Use the rendered flag to differentiate
// between initial vs. 2nd render
// (for the initial render we need to provide a container)
if (!rendered) {
this.render(this.cfg.getProperty("container"));
} else {
this.render();
}
/*
Highlight the <tr> element in the table that was
the target of the "contextmenu" event.
*/
Dom.addClass(oSelectedTR, "selected");
}
}
/*
"hide" event handler for the ContextMenu - used to
clear the selected <tr> element in the table.
*/
function onContextMenuHide(p_sType, p_aArgs) {
if (this.getRoot() == this && oSelectedTR) {
Dom.removeClass(oSelectedTR, "selected");
}
}
/*
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("contextmenu", {
trigger: "dataset",
lazyload: true
});
/*
Subscribe to the ContextMenu instance's "triggerContextMenu" event to update content,
and "hide" event to clear the selected row state.
*/
// CHANGE: use triggerContextMenu, instead of beforeShow
oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
oContextMenu.subscribe("hide", onContextMenuHide);
// CHANGE: Maintain a rendered flag
oContextMenu.subscribe("render", function() {rendered = true;});
});
</script>
</head>
<body class="yui-skin-sam">
<table id="dataset">
<tr class="type5 odd"><td>Row 0, Column 1</td><td>Row 0, Column 2</td><td>Row 0, Column 3</td><td>Row 0, Column 4</td></tr>
<tr class="type3"><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td><td>Row 1, Column 4</td></tr>
<!-- ... -->
<tr class="type2"><td>Row 99, Column 1</td><td>Row 99, Column 2</td><td>Row 99, Column 3</td><td>Row 99, Column 4</td></tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment