YUI Library Home

YUI Library Examples: Color Picker Control: Example of Color Picker Built in a Dialog via JavaScript

Color Picker Control: Example of Color Picker Built in a Dialog via JavaScript

This example explores the implementation of a Color Picker Control within the context of a popup Dialog. The control can be called up in the floating Dialog, a color can be chosen, and upon submission of the Color Picker's value the color data is submitted to the server using Dialog's built-in support for Connection Manager.

Click the "Show Color Picker" button to get started. Use the other buttons on the configuration dashboard to explore different configurations of the Color Picker Controls. When you submit your color choice, the example uses Connection Manager to echo back the form fields that were passed to the server.

Please choose a color:
Server response will be displayed in this area

Using a Color Picker in a Dialog Control

The focus in this example is on the use of Color Picker Control within a Dialog Control.

In many cases, you'll want to use this implementation for Color Picker as it allows you to avoid reserving space inline in the page for the Color Picker interface. Dialog is ideally suited for this purpose because it floats above the page and is designed to collect and submit form data. Here we'll use Dialog's built-in support for Connection Manager and use that mechanism to process the color information gathered via Color Picker.

We'll also use a configuration dashboard that allows us to selectively enable/disable aspects of the Color Picker interface.

Here's the markup we need to get started:

This markup provides us with a containing element for our Dialog instance (yui-picker-panel) and another containing element for our Color Picker (yui-picker). From here, we can begin our JavaScript. We'll use the Module Pattern to construct our code, beginning by creating a namespace for our example code and some useful shortcuts to commonly-used YUI components.

The object YAHOO.example.colorpicker.inDialog is returned from our anonymous function. Its first member is our init function, wherein we create the Dialog instance:

We don't want to create our Color Picker until the Dialog has rendered, so we tie our Color Picker's instantiation block to the Dialog's renderEvent:

Outside of our initialization function, we create success and failure handlers to deal with data as it comes back from Connection Manager. Those are then accessible to us as we initialize, and we can wire them up to our Dialog's callback object:

The last step in our initialization is to render our dialog:

When our YAHOO.example.colorpicker.inDialog object is created, we can then set its init function to fire onDOMReady:

We've only called out some of the more significant parts of this example's code in the description above; to see the full example's source code, view this example via its "new window" button and view the page source.

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