Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Color Picker Control: Example of Specifying Custom Labels and Element IDs for Color Picker

# Color Picker Control: Example of Specifying Custom Labels and Element IDs for Color Picker

The Color Picker below looks much like the pickers in other examples. However, two changes have been made:

1. Element IDs have been customized: Color Picker uses a default set of element IDs when it creates the DOM for your picker instance. If you want to control those IDs, you may need to change these defaults. (In addition to the method described here, you can also pass in new IDs via the constructor; see the Customizing Element IDs section of the Color Picker User's Guide.
2. Form labels have been customized: Instead of R, G, and B, we're using here the strings "Red", "Green", and "Blue". This illustrates the technique you might use to translate your Color Picker interface into multiple languages.

View example in new window.

## Customizing Element IDs and Form Labels in Color Picker

Element ID strings for the Color Picker Control are stored in the `YAHOO.widget.ColorPicker.prototype.ID` object. We've dumped the full output of that object to the logger to give you a sense of the object's full contents.

For the purposes of this example, we'll override the `R`, `G`, and `B` members of that object. We'll create a new object with those members and then use `YAHOO.lang.merge` to integrate our new values with the existing object; this will override only the members we specify in the second argument of the `merge` function:

// this is how to override some or all of the // element ids used by the control var ids = YAHOO.lang.merge( YAHOO.widget.ColorPicker.prototype.ID, { R: "custom_R", G: "custom_G", B: "custom_B" });

We can use the same technique to override members of `YAHOO.widget.ColorPicker.prototype.TXT` for the purposes of customization or internationalization. Again, you can find the full contents of that object dumped to the logger console.

Here, we'll modify the `R`, `G`, and `B` members and change those text strings to "Red", "Green", and "Blue":

// this is how to change the text generated // by the control var txt = YAHOO.lang.merge( YAHOO.widget.ColorPicker.prototype.TXT, { R: "Red", G: "Green", B: "Blue" });

### YUI Logger Output:

### 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 © 2008 Yahoo! Inc. All rights reserved.

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