Context Menu Example : Popup Menu « GUI Components « JavaScript DHTML






Context Menu Example


<!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="">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 (&#8984;) and click with the left mouse button.</li>
        </ul>

        <ul id="clones">
            <li><a href="http://www.java2s.com"><img src="http://www.java2s.com/style/logo.png" width="150" height="80" alt="logo"></a><cite>logo</cite></li>
        </ul>

    </body>
</html>
           
       








yui.zip( 3,714 k)

Related examples in the same category

1.JavaScript Drop Down Menu