YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
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.
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 | ? |
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings