[图形框架类]仿DreamWaver取色器

[Navymk]

// ColorPanel
// by CSDN.MKing QQ:2052828
// [e-mail]

function $(id){
	return document.getElementById(id);
}
function ColorPanel(){
	this.fill = "000000";
	this.size = 5;
	this.cellsize = 15;
	this.R = null;
	this.G = null;
	this.B = null;
	
	var _this = this;
	var _colorPanel;
	var _colorDis = document.createElement("div");
	
	this._convertor = function(val){
		var v = parseInt("0x" + val);	
		return isNaN(v) ? 0 : v;
	}
	this._format = function(val){
		val = val == null ? "000000" : val;
		val = val.replace("#", "");
		if(val.length < 6){
			if(val.length == 3){
				var c0 = val.substr(0, 1);
				var c1 = val.substr(1, 1);
				var c2 = val.substr(2, 1);
				val = c0 + c0 + c1 + c1 + c2 + c2;
			}
			else{
				val = val + this.fill.substr(val.length);
			}
		}
		else{
			val = val.substr(0, 6);
		}
		return [val.substr(0, 2), val.substr(2, 2), val.substr(4, 2)];
	}
	this.$ = function(val){
		var ff = this._format(val);
		return [this._convertor(ff[0]), this._convertor(ff[1]), this._convertor(ff[2])]
	}	
	//rgb to 16bit color
	this._unconvert = function(val){
		if(!isNaN(parseInt(val))){
			val = (parseInt(val) % 256).toString(16) + "";
			if(val.length < 2) val = "0" + val;
			return val;
		} else {
			return "ff";
		}		
	}
	this.c16 = function(r, g, b){
		return "#" + this._unconvert(r) + this._unconvert(g) + this._unconvert(b)
	}
	//
	this.panel = function(){
		var step = 255 / this.size;
		var div = document.createElement("div");
		div.style.cssText = "width:" + this.cellsize * ((this.size + 1) * parseInt((this.size + 1) / 2) + 1) + "px; height:" + this.cellsize * (this.size + 1) * 2 + "px; border-left:1px solid #000; border-top:1px solid #000; background-color:#ccc; position:absolute; margin-top:1px;";
		div.style.display = "none";
		div.appendChild(this.graypanel());
		for(var ir = 0; ir < 256; ir += step){
			var r = document.createElement("div");
			r.style.cssText = "width:" + this.cellsize * (this.size + 1) + "px; float:left;";
			for(var ig = 0; ig < 256; ig += step){
				for(var ib = 0; ib < 256; ib += step){
					r.appendChild(this._cell(ir, ig, ib));
				}
			}
			div.appendChild(r);
		}
		return div;
	}
	this.init = function(container, R, G, B){
		this.R = R;
		this.G = G;
		this.B = B;
		
		var div = document.createElement("div");
		var but = document.createElement("div");
		_colorPanel = this.panel();
		_colorDis.style.cssText = "width:20px; border:1px solid #000; font-size:12px; text-align:center; padding:5px; cursor:pointer; height:15px;";
		this._presetColor();
		_colorDis.title = "Click here to pick color";
		
		
		div.appendChild(_colorDis);
		div.appendChild(_colorPanel);
		
		but.innerHTML = "Change Color";
		but.style.cssText = "width:100px; border:1px solid #000; font-size:12px; text-align:center; padding:5px; cursor:pointer; float:left; height:15px; font-family:Verdana, Arial, Helvetica, sans-serif;";
		div.onclick = function(){
			if(_colorPanel.style.display != "none"){
				_colorPanel.style.display = "none";
			} else {
				_colorPanel.style.display = "block";
			}
			_this._presetColor();
		}
		container.appendChild(div);
	}
	this._presetColor = function(){
		if(_this.R != null && _this.G != null && _this.B != null){
			_colorDis.style.backgroundColor = this.c16(_this.R.value, _this.G.value, _this.B.value);
		}
		//_colorPanel.style.display = "none";
	}
	this._cell = function(r, g, b){
		var div = document.createElement("div");
		div.title = this.c16(r, g, b);
		div.color = this.c16(r, g, b);
		div.style.cssText = "border:1px solid #000; border-top:0px; border-left:0px; width:" + (this.cellsize - 1) + "px; height:" + (this.cellsize - 1) + "px; float:left; overflow:hidden; cursor:pointer; background-color:" + this.c16(r, g, b);
		div.onclick = function(){
			if(_this.R != null) _this.R.value = parseInt(r);
			if(_this.G != null) _this.G.value = parseInt(g);
			if(_this.B != null) _this.B.value = parseInt(b);
			_this._presetColor();
		}
		div.onmouseover = function(){
			this.style.cssText = "border:1px solid #fff; width:" + (_this.cellsize - 2) + "px; height:" + (_this.cellsize - 2) + "px; float:left; overflow:hidden; cursor:pointer; background-color:" + _this.c16(r, g, b);
			_colorDis.style.backgroundColor = this.color;
		}
		div.onmouseout = function(){
			this.style.cssText = "border:1px solid #000; border-top:0px; border-left:0px; width:" + (_this.cellsize - 1) + "px; height:" + (_this.cellsize - 1) + "px; float:left; overflow:hidden; cursor:pointer; background-color:" + _this.c16(r, g, b);
		}
		return div
	}
	this.graypanel = function(){
		var step = parseInt(255 / (this.size * 2 + 1));
		var div = document.createElement("div");
		div.style.cssText = "width:" + this.cellsize + "px; height:" + this.cellsize * (this.size + 1) * 2 + "px; float:left";
		for(var i = 0; i < 256; i += step){
			if(256 - i < step) i = 255
			div.appendChild(this._cell(i, i, i));
		}
		return div;
	}
}

<style type="text/css">
input{ border:1px solid #666; padding:3px; width:30px; }
span{ font-size:9pt; color:#999999; font-family:Verdana, Arial, Helvetica, sans-serif }
</style>
</head>

<body>
<h1>ColorPanel</h1>
<span>by CSDN.NavyMK - QQ:2052828 - [e-mail]</span>
<hr />
<table width="400" border="0">
  <tr>
    <td width="200">R:
    <input id="R" /> - G:<input id="G" /> - B:<input id="B" /></td>
    <td width="30"><div id="container"></div></td>
    <td><span><---Click to Pick</span></td>
  </tr>
</table>
<hr />
<a href="js/ColorPanel.js">Code</a>
<script type="text/javascript">
var cp = new ColorPanel();
cp.size = 5; //设置精度 使用奇数
cp.init($("container"), $("R"), $("G"), $("B"));
</script>
</body>

演示地址

演示中有程序说明.

最近很穷,就不散分了.

[dh20156]

支持，接分！

[BlueDestiny]

我发现精神状态不好就会老打错字~
你可以把事件监听放到container里，这样就不用每个cell都加监听事件了，节省资源

[s_liangchao1s]

真是不错

[YH_Random]

不错的东东，顶一个`~~~~~

[Navymk]

[Quote=引用 5 楼 BlueDestiny 的回复:]
我发现精神状态不好就会老打错字~
你可以把事件监听放到container里，这样就不用每个cell都加监听事件了，节省资源
[/Quote]

事件方面我比较弱，我不太明白您的意思。原来我定义的cell的事件怎么通过container触发呢？
。。。
刚发现该程序ff3下效率很低...ff2似乎没感觉...就是选色的时候，延迟得不小...

[Navymk]

1天没来，就觉得好久没来了...多谢各位关注阿，第一天发的时候都不知道沉到哪里了...

[Navymk]

或者，cell改用a标记,用hover控制显示,去掉over和out事件，仅做一个click事件就可以了...
。。。
但是a标记在ie6下如果href=""或者没有href的话,又不会响应hover。。。

[BlueDestiny]

不错~。

提个建议，你可以看事件监听放到container里，这个就不用每个cell都监听事件了