YUI Library Home

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.

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:

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":

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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