YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: Color Picker Control: Inline Color Picker Control from Script

Color Picker Control: Inline Color Picker Control from Script

The simplest way to implement the Color Picker Control is to do so entirely via script. In this example, a Color Picker is placed on the page via script and allowed to create its own DOM structure. In cases where you've provided other form controls on the page for color specification (ie, controls not dependent on JavaScript), this approach allows you to provide a richer visual experience for sighted users with JavaScript enabled.

Building a Color Picker Instance via JavaScript

In this example, the Color Picker Control instance is allowed to create its own DOM structure. We begin with a simple style set for the containing element into which that DOM structure will be rendered and we place the containing element on the page:

With a target element in place, we can instantiate Color Picker and provide our desired configuration options. In this example, we are specifying that HSV and hex controls should be displayed and we're specifying custom locations for the color-picker slider thumb and the hue slider thumb. For the purposes of the example, we're also hooking into the Color Picker's rgbChange event and logging the newValue to the logger console; you'll see those log messages each time you adjust the color. This example also demonstrates how to use the picker's get method to tap into the current hex value via script.

It's advisable to provide all necessary configurations at the instantiation of the Color Picker; it renders immediately and automatically upon creation.

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings