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.


1	var onCheckedChange = function (event, menuitems) {
2
3	var oMenu;
4
5	if (this.get("checked")) {
6
7	oMenu = oMenuButton.getMenu();
8
9	// Use the "inDocument" method of the Dom utility to
10	// determine if the Button's Menu has been rendered.
11
12	if (YAHOO.util.Dom.inDocument(oMenuButton.getMenu().element)) {
13
14	// If the Menu has been rendered, use Menu's "clearContent"
15	// method to remove all existing MenuItems, then repopulate
16	// the Menu using the "addItems" method.
17
18	oMenu.clearContent();
19	oMenu.addItems(menuitems);
20
21	// Using the "clearContent" method removes all content
22	// from a Menu instance, effectively restoring it to its
23	// pre-rendered state. For this reason, it is necessary
24	// to call the "render" method after using "clearContent"
25	// so that the Menu's content is rendered into the Menu's
26	// body element (<div class="bd">). However, since the
27	// Menu's root element is already in the page, it is not
28	// necessary to pass an element reference when calling the
29	// "render" method.
30
31	oMenu.render();
32
33	}
34	else {
35
36	// By default a Button's Menu is lazyloaded - meaning the
37	// creation and rendering of all MenuItems is
38	// deferred until the Menu is intially requested by the
39	// user. If the "menu" attribute of a Button is set to
40	// an array of MenuItem configuration properties, as in
41	// this example, Button sets the "itemData" property of its
42	// Menu to the value of the "menu" attribute. When the
43	// Button's Menu is first shown, Menu uses the value of
44	// the "itemData" to create and render all MenuItems.
45
46	// If the user clicks either the "Deep Dish" or
47	// "Thin Crust" Buttons before the content of the
48	// "Pizza Size" Menu has been rendered, simply set the
49	// Menu's "itemData" property to the to the array of
50	// MenuItem configuration properties that should be used
51	// to build the Menu when it is lazy loaded.
52
53	oMenu.itemData = menuitems;
54	}
55
56	}
57
58	};
59
60
61	// Register a change event handler for each radio button's
62	// "checked" attribute that will rebuild the content of the
63	// menu button's Menu instance when the user toggles between
64	// the deep dish and thin crust pizzas
65
66	oButton1.on("checkedChange", onCheckedChange, aThinCrustSizes);
67	oButton2.on("checkedChange", onCheckedChange, aDeepDishSizes);
	view plain \| print \| ?

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:

Logger Console

Button Control Examples:

More Button Control Resources: