JavaScript DHTML/YUI Library/Popup Menu
<source lang="html4strict">
<!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> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset/reset.css"> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css"> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<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;
}
#clones {
background: #99cc66 url(yui_2.7.0b-assets/menu-assets/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>
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/event/event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/dom/dom.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/animation/animation.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<script type="text/javascript">
/*
Initialize the ContextMenu instances when the the elements
that trigger their display are ready to be scripted.
*/
YAHOO.util.Event.onContentReady("clones", function () {
// Maintain a reference to the "clones" -
var oClones = this;
// Clone the first ewe so that we can create more later
var oLI = oClones.getElementsByTagName("li")[0];
var oEweTemplate = 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) {
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);
}
// "click" event handler for each item in the ewe context menu
function onEweContextMenuClick(p_sType, p_aArgs) {
/*
The second item in the arguments array (p_aArgs)
passed back to the "click" event handler is the
MenuItem instance that was the target of the
"click" event.
*/
var oItem = p_aArgs[1], // The MenuItem that was clicked
oTarget = this.contextEventTarget,
oLI;
if (oItem) {
oLI = oTarget.nodeName.toUpperCase() == "LI" ?
oTarget : YAHOO.util.Dom.getAncestorByTagName(oTarget, "LI");
switch (oItem.index) {
case 0: // Edit name
editEweName(oLI);
break;
case 1: // Clone
cloneEwe(oLI, this);
break;
case 2: // Delete
deleteEwe(oLI);
break;
}
}
}
/*
Array of text labels for the MenuItem instances to be
added to the ContextMenu instanc.
*/
var aMenuItems = ["Edit Name", "Clone", "Delete" ];
/*
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 oEweContextMenu = new YAHOO.widget.ContextMenu(
"ewecontextmenu",
{
trigger: oClones.childNodes,
itemdata: aMenuItems,
lazyload: true
}
);
// "render" event handler for the ewe context menu
function onContextMenuRender(p_sType, p_aArgs) {
// Add a "click" event handler to the ewe context menu
this.subscribe("click", onEweContextMenuClick);
}
// Add a "render" event handler to the ewe context menu
oEweContextMenu.subscribe("render", onContextMenuRender);
// Deletes an ewe from the field
function deleteEwes() {
oEweContextMenu.cfg.setProperty("target", null);
oClones.innerHTML = "";
function onHide(p_sType, p_aArgs, p_oItem) {
p_oItem.cfg.setProperty("disabled", true);
p_oItem.parent.unsubscribe("hide", onHide, p_oItem);
}
this.parent.subscribe("hide", onHide, this);
}
// Creates a new ewe and appends it to the field
function createNewEwe() {
var oLI = oEweTemplate.cloneNode(true);
oClones.appendChild(oLI);
this.parent.getItem(1).cfg.setProperty("disabled", false);
oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);
}
// Sets the color of the grass in the field
function setFieldColor(p_sType, p_aArgs, p_sColor) {
var oCheckedItem = this.parent.checkedItem;
if (oCheckedItem != this) {
YAHOO.util.Dom.setStyle("clones", "backgroundColor", p_sColor);
this.cfg.setProperty("checked", true);
oCheckedItem.cfg.setProperty("checked", false);
this.parent.checkedItem = this;
}
}
// "render" event handler for the field context menu
function onFieldMenuRender(p_sType, p_aArgs) {
if (this.parent) { // submenu
this.checkedItem = this.getItem(0);
}
}
/*
Array of object literals - each containing configuration
properties for the items for the context menu.
*/
var oFieldContextMenuItemData = [
{
text: "Field color",
submenu: {
id: "fieldcolors",
itemdata: [
{ text: "Light Green", onclick: { fn: setFieldColor, obj: "#99cc66" }, checked: true },
{ text: "Medium Green", onclick: { fn: setFieldColor, obj: "#669933" } },
{ text: "Dark Green", onclick: { fn: setFieldColor, obj: "#336600" } }
]
}
},
{ text: "Delete all", onclick: { fn: deleteEwes } },
{ text: "New Ewe", onclick: { fn: createNewEwe } }
];
/*
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 oFieldContextMenu = new YAHOO.widget.ContextMenu(
"fieldcontextmenu",
{
trigger: "clones",
itemdata: oFieldContextMenuItemData,
lazyload: true
}
);
// Add a "render" event handler to the field context menu
oFieldContextMenu.subscribe("render", onFieldMenuRender);
});
</script>
</head>
<body class="yui-skin-sam">
- <a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="yui_2.7.0b-assets/menu-assets/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first mammal to have been successfully cloned from an adult cell."></a>Dolly
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Right-click on a row to see the ContextMenu integration in action
<source lang="html4strict">
<!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 Integration</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/datatable/assets/skins/sam/datatable.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datasource/datasource-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/datatable/datatable-min.js"></script>
<style type="text/css">
div.yuimenu .bd {
zoom: normal;
} </style>
</head> <body class=" yui-skin-sam">
Context Menu Integration
Right-click on a row to see the ContextMenu integration in action. For more information on using the ContextMenu class please refer to the <a href="http://developer.yahoo.ru/yui/menu/">documentation for the Menu control.</a>
<script type="text/javascript" src="yui_2.7.0b-assets/datatable-assets/js/data.js"></script> <script type="text/javascript"> YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.ContextMenu = function() {
var myColumnDefs = [
{key:"SKU", sortable:true},
{key:"Quantity", sortable:true},
{key:"Item", sortable:true},
{key:"Description"}
];
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.inventory);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: ["SKU","Quantity","Item","Description"]
};
var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);
var onContextMenuClick = function(p_sType, p_aArgs, p_myDataTable) {
var task = p_aArgs[1];
if(task) {
// Extract which TR element triggered the context menu
var elRow = this.contextEventTarget;
elRow = p_myDataTable.getTrEl(elRow);
if(elRow) {
switch(task.index) {
case 0: // Delete row upon confirmation
var oRecord = p_myDataTable.getRecord(elRow);
if(confirm("Are you sure you want to delete SKU " +
oRecord.getData("SKU") + " (" +
oRecord.getData("Description") + ")?")) {
p_myDataTable.deleteRow(elRow);
}
}
}
}
};
var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
{trigger:myDataTable.getTbodyEl()});
myContextMenu.addItem("Delete Item");
// Render the ContextMenu instance to the parent container of the DataTable
myContextMenu.render("myContainer");
myContextMenu.clickEvent.subscribe(onContextMenuClick, myDataTable);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
}); </script>
</body> </html>
</source><A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
