The Color Picker below looks much like the pickers in other examples. However, two changes have been made:
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 | ? |
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.
INFO 891ms (+0) 5:27:31 PM:
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 => %}
INFO 891ms (+891) 5:27:31 PM:
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}
INFO 0ms (+0) 5:27:30 PM:
global
Logger initialized
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings