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: Color Picker Button

Button Control: Color Picker Button

This example demonstrates how to render a Color Picker into the Menu of a Split Button. Use the Color Picker Button below to create a duotone by selecting the background color that should be applied to the image.

Begin by creating a Menu instance that will house the ColorPicker instance. Next, instantiate a new Button of type "split," setting its "menu" attribute to the Menu instance.

1// Create a Menu instance to house the ColorPicker instance 
2 
3var oColorPickerMenu = new YAHOO.widget.Menu("color-picker-menu"); 
4 
5 
6// Create a Button instance of type "split" 
7 
8var oButton = new YAHOO.widget.Button({  
9                                    type: "split",  
10                                    id: "color-picker-button",  
11                                    label: "<em id=\"current-color\">Current color is #FFFFFF.</em>",  
12                                    menu: oColorPickerMenu,  
13                                    container: this }); 
view plain | print | ?

Once the new Button is created, add a listener for its "appendTo" event that will be used to render its Menu instance into the same DOM element specified as the containing element for the Button.

1oButton.on("appendTo"function () { 
2 
3    /*
4        Create an empty body element for the Menu instance in order to 
5        reserve space to render the ColorPicker instance into.
6    */ 
7 
8    oColorPickerMenu.setBody(" "); 
9 
10    oColorPickerMenu.body.id = "color-picker-container"
11 
12 
13 
14    // Render the Menu into the Button instance's parent element 
15 
16    oColorPickerMenu.render(this.get("container")); 
17 
18}); 
view plain | print | ?

Once the new Button is created, add a listener for its "option" event that will be used to create a new ColorPicker instance. (Defering the creation of the ColorPicker until the firing of the "option" event improves the intial load time of the Button instance.)

1function onButtonOption() { 
2 
3    /*
4         Create a new ColorPicker instance, placing it inside the body 
5         element of the Menu instance.
6    */ 
7 
8    var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, { 
9                            showcontrols: false
10                            images: { 
11                                PICKER_THUMB: "http://yui.yahooapis.com/2.9.0/build/colorpicker/assets/picker_thumb.png"
12                                HUE_THUMB: "http://yui.yahooapis.com/2.9.0/build/colorpicker/assets/hue_thumb.png" 
13                            } 
14                        }); 
15 
16 
17    /*
18        Add a listener for the ColorPicker instance's "rgbChange" event
19        to update the background color and text of the Button's 
20        label to reflect the change in the value of the ColorPicker.
21    */ 
22 
23    oColorPicker.on("rgbChange"function (p_oEvent) { 
24 
25        var sColor = "#" + this.get("hex"); 
26         
27        oButton.set("value", sColor); 
28 
29        YAHOO.util.Dom.setStyle("current-color""backgroundColor", sColor); 
30        YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor; 
31     
32    }); 
33     
34 
35    // Remove this event listener so that this code runs only once 
36 
37    this.unsubscribe("option", onButtonOption); 
38 
39
40 
41 
42/*
43    Add a listener for the "option" event.  This listener will be
44    used to defer the creation the ColorPicker instance until the 
45    first time the Button's Menu instance is requested to be displayed
46    by the user.
47*/ 
48 
49oButton.on("option", onButtonOption); 
50 
51 
52/*
53    Add a listener for the "click" event.  This listener will be used to apply the 
54    the background color to the photo.
55*/ 
56 
57oButton.on("click"function () { 
58 
59    YAHOO.util.Dom.setStyle("photo""backgroundColor"this.get("value")); 
60 
61}); 
view plain | print | ?

Lastly, add some styles that customize both the Button's text label and the ColorPicker instance.

1#button-container { 
2 
3    padding: .5em
4 
5} 
6
7#color-picker-button { 
8 
9    vertical-alignbaseline
10 
11} 
12
13#color-picker-button button { 
14 
15    outlinenone;  /* Safari */ 
16    line-height1.5
17 
18} 
19 
20 
21/*
22    Style the Button instance's label as a square whose background color 
23    represents the current value of the ColorPicker instance.
24*/ 
25
26#current-color { 
27 
28    displayblock
29    display: inline-block
30    *displayblock;    /* For IE */ 
31    margin-top: .5em
32    *margin: .25em 0;    /* For IE */ 
33    width1em
34    height1em
35    overflowhidden
36    text-indent1em
37    background-color: #fff; 
38    white-spacenowrap
39    bordersolid 1px #000
40 
41} 
42 
43 
44/* Hide default colors for the ColorPicker instance. */ 
45 
46#color-picker-container .yui-picker-controls, 
47#color-picker-container .yui-picker-swatch, 
48#color-picker-container .yui-picker-websafe-swatch { 
49 
50    displaynone
51 
52} 
53 
54 
55/*
56    Size the body element of the Menu instance to match the dimensions of 
57    the ColorPicker instance.
58*/ 
59        
60#color-picker-menu .bd { 
61 
62    width220px;     
63    height190px
64 
65} 
66
67#photo { 
68 
69    background: #fff url(../button/assets/ggbridge.png) top left no-repeat
70     
71    /*
72        Hide the alpha PNG from IE 6 and make the background image transparent via the use of 
73        the AlphaImageLoader that is applied by the filter property.
74    */ 
75 
76    _background-imagenone
77    _filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/ggbridge.png'sizingMethod='image');; 
78 
79    bordersolid 1px #000
80    width400px
81    height300px
82     
83    _width398px;  /* For IE 6 */ 
84    _height298px/* For IE 6 */ 
85 
86} 
87
88#button-container { 
89 
90    border-topsolid 1px #000
91    padding: .5em .25em
92    margin-top: .5em
93 
94} 
view plain | print | ?

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings