YUI Library Examples: Button Control: Replacing the content of a Button's Menu

Button's menu attribute is documented as being writeOnce — meaning that the attribute can only be set once, either via the the object literal passed to the constructor, or on an instance via the set method. However, although the menu attribute can only be set once, the Menu widget's API makes it easy to replace the content of a Menu instance on the fly. In this example, the content of the "Pizza Size" Menu is controlled by the type of pizza the user has selected.

The code used to replace the content of the "Pizza Size" Menu in this example resides in the onCheckedChange function, a listener for the checkedChange event of the two radio buttons. Each listener receives an array of MenuItem configuration properties, used to rebuild the content of the "Pizza Size" Menu, either by using the Menu's clearContent method, or by setting the Menu's itemData property.

var onCheckedChange = function (event, menuitems) {

var oMenu;

if (this.get("checked")) {

oMenu = oMenuButton.getMenu();

//	Use the "inDocument" method of the Dom utility to 
		//	determine if the Button's Menu has been rendered.

if (YAHOO.util.Dom.inDocument(oMenuButton.getMenu().element)) {

//	If the Menu has been rendered, use Menu's "clearContent"
			//	method to remove all existing MenuItems, then repopulate 
			//	the Menu using the "addItems" method.

oMenu.clearContent();
			oMenu.addItems(menuitems);
			
			//	Using the "clearContent" method removes all content
			//	from a Menu instance, effectively restoring it to its 
			//	pre-rendered state.  For this reason, it is necessary
			//	to call the "render" method after using "clearContent"
			//	so that the Menu's content is rendered into the Menu's 
			//	body element (<div class="bd">).  However, since the 
			//	Menu's root element is already in the page, it is not
			//	necessary to pass an element reference when calling the 
			//	"render" method.
			
			oMenu.render();

}
		else {
			
			//	By default a Button's Menu is lazyloaded - meaning the 
			//	creation and rendering of all MenuItems is 
			//	deferred until the Menu is intially requested by the 
			//	user.  If the "menu" attribute of a Button is set to 
			//	an array of MenuItem configuration properties, as in 
			//	this example, Button sets the "itemData" property of its 
			//	Menu to the value of the "menu" attribute.  When the 
			//	Button's Menu is first shown, Menu uses the value of 
			//	the "itemData" to create and render all MenuItems.
			
			//	If the user clicks either the "Deep Dish" or 
			//	"Thin Crust" Buttons before the content of the 
			//	"Pizza Size" Menu has been rendered, simply set the 
			//	Menu's "itemData" property to the to the array of 
			//	MenuItem configuration properties that should be used 
			//	to build the Menu when it is lazy loaded.
			
			oMenu.itemData = menuitems;
		}					
		
	}

};

//	Register a change event handler for each radio button's 
//	"checked" attribute that will rebuild the content of the 
//	menu button's Menu instance when the user toggles between 
//	the deep dish and thin crust pizzas

oButton1.on("checkedChange", onCheckedChange, aThinCrustSizes);
oButton2.on("checkedChange", onCheckedChange, aDeepDishSizes);

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Button Control: Replacing the content of a Button's Menu

Configuration for This Example

YUI Logger Output:

Button Control Examples:

More Button Control Resources: