YUI Library JavaScript DHTML





    
Setting Menu Configuration Properties At Runtime

/*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;
}








    /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
    */
    
    div.yuimenu .bd {
    
        zoom: normal;
    
    }
    
    /*
        Overrides for the ".example-container a:visited" in the 
        the yui.css file.
    */
    div.yuimenu a.yuimenuitemlabel-disabled:visited {
    
            color: #A6A6A6;
    
    }




Setting Menu Configuration Properties At Runtime



  


This example demonstrates how to set MenuItem configuration properties at 
runtime and listen for the changes through the "configChanged" event.



Note: By default clicking outside of a menu will hide it.  
Additionally, menu items without a submenu or a URL to navigate to will hide their 
parent menu when clicked.  Click the "Show Menu" button below to make the menu 
visible if it is hidden.

      



    /*
         Initialize and render the Menu when the element it is to be 
         rendered into is ready to be scripted.
    */
    YAHOO.util.Event.onAvailable("rendertarget", function () {
        /*
             "configChange" event handler for each MenuItem instance - used 
             to log info about the configuration property that was changed.
        */
        function onMenuItemConfigChange(p_sType, p_aArgs) {
            var sPropertyName = p_aArgs[0][0],
                sPropertyValue = p_aArgs[0][1];
            YAHOO.log(("Index: " + this.index + ", " +
                       "Group Index: " + this.groupIndex + ", " +
                       "Custom Event Type: " + p_sType + ", " +                  
                       "\"" + sPropertyName + "\" Property Set To: \"" 
                       + sPropertyValue + "\""), "info", "example12");
        
        }
        /*
      Instantiate a Menu:  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 oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
        /*
             Subscribe to the Menu instance's "itemAdded" event in order to 
             subscribe to the "configChange" event handler of each MenuItem 
             instance's configuration object.
        */
        oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
            var oMenuItem = p_aArgs[0];
           
            /*
                 Subscribe to the "configChange" event handler of each MenuItem 
                 instance's configuration object.
            */
            oMenuItem.cfg.subscribe("configChanged", onMenuItemConfigChange);
        });
        /*
            Add items to the Menu instance by passing an array of strings 
            (each of which represents the "text" configuration property of a 
            YAHOO.widget.MenuItem instance) to the "addItems" method.
        */
        oMenu.addItems([
            
                "Selected MenuItem",
                "Disabled MenuItem",
                "MenuItem With A URL",
                "Checked MenuItem"
            ]);
        /*
            Since this Menu instance is built completely from script, call the 
            "render" method passing in the DOM element that it should be 
            appended to.
        */
        oMenu.render("rendertarget");
        /*
             Set a configuration property of each MenuItem to trigger the firing
             of its configuration object's "configChanged" event.
        */
        oMenu.getItem(0).cfg.setProperty("selected", true);
        oMenu.getItem(1).cfg.setProperty("disabled", true);
        oMenu.getItem(2).cfg.setProperty("url", "http://www.yahoo.com");
        oMenu.getItem(3).cfg.setProperty("checked", true);
        
        YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
    });
    

Show Menu





   
  
yui_2.7.0b.zip( 4,431 k)