JavaScript DHTML/GUI Components/Popup Menu
Context Menu Example
<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 Example</title> <link rel="stylesheet" type="text/css" href="./build/reset/reset.css"> <link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css"> <link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css"> <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> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <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/container/container_core.js"></script> <script type="text/javascript" src="./build/menu/menu.js"></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>
Context Menu Example [<a href="">Examples Home</a>]
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.
- <a href="http://www.wbex.ru"><img src="http://www.wbex.ru/style/logo.png" width="150" height="80" alt="logo"></a>logo
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
JavaScript Drop Down Menu
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - HTML Drop Down Menu</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("TemplateManager"); dynapi.library.include("HTMLDropDownMenu"); dynapi.library.include("HTMLButton"); </script> <script language="Javascript"> var o={
"http://www.sourceforge.net":"SourceForge.net", "http://dynapi.sourceforge.net":"DynAPI", "http://javascript.internet.ru":"JavaScript Source", "http://www.w3c.org":"The World Wide Web Consortium (W3C)", "http://www.linux.org":"The Linux Home Page", "http://www.javascript-games.org/":"Javascript Games!", "http://www.dannyg.ru/pubs/jsb/index.html":"JavaScript Bible Series"
};
var t = "This is the Template:Select a website: {@ddm} {@btnGo} |
var tp = new Template(t,100,100,350,200,"#EEEEEE"); tp.addChild(new HTMLButton(null," > ","Click here to view site"),"btnGo"); tp.addChild(new HTMLDropDownMenu(null,o),"ddm"); tp.btnGo.addEventListener({
onclick:function(e){ alert(tp.ddm.getSelected()); }
}); dynapi.document.addChild(tp); </script> </head> <body> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>