YUI Library: Color Picker Control 2008-2-19 v2.

5
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
Script: array of RGB values; type (s), "rgbChange". docs for keyset…pass 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 setValue(arr RGB[, b silent])
YAHOO.widget.ColorPicker("picker", { using “addListener” or "on": (e.g. oPicker.on('rgbChange', fn); ). sets 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.
Option (type) Default Description ColorPicker: Form Fields
Creates a Color Picker instance from script; the Color Picker's
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
showhexcontrols (b) true Hide/show the hex controls. following 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,
{showwebsafe: false}) or at runtime via set (eg, oPicker.set("showwebsafe", Color Picker requires
Constructor: YAHOO.widget.ColorPicker false);). Yahoo, Dom, Event,
Element, Drag & Drop,
YAHOO.widget.ColorPicker(str ID|HTMLElement Solutions and Slider. For the
element[, obj config]);
richest interaction, the
Arguments: Listen for the rgbChange event and make use of the event's fields:
optional Animation
(1) Element: HTML ID or HTMLElement for container element; var oPicker = new Utility is highly
this is the location in the DOM where the Color Picker Control YAHOO.widget.ColorPicker("container"); recommended.
will be inserted. //a listener for logging RGB color changes;
(2) Configuration Object: JS object defining configuration //this will only be visible if logger is enabled:
properties for the Color Picker instance. See Configuration var onRgbChange = function(o) {
Options section for full list. /*o is an object
{ newValue: (array of R, G, B values),
Setting the Color Picker's Value prevValue: (array of R, G, B values),
type: "rgbChange"
You can set the Color Picker's current value by script any time }
after instantiation using setValue: */
YAHOO.log("The new color value is " + o.newValue,
oPicker.setValue([255, 255, 255], false);
"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);