4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
380 lines
No EOL
11 KiB
HTML
380 lines
No EOL
11 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>Context Menu Example</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, 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;
|
|
|
|
}
|
|
|
|
</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>
|
|
|
|
<!-- 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) {
|
|
|
|
|
|
// 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<nMainMenuItems; i++) {
|
|
|
|
oMenuItem =
|
|
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);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Context Menu Example <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
|
|
<p>Use the context menu to rename, clone or delete Dolly.</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> |