使いやすそうなカラーピッカーを作ってみた

YUIの colorpicker + button をちょっと修正しました。
サンプル

 
<script type="syntaxhighlighter" class="brush:html">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/assets/skins/sam/skin.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/element/element-min.js&2.8.1/build/button/button-min.js&2.8.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/slider/slider-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/colorpicker/colorpicker-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script>

<style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    div.yuimenu .bd {
        zoom: normal;
    }
    .current-color {
        display: block;
        width: 1em;
        height: 1em;
        overflow: hidden;
        text-indent: 1em;
        background-color: #fff;
        white-space: nowrap;
        border: solid 1px #000;
    }
    .yui-menu-button-menu .yui-picker-controls,
    .yui-menu-button-menu .yui-picker-swatch,
    .yui-menu-button-menu .yui-picker-websafe-swatch {
        display: none;
    }
    .yui-skin-sam .yui-button{
        background:none;
        border:none;
        margin:0;
    }
    .yui-skin-sam .yui-button .first-child{
        background:none;
        border:none;
    }
    .yui-skin-sam .yui-menu-button button{
        background:none;
        margin:0;
        padding:0;
    }
</style>
<div class="yui-skin-sam">
<script type="text/javascript">
    YAHOO.namespace('ypicker');

    YAHOO.ypicker = function(container, input){
        this.container = container;
        this.input = input;
        this.menu = YAHOO.util.Dom.generateId();
        this.button = YAHOO.util.Dom.generateId();
        this.pickerContainer = YAHOO.util.Dom.generateId();
        this.pickerMenu = YAHOO.util.Dom.generateId();
        this.currentColor = YAHOO.util.Dom.generateId();

        YAHOO.util.Event.onContentReady(this.container, this.bind(this.init));
    }
    YAHOO.ypicker.prototype = {
        bind:function(func, args){
            if('undefined' == typeof args){
                args = [];
            }
            var self = this;
            return function(){
                return func.apply(self, args);
            };
        },
        onButton:function(){
            if( this.isColorPickerInit ){
                return;
            }
            this.isColorPickerInit = true;
            this.oColorPicker = new YAHOO.widget.ColorPicker(this.oColorPickerMenu.body.id, {
                                    showcontrols: false,
                                    images: {
                                        PICKER_THUMB: "http://developer.yahoo.com/yui/build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "http://developer.yahoo.com/yui/build/colorpicker/assets/hue_thumb.png"
                                    }
                                });

            this.oColorPicker.on("rgbChange", this.bind(function(e){
                var sColor = "#" + this.oColorPicker.get("hex");
                this.oColorPicker.set("value", sColor);
                YAHOO.util.Dom.setStyle(this.currentColor, "backgroundColor", sColor);
                YAHOO.util.Dom.get(this.input).value = sColor;
            }));
        },
        init:function(){
            // Create a Menu instance to house the ColorPicker instance
            this.oColorPickerMenu = new YAHOO.widget.Menu(this.pickerMenu);

            // Create a Button instance of type "split"
            this.oButton = new YAHOO.widget.Button({
                                                type: "menu",
                                                id: this.button,
                                                label: '<span id="'+this.currentColor+'" class="current-color"></span>',
                                                menu: this.oColorPickerMenu,
                                                container: this.container });

            this.oButton.on("appendTo", this.bind(function () {
                this.oColorPickerMenu.setBody(" ");
                this.oColorPickerMenu.body.id = this.pickerContainer;
                YAHOO.util.Dom.setStyle( this.oColorPickerMenu.body, 'width', '220px');
                YAHOO.util.Dom.setStyle( this.oColorPickerMenu.body, 'height', '190px');

                // Render the Menu into the Button instance's parent element
                this.oColorPickerMenu.render(this.oButton.get("container"));
            }));

            this.isColorPickerInit = false;
            this.oButton.on("click", this.bind(this.onButton));
        }
    }

</script>
<script>
    (new YAHOO.ypicker("ybutton", "ybutton-value")),
    (new YAHOO.ypicker("ybutton2", "ybutton-value2"));
</script>
<input id="ybutton-value" type="text" style="font-size:11px;"/><span id="ybutton"></span>
<input id="ybutton-value2" type="text" style="font-size:11px;"/><span id="ybutton2"></span>
</div>
</script>