GUI Components JavaScript DHTML

        "http://www.w3.org/TR/html4/strict.dtd">

    
        
        Application Menubar Example
        
        
        
        
        
        
 
        
        
            body {
            
                background-color:#dfb8df;
            
            }
            /* Define a new style for each menubar */
            div.yuimenubar {
                
                border-width:1px 0;
                border-color:#666;
                border-style:solid;
                background-color:#ccc;
            }
            
            div.yuimenubar div.bd {
                
                border-width:1px 0;
                border-color:#ddd;
                border-style:solid;
                
            }
            div.yuimenubar li.yuimenubaritem {
                border-width:0;
                border-style:none;
                padding:4px 12px;
            
            }
            div.yuimenubar li.yuimenubaritem img {
              
                margin:0;
                border:0;
                height:1px;
                width:1px;
            
            }        
            
            /* Define a new style for each menu */
            div.yuimenu {
                border:solid 1px #666;
                background-color:#ccc;                
            
            }
            div.yuimenu div.bd {
                
                border-width:0;
                border-style:none;
                
            }
            /* Define a new style for each menu item */
            div.yuimenu li.yuimenuitem {
                padding-top:4px;
                padding-bottom:4px;
            }
            div.yuimenu li.yuimenuitem img {
            
                height:8px;
                width:8px;
                margin:0 -16px 0 10px;
                border:0;
            
            }
            div.yuimenu ul {
            
                border:solid 1px #666;
                border-width:1px 0 0 0;
            
            }
            /* Define a new style for an item's "selected" state */
            div.yuimenu li.selected,
            div.yuimenubar li.selected {
            
                background-color:#039;
            
            }
            div.yuimenu li.selected a.selected,
            div.yuimenubar li.selected a.selected {
                
                text-decoration:none;
                
            }
            /* Define a new style for an item's "disabled" state */
            div.yuimenu li.disabled a.disabled,
            div.yuimenu li.disabled em.disabled,
            div.yuimenubar li.disabled a.disabled {
            
                color:#666;
                
            }
        
        
    
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
            /**
            * Constant representing the path to the image to be used for the 
            * submenu arrow indicator.
            * @final
            * @type String
            */
            YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
                "promo/m/irs/blank.gif";
            
            
            /**
            * Constant representing the path to the image to be used for the 
            * submenu arrow indicator when a MenuBarItem instance is selected.
            * @final
            * @type String
            */
            YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
                "promo/m/irs/blank.gif";
            
            
            /**
            * Constant representing the path to the image to be used for the 
            * submenu arrow indicator when a MenuBarItem instance is disabled.
            * @final
            * @type String
            */
            YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = 
                "promo/m/irs/blank.gif";
            // "load" event handler for the window
            YAHOO.example.onWindowLoad = function(p_oEvent) {
                // "click" event handler for each item in the root MenuBar instance
    
                function onMenuBarItemClick(p_sType, p_aArguments) {
                
                    this.parent.hasFocus = true;
    
                    var oActiveItem = this.parent.activeItem;
                
                
                    // Hide any other submenus that might be visible
                
                    if(oActiveItem && oActiveItem != this) {
                
                        this.parent.clearActiveItem();
                
                    }
                
                
                    // Select and focus the current MenuItem instance
                
                    this.cfg.setProperty("selected", true);
                    this.focus();
                
                
                    // Show the submenu for this instance
                
                    var oSubmenu = this.cfg.getProperty("submenu");
    
                    if(oSubmenu) {
                
                        if(oSubmenu.cfg.getProperty("visible")) {
                        
                            oSubmenu.hide();
                        
                        }
                        else {
                        
                            oSubmenu.show();                    
                        
                        }
                
                    }
    
                }
    
    
                // "mouseover" event handler for each item in the root MenuBar instance
    
                function onMenuBarItemMouseOver(p_sType, p_aArguments) {
                
                    var oActiveItem = this.parent.activeItem;
                
                
                    // Hide any other submenus that might be visible
                
                    if(oActiveItem && oActiveItem != this) {
                
                        this.parent.clearActiveItem();
                
                    }
                
                
                    // Select and focus the current MenuItem instance
                
                    this.cfg.setProperty("selected", true);
                    this.focus();
    
                    if(this.parent.hasFocus) {            
                
                        // Show the submenu for this instance
                    
                        var oSubmenu = this.cfg.getProperty("submenu");
        
                        if(oSubmenu) {
                    
                            if(oSubmenu.cfg.getProperty("visible")) {
                            
                                oSubmenu.hide();
                            
                            }
                            else {
                            
                                oSubmenu.show();                    
                            
                            }
                    
                        }
    
                    }
    
                }
                var oApplicationsMenu = new YAHOO.widget.Menu("applications");
                
                oApplicationsMenu.addItem("Application 1");
                oApplicationsMenu.addItem("Application 2");
                oApplicationsMenu.addItem("Application 3");
                oApplicationsMenu.addItem("Application 3");
                var oFileMenu = new YAHOO.widget.Menu("filemenu", { zIndex:2 });
                
                oFileMenu.addItem(new YAHOO.widget.MenuItem("New File", { helptext: "Ctrl + N" } ));
                oFileMenu.addItem("New Folder");
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Open", { helptext: "Ctrl + O" }));
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Open With...", { submenu: oApplicationsMenu }));
                oFileMenu.addItem(new YAHOO.widget.MenuItem("Print", { helptext: "Ctrl + P" }));
                var oEditMenu = new YAHOO.widget.Menu("edit", { zIndex:2 });
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Undo", { helptext: "Ctrl + Z" }));
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Redo", { helptext: "Ctrl + Y", disabled: true }));
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Cut", { helptext: "Ctrl + X", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Copy", { helptext: "Ctrl + C", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Paste", { helptext: "Ctrl + V" }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Delete", { helptext: "Del", disabled: true }), 1);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Select All", { helptext: "Ctrl + A" }), 2);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Find", { helptext: "Ctrl + F" }), 3);
                oEditMenu.addItem(new YAHOO.widget.MenuItem("Find Again", { helptext: "Ctrl + G" }), 3);
                var oMenuBar = new YAHOO.widget.MenuBar("menubar");
                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("File", { submenu: oFileMenu }));
                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Edit", { submenu: oEditMenu }));
                oMenuBar.addItem("View");
                oMenuBar.addItem("Favorites");
                oMenuBar.addItem("Tools");
                oMenuBar.addItem("Tools");
                oMenuBar.addItem("Help");
                oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Examples Home", { url: "index.html" }));
                // Render the MenuBar instance and corresponding submenus
                oMenuBar.render(document.body);
                /*
                    Add a "click" and "mouseover" event handler to each item 
                    in the root MenuBar instnace
                */
                var i = oMenuBar.getItemGroups()[0].length - 1,
                    oMenuBarItem;
                do {
                    oMenuBarItem = oMenuBar.getItem(i);
                    
                    if(oMenuBarItem) {
                        oMenuBarItem.clickEvent.subscribe(
                                onMenuBarItemClick,
                                oMenuBarItem,
                                true
                            );
                        oMenuBarItem.mouseOverEvent.subscribe(
                                onMenuBarItemMouseOver,
                                oMenuBarItem,
                                true
                            );
                    }
                
                }
                while(i--);
                // "click" event handler for the document
    
                function onDocumentClick(p_oEvent) {
                
                    var oTarget = YAHOO.util.Event.getTarget(p_oEvent);
                    if(
                        oTarget != oMenuBar.element && 
                        !YAHOO.util.Dom.isAncestor(oMenuBar.element, oTarget)
                    ) {
        
                        oMenuBar.hasFocus = false;
                        
                        if(oMenuBar.activeItem) {
    
                            var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
                            if(oSubmenu) {
                            
                                oSubmenu.hide();
                            
                            }
                            oMenuBar.clearActiveItem();
                            oMenuBar.activeItem.blur();
                        
                        }
                    
                    }
                }
                // Add a "click" handler for the document
                YAHOO.util.Event.addListener(
                        document, 
                        "click", 
                        onDocumentClick
                    );
                var oPanel = new YAHOO.widget.SimpleDialog(
                                    "exampleinfo", 
                                    { 
                                        constraintoviewport: true,
                                        fixedcenter:true,
                                        width:"400px",
                                        zIndex:1
                                    }
                                );
                
                
                oPanel.setHeader("Application Menubar Example");
                oPanel.setBody("This example demonstrates how to create an application-like menubar using nothing by JavaScript.");
                oPanel.render(document.body);
              
                oPanel.show();
            }
            // Add a "load" handler for the window
            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
        
    

           
       
yui.zip( 3,714 k)