JavaScript DHTML/GUI Components/Popup Menu

Материал из Web эксперт
Перейти к: навигация, поиск

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.
   </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:
<form>
Select a website:
{@ddm} {@btnGo}
</form>
";

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>