"http://www.w3.org/TR/html4/strict.dtd">
Context Menu Example
h1, p, ul {
margin:1em;
}
h1 em,
p em,
#operainstructions li em {
font-weight:bold;
}
#operainstructions {
list-style-type:square;
margin-left:2em;
}
#clones {
background-color:#9C6;
width:450px;
height:400px;
overflow:auto;
}
#clones li {
float:left;
display:inline;
border:solid 1px #000;
background-color:#fff;
margin:10px;
text-align:center;
}
#clones li img {
border:solid 1px #000;
margin:5px;
}
#clones li cite {
display:block;
text-align:center;
margin:0 0 5px 0;
padding:0 5px;
}
// "load" event handler for the "window" object
YAHOO.example.onWindowLoad = function(p_oEvent) {
// Renames an "Ewe"
function EditEweName(p_oLI) {
var oCite = p_oLI.lastChild;
if(oCite.nodeType != 1) {
oCite = oCite.previousSibling;
}
var oTextNode = oCite.firstChild;
var sName =
window.prompt(
"Enter a new name for ",
oTextNode.nodeValue
);
if(sName && sName.length > 0) {
oTextNode.nodeValue = sName;
}
}
// Clones an "Ewe"
function CloneEwe(p_oLI) {
var oClone = p_oLI.cloneNode(true);
p_oLI.parentNode.appendChild(oClone);
}
// Deletes an "Ewe"
function DeleteEwe(p_oLI) {
var oUL = p_oLI.parentNode;
oUL.removeChild(p_oLI);
}
/*
Returns the LI instance that is the parent node of the target
of a "contextmenu" event
*/
function GetListItemFromEventTarget(p_oNode) {
var oLI;
if(p_oNode.tagName == "LI") {
oLI = p_oNode;
}
else {
/*
If the target of the event was a child of an LI,
get the parent LI element
*/
do {
if(p_oNode.tagName == "LI") {
oLI = p_oNode;
break;
}
}
while((p_oNode = p_oNode.parentNode));
}
return oLI;
}
// "move" event handler for the context menu
function onContextMenuMove() {
var oNode = this.contextEventTarget;
var bDisabled = (oNode.tagName == "UL");
var i = this.getItemGroups()[0].length - 1;
do {
this.getItem(i).cfg.setProperty("disabled", bDisabled);
}
while(i--);
}
// "click" event handler for each item in the context menu
function onContextMenuItemClick(p_sType, p_aArguments, p_oItem) {
var oLI =
GetListItemFromEventTarget(this.parent.contextEventTarget);
switch(this.index) {
case 0: // Edit name
EditEweName(oLI);
break;
case 1: // Clone
CloneEwe(oLI);
break;
case 2: // Delete
DeleteEwe(oLI);
break;
}
}
// "keydown" event handler for the context menu
function onContextMenuKeyDown(p_sType, p_sArguments, p_oMenu) {
var oDOMEvent = p_sArguments[0];
if(oDOMEvent.shiftKey) {
var oLI =
GetListItemFromEventTarget(this.contextEventTarget);
switch(oDOMEvent.keyCode) {
case 69: // Edit name
EditEweName(oLI);
this.hide();
break;
case 67: // Clone
CloneEwe(oLI);
this.hide();
break;
case 68: // Delete
DeleteEwe(oLI);
this.hide();
break;
}
}
}
// Create the context menu
var oContextMenu = new YAHOO.widget.ContextMenu(
"contextmenu",
{ trigger: "clones" }
);
var aMainMenuItems = [
{ text: "Edit Name", helptext: "Shift + E" },
{ text: "Clone", helptext: "Shift + C" },
{ text: "Delete", helptext: "Shift + D" }
];
var nMainMenuItems = aMainMenuItems.length;
var oMenuItem;
// Add items to the main menu
for(var i=0; i
new YAHOO.widget.ContextMenuItem(
aMainMenuItems[i].text,
{ helptext: aMainMenuItems[i].helptext }
);
/*
Add a "click" event handler to each
ContextMenuItem instance
*/
oMenuItem.clickEvent.subscribe(
onContextMenuItemClick,
oMenuItem,
true
);
oContextMenu.addItem(oMenuItem);
}
// Add a "move" event handler to the context menu
oContextMenu.moveEvent.subscribe(
onContextMenuMove,
oContextMenu,
true
);
// Add a "keydown" event handler to the context menu
oContextMenu.keyDownEvent.subscribe(
onContextMenuKeyDown,
oContextMenu,
true
);
// Render the context menu
oContextMenu.render(document.body);
}
// Assign a "load" event handler to the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
Context Menu Example [Examples Home]
Use the context menu to rename, clone or delete Dolly.
Please Note: Opera users will need to do the following to use this example:
Opera for Windows: Hold down the control key and click with the left mouse button.
Opera for OS X: Hold down the command key (⌘) and click with the left mouse button.
logo
yui.zip( 3,714 k)