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.
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 (
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
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:
YAHOO.example.colorpicker.inDialog object is created, we can then set its init function to fire
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.
Note: Logging and debugging is currently turned off for this example.