YUI recommends YUI 3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

YUI Library Home

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

Button Control: Replacing the content of a Button's Menu

This example illustrates how to replace the content of a Button's Menu on the fly.

View example in new window.

Pizza Order Form
Pizza Type

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.

1var 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 
66oButton1.on("checkedChange", onCheckedChange, aThinCrustSizes); 
67oButton2.on("checkedChange", onCheckedChange, aDeepDishSizes); 
view plain | print | ?

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:

Logger Console

INFO 163ms (+65) 1:29:41 AM:
LogReader  instance0
LogReader initialized
INFO 98ms (+1) 1:29:40 AM:
Button  place-order
Initialization completed.
INFO 97ms (+0) 1:29:40 AM:
Button  null
Source element could not be used as is.  Creating a new HTML element for the button.
INFO 97ms (+0) 1:29:40 AM:
Button  null
Setting attribute "value" using source element's attribute value of "Place Order"
INFO 97ms (+0) 1:29:40 AM:
Button  null
Setting attribute "name" using source element's attribute value of "place-order"
INFO 97ms (+0) 1:29:40 AM:
Button  null
Setting attribute "type" using source element's attribute value of "submit"
INFO 97ms (+0) 1:29:40 AM:
Button  null
Building the button using an existing HTML element as a source element.
INFO 97ms (+10) 1:29:40 AM:
Button  yui-gen0
Initialization completed.
INFO 87ms (+0) 1:29:40 AM:
Button  null
No source HTML element.  Building the button using the set of configuration attributes.
INFO 87ms (+1) 1:29:40 AM:
Button  null
No value specified for the button's "id" attribute. Setting button id to "yui-gen0".
INFO 86ms (+0) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Initialization completed.
INFO 86ms (+0) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Button type2 added.
INFO 86ms (+1) 1:29:40 AM:
Button  type2
Initialization completed.
INFO 85ms (+0) 1:29:40 AM:
Button  null
Source element could not be used as is.  Creating a new HTML element for the button.
INFO 85ms (+0) 1:29:40 AM:
Button  null
Setting attribute "value" using source element's attribute value of "2"
INFO 85ms (+0) 1:29:40 AM:
Button  null
Setting attribute "name" using source element's attribute value of "pizza-type"
INFO 85ms (+0) 1:29:40 AM:
Button  null
Building the button using an existing HTML element as a source element.
INFO 85ms (+0) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Button type1 added.
INFO 85ms (+2) 1:29:40 AM:
Button  type1
Initialization completed.
INFO 83ms (+1) 1:29:40 AM:
Button  null
Source element could not be used as is.  Creating a new HTML element for the button.
INFO 82ms (+0) 1:29:40 AM:
Button  null
Setting attribute "value" using source element's attribute value of "1"
INFO 82ms (+0) 1:29:40 AM:
Button  null
Setting attribute "name" using source element's attribute value of "pizza-type"
INFO 82ms (+0) 1:29:40 AM:
Button  null
Building the button using an existing HTML element as a source element.
INFO 82ms (+0) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Found 2 child nodes with the type of "radio."  Attempting to add to button group.
INFO 82ms (+0) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Searching for child nodes with the type of  "radio" to add to the button group.
INFO 82ms (+6) 1:29:40 AM:
ButtonGroup  pizza-types-fields
Searching for child nodes with the class name yui-radio-button to add to the button group.
INFO 76ms (+0) 1:29:40 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 76ms (+0) 1:29:40 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 76ms (+76) 1:29:40 AM:
Get
_next: q0, loaded: undefined
INFO 0ms (+0) 1:29:40 AM:
global
Logger initialized

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

Reload with logging
and debugging disabled.

More Button Control Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings