YUI Library: Color Picker Control 2011-3-21 v2.

9
Simple Use Case: YAHOO.widget.ColorPicker Interesting Moment in Color Picker YAHOO.widget.ColorPicker:
This is the full list of Custom Events exposed in the Color Picker API. Methods
Markup: Event: Event Fields:
<div id="picker"></div> getElement(id | key element)
rgbChange newValue (arr) and oldValue (arr), in both cases an returns the requested element; see API docs
Script: array of RGB values; type (s), "rgbChange". for keysetpass in YUI_PICKER to return
the host element for the instance
var oPicker = new All Color Picker events are Custom Events (see Event Utility docs); subscribe to these events
YAHOO.widget.ColorPicker("picker", { setValue(arr RGB[, b silent]) sets
using addListener or "on": (e.g. oPicker.on('rgbChange', fn); ). the currently selected color
showhsvcontrols: true,
showhexcontrols: true Key Color Picker Configuration Options
); YAHOO.widget.
See online docs for complete list of Color Picker configuration options.
Creates a Color Picker instance from script; the Color Picker's Option (type) Default Description ColorPicker: Form Fields
DOM structure is created in the element whose ID is "picker". showcontrols (b) true Hide/show the entire set of controls. When a form wrapping a Color Picker
instance is submitted, the following
showhexcontrols (b) true Hide/show the hex controls. form fields are included:
showhexsummary (b) true Hide/show the hexadecimal
summary information. yui-picker-r RGB red
yui-picker-g RGB green
showhsvcontrols (b) false Hide/show the HSV controls.
yui-picker-b RGB bluee
showrgbcontrols (b) true Hide/show the RGB controls. yui-picker-h HSV hue
showwebsafe (b) true Hide/show the websafe swatch. yui-picker-s HSV
images (o) Default Object Members: saturation
images PICKER_THUMB: Image
served by yui-picker-v HSV value/
Y! servers representing the draggable thumb brightness
for the color region slider. yui-picker- Hex triplet for
HUE_THUMB: Image representing hex current color
the draggable thumb for the HSV
slider. Dependencies
Color Picker options can be set in the constructor's second argument (eg,
Constructor: YAHOO.widget.ColorPicker {showwebsafe: false}) or at runtime via set (eg, oPicker.set("showwebsafe", Color Picker requires
false);). Yahoo, Dom, Event,
YAHOO.widget.ColorPicker(str ID|HTMLElement Element, Drag & Drop,
element[, obj config]); Solutions and Slider. For the
Arguments: Listen for the rgbChange event and make use of the event's fields: richest interaction, the
(1) Element: HTML ID or HTMLElement where the Color Picker optional Animation
Control will be inserted. var oPicker = new Utility is highly
YAHOO.widget.ColorPicker("container");
(2) Configuration Object: JS object defining configuration //a listener for logging RGB color changes; recommended.
properties for the Color Picker instance. See Configuration //this will only be visible if logger is enabled:
Options section for full list. var onRgbChange = function(o) {
/*o is an object
Setting the Color Picker's Value { newValue: (array of R, G, B values),
prevValue: (array of R, G, B values),
You can set the Color Picker's current value by script any time type: "rgbChange"
}
after instantiation using setValue: */
oPicker.setValue([255, 255, 255], false); YAHOO.log("The new color value is " + o.newValue,
"info", "example");
The second argument is a boolean; if true, it suppresses the }
rgbChange event that would otherwise be fired when the value is //subscribe to the rgbChange event;
changed. oPicker.on("rgbChange", onRgbChange);