527 lines
No EOL
17 KiB
HTML
527 lines
No EOL
17 KiB
HTML
<!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: Context Menu (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/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;
|
|
|
|
}
|
|
|
|
h1 em,
|
|
p em,
|
|
#operainstructions li em {
|
|
|
|
font-weight:bold;
|
|
|
|
}
|
|
|
|
#operainstructions {
|
|
|
|
list-style-type:square;
|
|
margin-left:2em;
|
|
|
|
}
|
|
|
|
#clones {
|
|
|
|
background:#99cc66 url(img/grass.png);
|
|
|
|
/* Hide the alpha PNG from IE 6 */
|
|
_background-image:none;
|
|
|
|
width:450px;
|
|
height:400px;
|
|
overflow:auto;
|
|
|
|
}
|
|
|
|
#clones li {
|
|
|
|
float:left;
|
|
display:inline;
|
|
border:solid 1px #000;
|
|
background-color:#fff;
|
|
margin:10px;
|
|
text-align:center;
|
|
zoom:1;
|
|
|
|
}
|
|
|
|
#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;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Namespace source file -->
|
|
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
|
|
<!-- Dependency source files -->
|
|
|
|
<script type="text/javascript" src="../../build/event/event.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
|
|
|
<!-- Container source file -->
|
|
<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">
|
|
|
|
// "load" event handler for the "window" object
|
|
|
|
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
|
|
|
|
|
var oClones = document.getElementById("clones");
|
|
|
|
// Clone the first ewe so that we can create more later
|
|
|
|
var oLI = oClones.getElementsByTagName("li")[0];
|
|
var oClone = oLI.cloneNode(true);
|
|
|
|
|
|
// 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, p_oMenu) {
|
|
|
|
p_oMenu.cfg.setProperty("trigger", null);
|
|
|
|
var oClone = p_oLI.cloneNode(true);
|
|
|
|
p_oLI.parentNode.appendChild(oClone);
|
|
|
|
p_oMenu.cfg.setProperty("trigger", oClones.childNodes);
|
|
|
|
}
|
|
|
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
|
|
// "click" event handler for each item in the ewe context menu
|
|
|
|
function onEweContextMenuClick(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
var oItem = p_aArgs[1];
|
|
|
|
if(oItem) {
|
|
|
|
var oLI = GetListItemFromEventTarget(this.contextEventTarget);
|
|
|
|
switch(oItem.index) {
|
|
|
|
case 0: // Edit name
|
|
|
|
EditEweName(oLI);
|
|
|
|
break;
|
|
|
|
|
|
case 1: // Clone
|
|
|
|
CloneEwe(oLI, this);
|
|
|
|
break;
|
|
|
|
|
|
case 2: // Delete
|
|
|
|
DeleteEwe(oLI);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// "keydown" event handler for the ewe context menu
|
|
|
|
function onEweContextMenuKeyDown(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
var oDOMEvent = p_aArgs[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);
|
|
|
|
this.hide();
|
|
|
|
break;
|
|
|
|
case 68: // Delete
|
|
|
|
DeleteEwe(oLI);
|
|
|
|
this.hide();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// "render" event handler for the ewe context menu
|
|
|
|
function onContextMenuRender(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
// Add a "click" event handler to the ewe context menu
|
|
|
|
this.clickEvent.subscribe(onEweContextMenuClick, oEweContextMenu, true);
|
|
|
|
|
|
// Add a "keydown" event handler to the ewe context menu
|
|
|
|
this.keyDownEvent.subscribe(onEweContextMenuKeyDown,oEweContextMenu,true);
|
|
|
|
}
|
|
|
|
|
|
// "click" event handler for the field context menu
|
|
|
|
function onFieldMenuClick(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
// Get a reference to the item in the menu that was clicked
|
|
|
|
var oItem = p_aArgs[1];
|
|
|
|
|
|
if(oItem) {
|
|
|
|
switch(oItem.index) {
|
|
|
|
case 1:
|
|
|
|
oClones.innerHTML = "";
|
|
|
|
oEweContextMenu.cfg.setProperty("target", null);
|
|
|
|
oItem.cfg.setProperty("disabled", true);
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
var oLI = this.clone.cloneNode(true);
|
|
|
|
oClones.appendChild(oLI);
|
|
|
|
this.getItem(1).cfg.setProperty("disabled", false);
|
|
|
|
oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// "click" event handler for the field colors submenu
|
|
|
|
function onFieldColorsClick(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
// Get a reference to the item in the menu that was clicked
|
|
|
|
var oItem = p_aArgs[1];
|
|
|
|
|
|
if(oItem && this.checkedItem != oItem) {
|
|
|
|
YAHOO.util.Dom.setStyle("clones", "backgroundColor", oItem.value);
|
|
|
|
oItem.cfg.setProperty("checked", true);
|
|
|
|
|
|
this.checkedItem.cfg.setProperty("checked", false);
|
|
|
|
this.checkedItem = oItem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// "render" event handler for the field colors submenu
|
|
|
|
function onFieldColorsRender(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
this.checkedItem = this.getItem(0);
|
|
|
|
}
|
|
|
|
|
|
// "render" event handler for the field context menu
|
|
|
|
function onFieldMenuRender(p_sType, p_aArgs, p_oMenu) {
|
|
|
|
// Get a reference to the field colors submenu
|
|
|
|
var oFieldColors = this.getItem(0).cfg.getProperty("submenu");
|
|
|
|
|
|
// Add a "render" event handler to the field colors submenu
|
|
|
|
oFieldColors.renderEvent.subscribe(onFieldColorsRender, oFieldColors, true);
|
|
|
|
|
|
// Add a "render" event handler to the field colors submenu
|
|
|
|
oFieldColors.clickEvent.subscribe(onFieldColorsClick, oFieldColors, true);
|
|
|
|
|
|
// Add a "click" event handler to the field context menu
|
|
|
|
this.clickEvent.subscribe(onFieldMenuClick, this, true);
|
|
|
|
}
|
|
|
|
|
|
// Define the items for the ewe context menu
|
|
|
|
var aMenuItems = [
|
|
{ text: "Edit Name", helptext: "Shift + E" },
|
|
{ text: "Clone", helptext: "Shift + C" },
|
|
{ text: "Delete", helptext: "Shift + D" }
|
|
];
|
|
|
|
|
|
// Create the ewe context menu
|
|
|
|
var oEweContextMenu = new YAHOO.widget.ContextMenu(
|
|
"ewecontextmenu",
|
|
{
|
|
trigger: oClones.childNodes,
|
|
itemdata: aMenuItems,
|
|
lazyload: true,
|
|
effect:{
|
|
effect:YAHOO.widget.ContainerEffect.FADE,
|
|
duration:0.25
|
|
}
|
|
}
|
|
);
|
|
|
|
|
|
// Add a "render" event handler to the ewe context menu
|
|
|
|
oEweContextMenu.renderEvent.subscribe(onContextMenuRender, oEweContextMenu, true);
|
|
|
|
|
|
// Define the items for the field context menu
|
|
|
|
var oFieldContextMenuItemData = [
|
|
|
|
{
|
|
text:"Field color",
|
|
submenu: { id:"fieldcolors", itemdata: [
|
|
{ text:"Light Green", value:"#99cc66", checked: true },
|
|
{ text:"Medium Green", value:"#669933" },
|
|
{ text:"Dark Green", value:"#336600" }
|
|
] }
|
|
},
|
|
"Delete all",
|
|
"New Ewe"
|
|
|
|
];
|
|
|
|
|
|
// Create a context menu for the field the ewes live in
|
|
|
|
var oFieldContextMenu = new YAHOO.widget.ContextMenu(
|
|
"fieldcontextmenu",
|
|
{
|
|
trigger: "clones",
|
|
itemdata: oFieldContextMenuItemData,
|
|
lazyload: true,
|
|
effect:{
|
|
effect:YAHOO.widget.ContainerEffect.FADE,
|
|
duration:0.1
|
|
}
|
|
}
|
|
);
|
|
|
|
oFieldContextMenu.clone = oClone;
|
|
|
|
|
|
// Add a "render" event handler to the field context menu
|
|
|
|
oFieldContextMenu.renderEvent.subscribe(onFieldMenuRender, oFieldContextMenu, true);
|
|
|
|
}
|
|
|
|
|
|
// Assign a "load" event handler to the window
|
|
|
|
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example: Context Menu (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<p>This example features two context menus. There is one for each ewe that is created and one for the green field that the ewes graze in. You can use the ewe context menu to rename, clone or delete Dolly. The field's context menu allows you to delete all the ewes from the field, add a new ewe and modify the color of the grass.</p>
|
|
|
|
<p><em>Please Note:</em> Opera users will need to do the following to use this example:</p>
|
|
|
|
<ul id="operainstructions">
|
|
<li><em>Opera for Windows:</em> Hold down the control key and click with the left mouse button.</li>
|
|
<li><em>Opera for OS X:</em> Hold down the command key (⌘) and click with the left mouse button.</li>
|
|
</ul>
|
|
|
|
<ul id="clones">
|
|
<li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="img/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first mammal to have been successfully cloned from an adult cell."></a><cite>Dolly</cite></li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html> |