This example differs from the previous example only in that the markup for the Color Picker instance is placed on the page rather than being generated automatically by the control. By exploring this markup and the CSS file accompanying Color Picker in the YUI download, you will get a sense of how to create your own customized interface for Color Picker that reflects the design imperatives of your own implementation.
To interact with this example, click the "Show Color Picker" button below. You can then experiment with enabling/disabling portions of the picker interface via the dashboard and submit color data via Connection Manager and peruse the returned values that are echoed back to the page.
As noted above, this example differs from the previous example only in that the markup for the Color Picker Control instance is placed on the page rather than being generated automatically by the control. The purpose here is to reveal the underlying markup in such a way that you might begin modifying it (and the accompanying CSS file that ships with Color Picker in the YUI download) to create highly customized interfaces.
The markup used in this example to arrange the Color Picker interface is shown in the code block below. While you would not want to change the size of the slider elements, most of the remaining elements can be repositioned or restyled at your discretion to create an interface tailored to your specific design needs.
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.