YUI Library Examples: Button Control: Color Picker Button

Begin by creating a Menu instance that will house the ColorPicker instance. Next, instantiate a new Button of type "split," setting its "menu" attribute to the Menu instance.

Once the new Button is created, add a listener for its "option" event that will be used to render its Menu as well as to create a new ColorPicker instance. (Defering the rendering of the Menu until the firing of the "option" event improves the intial load time of the Button instance.)

function onButtonOption() {

/*
        Create an empty body element for the Menu instance in order to 
        reserve space to render the ColorPicker instance into.
    */

oColorPickerMenu.setBody(" ");

oColorPickerMenu.body.id = "color-picker-container";

// Render the Menu into the Button instance's parent element

oColorPickerMenu.render(this.get("container"));

/*
         Create a new ColorPicker instance, placing it inside the body 
         element of the Menu instance.
    */

var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, {
                            showcontrols: false,
                            images: {
                                PICKER_THUMB: "/yui/build/colorpicker/assets/picker_thumb.png",
                                HUE_THUMB: "/yui/build/colorpicker/assets/hue_thumb.png"
                            }
                        });

// Align the Menu to its Button

oColorPickerMenu.align();

/*
        Add a listener for the ColorPicker instance's "rgbChange" event
        to update the background color and text of the Button's 
        label to reflect the change in the value of the ColorPicker.
    */

oColorPicker.on("rgbChange", function (p_oEvent) {

var sColor = "#" + this.get("hex");

YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor);
        YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor;
    
    });

// Remove this event listener so that this code runs only once

this.unsubscribe("option", onButtonOption);

}

/*
    Add a listener for the "option" event.  This listener will be
    used to defer the creation the ColorPicker instance until the 
    first time the Button's Menu instance is requested to be displayed
    by the user.
*/

oButton.on("option", onButtonOption);

Lastly, add some styles that customize both the Button's text label and the ColorPicker instance.

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.

YUI Library Examples: Button Control: Color Picker Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: