Color Picker Control: Example of Color Picker Built in a Dialog from Markup

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.

View example in new window.

Show Color Picker Hide Color Picker Show/hide HSV fields Show/hide HEX field Show/hide RGB field Show/hide HEX summary info

Please choose a color:

• R
• G
• B

• H °
• S %
• V %

#

 

 

Server response will be displayed in this area

Creating a Color Picker Within a Dialog Based on Page Markup

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.

See the previous example for a full exploration of the JavaScript being used to set up the Dialog and to process the Color Picker's data submission via Connection Manager.

Configuration for This Example

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.