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.

View example in new window.

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 "option" event that will be used to render its Menu as well as to create a new ColorPicker instance. (Defering the rendering of the Menu until the firing of the "option" event improves the intial load time of the Button instance.)

1function onButtonOption() { 
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 
19 
20 
21    /*
22         Create a new ColorPicker instance, placing it inside the body 
23         element of the Menu instance.
24    */ 
25 
26    var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, { 
27                            showcontrols: false, 
28                            images: { 
29                                PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png", 
30                                HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" 
31                            } 
32                        }); 
33 
34 
35    // Align the Menu to its Button 
36 
37    oColorPickerMenu.align(); 
38 
39 
40 
41 
42 
43    /*
44        Add a listener for the ColorPicker instance's "rgbChange" event
45        to update the background color and text of the Button's 
46        label to reflect the change in the value of the ColorPicker.
47    */ 
48 
49    oColorPicker.on("rgbChange", function (p_oEvent) { 
50 
51        var sColor = "#" + this.get("hex"); 
52         
53        oButton.set("value", sColor); 
54 
55        YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor); 
56        YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor; 
57     
58    }); 
59     
60 
61    // Remove this event listener so that this code runs only once 
62 
63    this.unsubscribe("option", onButtonOption); 
64 
65} 
66 
67 
68/*
69    Add a listener for the "option" event.  This listener will be
70    used to defer the creation the ColorPicker instance until the 
71    first time the Button's Menu instance is requested to be displayed
72    by the user.
73*/ 
74 
75oButton.on("option", onButtonOption); 
76 
77 
78/*
79    Add a listener for the "click" event.  This listener will be used to apply the 
80    the background color to the photo.
81*/ 
82 
83oButton.on("click", function () { 
84 
85    YAHOO.util.Dom.setStyle("photo", "backgroundColor", this.get("value")); 
86 
87}); 
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-align: baseline; 
10 
11} 
12
13#color-picker-button button { 
14 
15    outline: none;  /* Safari */ 
16    line-height: 1.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    display: block; 
29    display: inline-block; 
30    *display: block;    /* For IE */ 
31    margin-top: .5em; 
32    *margin: .25em 0;    /* For IE */ 
33    width: 1em; 
34    height: 1em; 
35    overflow: hidden; 
36    text-indent: 1em; 
37    background-color: #fff; 
38    white-space: nowrap; 
39    border: solid 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    display: none; 
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    width: 220px;     
63    height: 190px; 
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-image: none; 
77    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/ggbridge.png', sizingMethod='image');; 
78 
79    border: solid 1px #000; 
80    width: 400px; 
81    height: 300px; 
82     
83    _width: 398px;  /* For IE 6 */ 
84    _height: 298px; /* For IE 6 */ 
85 
86} 
87
88#button-container { 
89 
90    border-top: solid 1px #000; 
91    padding: .5em .25em; 
92    margin-top: .5em; 
93 
94} 
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:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings