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.
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 | |
3 | var oColorPickerMenu = new YAHOO.widget.Menu("color-picker-menu"); |
4 | |
5 | |
6 | // Create a Button instance of type "split" |
7 | |
8 | var 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.
1 | oButton.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.)
1 | function 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 | |
49 | oButton.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 | |
57 | oButton.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-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 | ? |
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.
Copyright © 2013 Yahoo! Inc. All rights reserved.