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	/*
2	Create an array of name and value pairs that serve as the data
3	source for the Button instance's menu.
4	*/
5
6	var aCategories = [
7
8	{ text: "Category 1", value: "one" },
9	{ text: "Category 2", value: "two" },
10	{ text: "Category 3", value: "three" },
11	{ text: "A Really, Really Long Category 4", value: "four" }
12
13	];
14
15
16	/*
17	Create a Button instance, wrapping the text label in an <EM>
18	tag that will be given a fixed width of 10em.
19	*/
20
21	var oButton = new YAHOO.widget.Button({
22	type: "menu",
23	id:"categorybutton",
24	label: "<em>Select a Category</em>",
25	menu: aCategories,
26	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 an event handler to the Button instance's menu that will update the Button's label when any item in the menu is clicked.


1	// Click event handler for the Button instance
2
3	function onMenuClick(p_sType, p_aArgs) {
4
5	// The MenuItem instance that was clicked
6
7	var oMenuItem = p_aArgs[1];
8
9	if (oMenuItem) {
10
11	/*
12	Set the Button's "label" attribute to the value of the
13	"text" configuration property of the MenuItem that was
14	the target of the "click" event.
15	*/
16
17	oButton.set("label", ("<em>" + oMenuItem.cfg.getProperty("text") + "</em>"));
18
19	}
20
21	}
22
23
24	/*
25	Subscribe to the Menu instance's "click" event once the Button
26	instance is appended to its specified container.s
27	*/
28
29	oButton.on("appendTo", function () {
30
31	oButton.getMenu().subscribe("click", onMenuClick);
32
33	});
	view plain \| print \| ?

YUI Library Examples: Button Control: Fixed Width Menu Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: