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:

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