YUI Library Home

Site Search (YDN & YUIBlog):

# 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 Thin Crust Deep Dish
Size:

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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Button Control Examples:

- Push Buttons
- Link Buttons
- Checkbox Buttons
- Radio Buttons
- Submit Buttons
- Reset Buttons
- Menu Buttons
- Split Buttons
- Simple Calendar Menu Button
- Calendar Menu Button with Date on Button Face
- Color Picker Button
- Fixed Width Menu Button
- Glowing Button
- Slider Button
- Using the Button ARIA Plugin
- Using A Menu Button To Replace A <select> Element
- Replacing the content of a Button's Menu
- Combobox, with CSS for Multiple Stacked Instances (included with examples for AutoComplete Control)
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control)
- Getting CSS Style Sheets (included with examples for Get Utility)
- Complex Application (included with examples for Layout Manager)

### More Button Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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