YUI Library Examples: Button Control: Color Picker Button

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: "../../build/colorpicker/assets/picker_thumb.png",
12	HUE_THUMB: "../../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 \| ?

function onButtonOption() {

/*
		 Create a new ColorPicker instance, placing it inside the body 
		 element of the Menu instance.
	*/

var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, {
							showcontrols: false,
							images: {
								PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
								HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png"
							}
						});

/*
		Add a listener for the ColorPicker instance's "rgbChange" event
		to update the background color and text of the Button's 
		label to reflect the change in the value of the ColorPicker.
	*/

oColorPicker.on("rgbChange", function (p_oEvent) {

var sColor = "#" + this.get("hex");
		
		oButton.set("value", sColor);

YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor);
		YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor;
	
	});

// Remove this event listener so that this code runs only once

this.unsubscribe("option", onButtonOption);

}

/*
	Add a listener for the "option" event.  This listener will be
	used to defer the creation the ColorPicker instance until the 
	first time the Button's Menu instance is requested to be displayed
	by the user.
*/

oButton.on("option", onButtonOption);

/*
	Add a listener for the "click" event.  This listener will be used to apply the 
	the background color to the photo.
*/

oButton.on("click", function () {

YAHOO.util.Dom.setStyle("photo", "backgroundColor", this.get("value"));

});

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 \| ?

#button-container {

padding: .5em;

}

#color-picker-button {

vertical-align: baseline;

}

#color-picker-button button {

outline: none;  /* Safari */
	line-height: 1.5;

}

/*
	Style the Button instance's label as a square whose background color 
	represents the current value of the ColorPicker instance.
*/

#current-color {

display: block;
	display: inline-block;
	*display: block;    /* For IE */
	margin-top: .5em;
	*margin: .25em 0;    /* For IE */
	width: 1em;
	height: 1em;
	overflow: hidden;
	text-indent: 1em;
	background-color: #fff;
	white-space: nowrap;
	border: solid 1px #000;

}

/* Hide default colors for the ColorPicker instance. */

#color-picker-container .yui-picker-controls,
#color-picker-container .yui-picker-swatch,
#color-picker-container .yui-picker-websafe-swatch {

display: none;

}

/*
	Size the body element of the Menu instance to match the dimensions of 
	the ColorPicker instance.
*/
		
#color-picker-menu .bd {

width: 220px;    
	height: 190px;

}

#photo {

background: #fff url(../button/assets/ggbridge.png) top left no-repeat;
	
	/*
		Hide the alpha PNG from IE 6 and make the background image transparent via the use of 
		the AlphaImageLoader that is applied by the filter property.
	*/

_background-image: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/ggbridge.png', sizingMethod='image');;

border: solid 1px #000;
	width: 400px;
	height: 300px;
	
	_width: 398px;	/* For IE 6 */
	_height: 298px;	/* For IE 6 */

}

#button-container {

border-top: solid 1px #000;
	padding: .5em .25em;
	margin-top: .5em;

}

Configuration for This Example

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.

YUI Logger Output:

Logger Console

INFO 175ms (+1) 1:08:53 PM:
Button  loggerLink
Initialization completed.

INFO 174ms (+1) 1:08:53 PM:

Button null

Setting attribute "href" using source element's attribute value of "btn_example11.html"

INFO 173ms (+0) 1:08:53 PM:

Button null

Building the button using an existing HTML element as a source element.

INFO 173ms (+19) 1:08:53 PM:
LogReader  instance0
LogReader initialized

INFO 154ms (+2) 1:08:53 PM:

Button color-picker-button

Initialization completed.

INFO 152ms (+151) 1:08:53 PM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 1ms (+1) 1:08:52 PM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Button Control: Color Picker Button

Configuration for This Example

YUI Logger Output:

Logger Console

Button Control Examples:

More Button Control Resources: