YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Color Picker Control: Example of Color Picker Built in a Dialog from Markup

# 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.

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.

<!--markup for the various Color Picker interface controls--> <div id="yui-picker-controls" class="yui-picker-controls"> <div class="hd"><a href="#" id="yui-picker-controls-label"></a></div> <div class="bd"> <form name="yui-picker-form" method="post" action="assets/post.php"> <ul id="yui-picker-rgb-controls" class="yui-picker-rgb-controls"> <li>R <input autocomplete="off" name="yui-picker-r" id="yui-picker-r" type="text" value="0" size="3" maxlength="3" /></li> <li>G <input autocomplete="off" name="yui-picker-g" id="yui-picker-g" type="text" value="0" size="3" maxlength="3" /></li> <li>B <input autocomplete="off" name="yui-picker-b" id="yui-picker-b" type="text" value="0" size="3" maxlength="3" /></li> </ul> <ul class="yui-picker-hsv-controls" id="yui-picker-hsv-controls"> <li>H <input autocomplete="off" name="yui-picker-h" id="yui-picker-h" type="text" value="0" size="3" maxlength="3" /> °</li> <li>S <input autocomplete="off" name="yui-picker-s" id="yui-picker-s" type="text" value="0" size="3" maxlength="3" /> %</li> <li>V <input autocomplete="off" name="yui-picker-v" id="yui-picker-v" type="text" value="0" size="3" maxlength="3" /> %</li> </ul> <ul class="yui-picker-hex-summary" id="yui-picker-hex-summary"> <li id="yui-picker-rhex"> <li id="yui-picker-ghex"> <li id="yui-picker-bhex"> </ul> <div class="yui-picker-hex-controls" id="yui-picker-hex-controls"> # <input autocomplete="off" name="yui-picker-hex" id="yui-picker-hex" type="text" value="0" size="6" maxlength="6" /> </div> </form> </div> </div> <!--markup for swatches--> <div class="yui-picker-swatch" id="yui-picker-swatch"> </div> <div class="yui-picker-websafe-swatch" id="yui-picker-websafe-swatch"> </div>

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.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Color Picker Control Examples:

- Inline Color Picker Control from Script
- Example of Color Picker Built in a Dialog via JavaScript
- Example of Color Picker Built in a Dialog from Markup
- Example of Specifying Custom Labels and Element IDs for Color Picker
- Skinning Example
- Color Picker Button (included with examples for Button Control)

### More Color Picker Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings