YUI Library Examples: Color Picker Control: Example of Specifying Custom Labels and Element IDs for Color Picker

Customizing Element IDs and Form Labels in Color Picker

Element ID strings for the Color Picker Control are stored in the YAHOO.widget.ColorPicker.prototype.ID object. We've dumped the full output of that object to the logger to give you a sense of the object's full contents.

For the purposes of this example, we'll override the R, G, and B members of that object. We'll create a new object with those members and then use YAHOO.lang.merge to integrate our new values with the existing object; this will override only the members we specify in the second argument of the merge function:


1	// this is how to override some or all of the
2	// element ids used by the control
3	var ids = YAHOO.lang.merge(
4	YAHOO.widget.ColorPicker.prototype.ID, {
5	R: "custom_R",
6	G: "custom_G",
7	B: "custom_B"
8	});
	view plain \| print \| ?

We can use the same technique to override members of YAHOO.widget.ColorPicker.prototype.TXT for the purposes of customization or internationalization. Again, you can find the full contents of that object dumped to the logger console.

Here, we'll modify the R, G, and B members and change those text strings to "Red", "Green", and "Blue":


1	// this is how to change the text generated
2	// by the control
3	var txt = YAHOO.lang.merge(
4	YAHOO.widget.ColorPicker.prototype.TXT, {
5	R: "Red",
6	G: "Green",
7	B: "Blue"
8	});
	view plain \| print \| ?

YUI Logger Output:

Logger Console

INFO3467ms (+3) 10:33:26 AM:
ColorPicker
picker update [0, 0]

WARN3464ms (+8) 10:33:26 AM:
ColorPicker
hue update: 0

INFO3456ms (+0) 10:33:26 AM:
ColorPicker
Setting picker slider to 0,0

INFO3456ms (+0) 10:33:26 AM:
ColorPicker
Hue slider is being set to 0

INFO3456ms (+1) 10:33:26 AM:
ColorPicker
RGB value set to [255, 255, 255] (hsv: [0, 0, 1])

INFO3455ms (+4) 10:33:26 AM:
ColorPicker
RGB value set to 255,255,255

INFO3451ms (+2) 10:33:26 AM:
ColorPicker
picker size180

INFO3449ms (+15) 10:33:26 AM:
ColorPicker
Building markup

INFO3434ms (+2667) 10:33:26 AM:
LogReader  instance0
LogReader initialized

INFO767ms (+0) 10:33:23 AM:
example
The full contents of the YAHOO.widget.ColorPicker.prototype.TXT object: {ILLEGAL_HEX => Illegal hex value entered, SHOW_CONTROLS => Show color details, HIDE_CONTROLS => Hide color details, CURRENT_COLOR => Currently selected color: {rgb}, CLOSEST_WEBSAFE => Closest websafe color: {rgb}. Click to select., R => R, G => G, B => B, H => H, S => S, V => V, HEX => #, DEG => °, PERCENT => %}

INFO767ms (+767) 10:33:23 AM:
example
The full contents of the YAHOO.widget.ColorPicker.prototype.ID object: {R => yui-picker-r, R_HEX => yui-picker-rhex, G => yui-picker-g, G_HEX => yui-picker-ghex, B => yui-picker-b, B_HEX => yui-picker-bhex, H => yui-picker-h, S => yui-picker-s, V => yui-picker-v, PICKER_BG => yui-picker-bg, PICKER_THUMB => yui-picker-thumb, HUE_BG => yui-picker-hue-bg, HUE_THUMB => yui-picker-hue-thumb, HEX => yui-picker-hex, SWATCH => yui-picker-swatch, WEBSAFE_SWATCH => yui-picker-websafe-swatch, CONTROLS => yui-picker-controls, RGB_CONTROLS => yui-picker-rgb-controls, HSV_CONTROLS => yui-picker-hsv-controls, HEX_CONTROLS => yui-picker-hex-controls, HEX_SUMMARY => yui-picker-hex-summary, CONTROLS_LABEL => yui-picker-controls-label}

INFO0ms (+0) 10:33:23 AM:
global
Logger initialized

YUI Library Examples: Color Picker Control: Example of Specifying Custom Labels and Element IDs for Color Picker

Customizing Element IDs and Form Labels in Color Picker

YUI Logger Output:

Logger Console

Color Picker Control Examples:

More Color Picker Control Resources: