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 \| ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Button Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.

YUI Library Examples: Button Control: Fixed Width Menu Button

Button Control: Fixed Width Menu Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: