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>
