YUI Library Examples: Button Control: Fixed Width Menu Button

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


1	// Create an array of name and value pairs that serve as the data
2	// source for the Button instance's menu.
3
4	var aCategories = [
5
6	{ text: "Category 1", value: "one" },
7	{ text: "Category 2", value: "two" },
8	{ text: "Category 3", value: "three" },
9	{ text: "A Really, Really Long Category 4", value: "four" }
10
11	];
12
13
14	// Create a Button instance, wrapping the text label in an <EM>
15	// tag that will be given a fixed width of 10em.
16
17	var oButton = new YAHOO.widget.Button({
18	type: "menu",
19	id:"categorybutton",
20	label: "<em>Select a Category</em>",
21	menu: aCategories,
22	container: "buttoncontainer" });
	view plain \| print \| ?

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


1	#categorybutton button {
2
3	/*
4	Suppress the focus outline since Safari will outline even the
5	text that is clipped by the application of the "overflow" property
6	in the follow style rule.
7	*/
8
9	outline: none;
10
11	}
12
13	#categorybutton button em {
14
15	font-style: normal;
16	display: block;
17	text-align: left;
18	white-space: nowrap;
19
20	/* Restrict the width of the label to 10em. */
21
22	width: 10em;
23
24	/* Hide the overflow if the text label exceeds 10em in width. */
25
26	overflow: hidden;
27
28	/*
29	IE and Safari support the ability to add ellipsis when the text
30	label exceeds 10em in width.
31	*/
32
33	text-overflow: ellipsis;
34
35	}
	view plain \| print \| ?

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


1	// "selectedMenuItemChange" event handler for a Button that will set
2	// the Button's "label" attribute to the value of the "text"
3	// configuration property of the MenuItem that was clicked.
4
5	var onSelectedMenuItemChange = function (event) {
6
7	var oMenuItem = event.newValue;
8
9	this.set("label", ("<em class=\"yui-button-label\">" +
10	oMenuItem.cfg.getProperty("text") + "</em>"));
11
12	};
13
14
15	// Register a "selectedMenuItemChange" event handler that will sync the
16	// Button's "label" attribute to the MenuItem that was clicked.
17
18	oButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
	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:

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: Fixed Width Menu Button

Configuration for This Example

YUI Logger Output:

Logger Console

Button Control Examples:

More Button Control Resources: