YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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.

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    outlinenone
10 
11} 
12
13#categorybutton button em { 
14 
15    font-stylenormal
16    displayblock
17    text-alignleft
18    white-spacenowrap
19 
20    /*  Restrict the width of the label to 10em. */ 
21 
22    width10em
23 
24    /* Hide the overflow if the text label exceeds 10em in width. */ 
25 
26    overflowhidden
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 
5var 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 
18oButton.on("selectedMenuItemChange", onSelectedMenuItemChange); 
view plain | print | ?

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings