YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Button Control: Fixed Width Menu Button

# Button Control: Fixed Width Menu Button

This example demonstrates how to create a Menu Button whose text label has a fixed width. The behavior of this widget is similar to an HTML `<select>` element in that its label hides any overflow when updated to represent the selected menu item.

View example in new window.

Begin by creating a Button instance of type "menu," wrapping its text label in an `<em>` element.

// Create an array of name and value pairs that serve as the data // source for the Button instance's menu. var aCategories = [ { text: "Category 1", value: "one" }, { text: "Category 2", value: "two" }, { text: "Category 3", value: "three" }, { text: "A Really, Really Long Category 4", value: "four" } ]; // Create a Button instance, wrapping the text label in an <EM> // tag that will be given a fixed width of 10em. var oButton = new YAHOO.widget.Button({ type: "menu", id:"categorybutton", label: "<em>Select a Category</em>", menu: aCategories, container: "buttoncontainer" });

Style the `<em>` element so that it has a fixed width of 10em, and prevent the characters from exceeding this width by setting its "overflow" property to "hidden."

#categorybutton button { /* Suppress the focus outline since Safari will outline even the text that is clipped by the application of the "overflow" property in the follow style rule. */ outline: none; } #categorybutton button em { font-style: normal; display: block; text-align: left; white-space: nowrap; /* Restrict the width of the label to 10em. */ width: 10em; /* Hide the overflow if the text label exceeds 10em in width. */ overflow: hidden; /* IE and Safari support the ability to add ellipsis when the text label exceeds 10em in width. */ text-overflow: ellipsis; }

Finally, add a `selectedMenuItemChange` event handler to the Button that will update its label when any item in the Menu is clicked.

// "selectedMenuItemChange" event handler for a Button that will set // the Button's "label" attribute to the value of the "text" // configuration property of the MenuItem that was clicked. var onSelectedMenuItemChange = function (event) { var oMenuItem = event.newValue; this.set("label", ("<em class=\"yui-button-label\">" + oMenuItem.cfg.getProperty("text") + "</em>")); }; // Register a "selectedMenuItemChange" event handler that will sync the // Button's "label" attribute to the MenuItem that was clicked. oButton.on("selectedMenuItemChange", onSelectedMenuItemChange);

## 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.

### 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