JavaScript 仿 Drewmweaver 颜色选择器

ColorPicker v0.1是一款兼容多种浏览器的颜色选择器插件，支持IE6.0+、Firefox 3.0等。提供了立方色、连续色调及灰度等级三种颜色方案，并能轻松集成到网页中。

兼容浏览器：IE6.0+ FF3.0 Safari3.1 Opera9.6 Chrome2.0

/*********************************************** // ColorPicker v0.1 // 作者：freewind // 日期：2009.08.26 // Email: freewind22@163.com // 转载请保留此信息. ************************************************/ if(typeof Freewind == 'undefined'){ Freewind = {}; } Freewind.CSS = { add : function(cssText, doc){ doc = doc || document; var style = null, styles = doc.getElementsByTagName("head")[0].getElementsByTagName("style"); if(styles && styles.length == 0){ style = doc.createElement("style"); style.type = "text/css"; doc.getElementsByTagName("head")[0].appendChild(style); }else{ style = styles[0]; } if(style.styleSheet){ style.styleSheet.cssText += cssText; }else{ style.appendChild(doc.createTextNode(cssText)); } } }; Freewind.ColorPicker = function(){ this.nMaxRow = 12; this.nMaxCol = 21; this.colorTable = null; this.colorPicker = null; this.target = null; this.callBack = null; this.isShow = true; this.initialize(); }; Freewind.ColorPicker.prototype = { $ : function(id){ return document.getElementById(id); }, addEventHandler : function (oTarget, sEventType, fnHandler){ if( oTarget.addEventListener ){ oTarget.addEventListener(sEventType, fnHandler, false); }else if( oTarget.attachEvent ){ oTarget.attachEvent("on" + sEventType, fnHandler); }else{ oTarget["on" + sEventType] = fnHandler; } }, removeEventHandler : function (oTarget, sEventType, fnHandler){ if( oTarget.removeEventListener ){ oTarget.removeEventListener(sEventType, fnHandler, false); }else if( oTarget.detachEvent ){ oTarget.detachEvent("on" + sEventType, fnHandler); }else{ oTarget["on" + sEventType] = null; } }, stopPropagation : function(oEvent){ if(oEvent){ oEvent.stopPropagation(); }else{ window.event.cancelBubble = true; } }, getOffset : function (obj, parentObj){ var x = 0, y = 0; do{ x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; }while(obj && obj != parentObj); return {x:x, y:y}; }, toHexColor : function(nColor){ return "#" + ("000000" + nColor.toString(16)).slice(-6); }, toRGBColor : function(sColor){ sColor = sColor.replace("#", ""); var rgb = {R : 0, G : 0, B : 0}; if(/^#(/w{2})(/w{2})(/w{2})$/.test(sColor)){ rgb.R = parseInt(RegExp.$1, 16); rgb.G = parseInt(RegExp.$2, 16); rgb.B = parseInt(RegExp.$3, 16); } return rgb; }, getBGColor : function(td){ var bgColor = td.style.backgroundColor.toString().toUpperCase(); if(bgColor.indexOf("RGB") >= 0){ //FF var rgb = bgColor.match(/RGB/((/d+).?,.?(/d+).?,.?(/d+)/)/); bgColor = "#"; for(var i=1; i<rgb.length; i++){ val = parseInt(rgb[i]).toString(16).toUpperCase(); if(val.length < 2){ val = "0" + val; } bgColor += val; } } return bgColor; }, hideSelect : function(val){ if(document.all){ var selects = document.getElementsByTagName("select"), nLen = selects.length; for(var i=0; i < nLen; i++){ if(selects[i].id != "CPType"){ selects[i].style.visibility = val; } } } }, initPosition : function(){ if(!this.target ){ return; } var offset = this.getOffset(this.target); var nWidth = this.colorPicker.offsetWidth, nHeight = this.colorPicker.offsetHeight, objWidth = this.target.offsetWidth + 1, objHeight = this.target.offsetHeight + 1, bodyWidth = document.body.clientWidth || document.documentElement.clientWidth, bodyHeight = document.body.clientHeight || document.documentElement.clientHeight; if(offset.x + objWidth + nWidth > bodyWidth && offset.x - nWidth > 0){ x = offset.x - nWidth; }else{ x = offset.x + objWidth; } if(offset.y + objHeight + nHeight > bodyHeight && offset.y - nHeight + objHeight > 0){ y = offset.y - nHeight + objHeight; }else{ y = offset.y; } this.colorPicker.style.left = x + "px"; this.colorPicker.style.top = y + "px"; }, initHtml : function(){ var sHtml = '<div id="FWColorPicker"><div id="CPTitle"><div id="CPPrevView"></div><div id="CPValue">#FFFFFF</div><div id="CPButton"><select hideFocus="hideFocus" id="CPType"><option value="1" selected="selected">立方色</option><option value="2">连续色调</option><option value="3">灰度等级</option></select></div></div><div id="CPTable" ></div><div id="CPBorder"></div></div>'; this.colorPicker = document.createElement("div"); this.colorPicker.innerHTML = sHtml; this.colorPicker.style.position = "absolute"; this.colorPicker.style.top = "-1000px"; this.colorPicker.style.zIndex = 1000; document.body.appendChild(this.colorPicker); var html = []; html.push("<table border='1' cellpadding='0' cellspacing='0' id='CPColorTable' >"); for(var i=0; i < this.nMaxRow; i++){ html.push("<tr>"); for(var j=0; j < this.nMaxCol; j++){ html.push("<td> </td>"); } html.push("</tr>"); } html.push("</table>"); this.$("CPTable").innerHTML = html.join(""); Freewind.CSS.add("/ #FWColorPicker{ position:relative; width:231px !important; width:232px; height:161px !important; height:162px; border:1px solid #333; font-size:12px; font-family:'宋体', Arial;}/ #FWColorPicker #CPTitle{ height:25px; padding-top:4px; background:#E4E4E4; }/ #FWColorPicker #CPPrevView{ float:left; width:50px; height:20px; border:1px solid #333; background:#FFF; margin-left:5px; }/ #FWColorPicker #CPValue{ float:left; margin-left:20px; line-height:20px; }/ #FWColorPicker #CPButton{ float:right; }/ #FWColorPicker #CPButton select{ margin-right:10px; }/ #FWColorPicker #CPColorTable{ border-collapse:collapse; border-color:#000; cursor:default; -moz-user-select:none; }/ #FWColorPicker #CPColorTable td{ width:10px; height:10px; line-height:10px; border-color:#000;}/ #FWColorPicker #CPBorder{ display:none; position:absolute; width:10px; height:10px; border:1px solid #FFFFFF; line-height:10px; }", document); }, initEvent : function(){ this.colorTable = this.$("CPColorTable"); var self = this; this.colorTable.onmousemove = function(oEvent){ self.onmouseover(window.event ? window.event.srcElement : oEvent.target); }; this.colorTable.onclick = function(oEvent){ self.onclick(window.event ? window.event.srcElement : oEvent.target); self.stopPropagation(oEvent); }; this.$("CPBorder").onclick = function(oEvent){ self.onclick(self.$("CPPrevView")); self.stopPropagation(oEvent); }; this.colorPicker.onclick = function(oEvent){ self.stopPropagation(oEvent); }; this.$("CPButton").getElementsByTagName("select")[0].onchange = function(){ var val = parseInt(this.value, 16); switch(val){ case 1: self.setColor_Cube(); break; case 2: self.setColor_Series(); break; case 3: self.setColor_Gray(); break; } self.colorTable.focus(); }; this.addEventHandler(document, "click", function(){ self.Hide(); }); }, initialize : function(){ this.hideSelect("hidden"); this.initHtml(); this.initEvent(); this.setColor_Cube(); }, onmouseover : function(td){ if(td.tagName.toLowerCase() != "td"){ return; } var bgColor = this.getBGColor(td), offset = this.getOffset(td, this.$("FWColorPicker")), CPBorder = this.$("CPBorder"); CPBorder.style.display = "block"; CPBorder.style.left = offset.x - (document.all ? 0 : 1 ) + "px"; CPBorder.style.top = offset.y - (document.all ? 0 : 1 ) + "px"; this.$("CPPrevView").style.backgroundColor = bgColor; this.$("CPValue").innerHTML = bgColor; }, onclick : function(td){ var bgColor = this.getBGColor(td); var nColor = parseInt(bgColor.replace("#", ""), 16); this.Hide(); this.target.style.backgroundColor = bgColor; //this.target.style.color = (nColor < 0x888888) ? "#FFFFFF" : "#000000"; if(this.callBack){ this.callBack(bgColor, this.target); } }, setColor_Left : function(){ var table = this.colorTable; var colors = ['#000000', '#333333', '#666666', '#999999', '#cccccc', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff']; for(var i=0; i < this.nMaxRow; i++){ table.rows[i].cells[0].style.backgroundColor = table.rows[i].cells[2].style.backgroundColor = "#000000"; table.rows[i].cells[1].style.backgroundColor = colors[i]; } }, setColor_Cube : function (){ this.setColor_Left(); var table = this.colorTable, start = 0x0, step = 0x330000; for(var i=0; i< this.nMaxRow; i++){ if(i > 5){ color = start = 0x990000 + (i-6) * 0x000033; }else{ color = start = 0x0 + i * 0x000033; } for(var j=3; j < this.nMaxCol; j++){ table.rows[i].cells[j].style.backgroundColor = this.toHexColor(color); color += 0x003300; if((j - 2) % 6 == 0){ start += step, color = start; } } } }, setColor_Series : function (){ this.setColor_Left(); var table = this.colorTable, start = 0xCCFFFF, step = 0x660000, flag = 1; for(var i=0; i < this.nMaxRow; i++){ if(i > 5){ color = start = 0xFF00FF + (i-6) * 0x003300; }else{ color = start = 0xCCFFFF - i * 0x003300; } flag = 1; for(var j=3; j < this.nMaxCol; j++){ table.rows[i].cells[j].style.backgroundColor = this.toHexColor(color); color -= 0x000033 * flag; if((j - 2) % 6 == 0){ flag *= -1; start -= step ; color = start - ((flag > 0) ? 0 : 0x0000FF); } } } }, setColor_Gray : function (){ var table = this.colorTable, color = 0xffffff; for(var i=0; i < this.nMaxRow; i++){ for(var j=0; j < this.nMaxCol; j++){ table.rows[i].cells[j].style.backgroundColor = this.toHexColor(color); if(color <= 0) { color = 0x000000; }else{ color -= 0x010101; } } } }, Show : function(obj, fnCallBack){ this.target = obj; this.callBack = fnCallBack; this.isShow = true; this.colorPicker.style.display = "block"; this.initPosition(); this.hideSelect("hidden"); }, Hide : function(){ if(this.isShow){ this.colorPicker.style.display = "none"; this.isShow = false; this.hideSelect("visible"); } } }; function selectColor (obj, fnCallBack){ if(typeof window.$colorPicker == "undefined"){ window.$colorPicker = new Freewind.ColorPicker(); } window.$colorPicker.Show(obj, fnCallBack); window.$colorPicker.stopPropagation(selectColor.caller.arguments[0]); }

Demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>颜色选择器</title> <style type="text/css"></style><style type="text/css" mce_bogus="1"> html, body{ padding:0px; margin:0px; font-size:12px; font-family: "新宋体"; } input{ width:100px; } table td{ text-align:center; } table div{ margin:auto; }</style> <script type="text/javascript" src="http://files.cnblogs.com/Freewind22/FWcolorPicker.js" ></script> <script type="text/javascript"></script> </head> <body > <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#ccc"> <tr> <td height="180" width="33%"><input type="text" name="textfield" id="textfield" onclick="selectColor(this);" /><select></select></td> <td width="33%"> </td> <td width="33%"><div onclick="selectColor(this);" style="width:50px; height:18px; line-height:18px; padding:1px; border:1px solid #000;" >12312312</div></td> </tr> <tr> <td height="180"> </td> <td><input type="text" name="textfield2" id="textfield2" onclick="selectColor(this, callBack);" /></td> <td> </td> </tr> <tr> <td height="200"> </td> <td><div onclick="selectColor(this);" style="width:50px; height:18px; line-height:18px; padding:1px; border:1px solid #000;" >abc</div></td> <td style="padding-left:80px; padding-top:80px;" mce_style="padding-left:80px; padding-top:80px;"><input type="text" name="textfield3" id="textfield3" onclick="selectColor(this);" /></td> </tr> </table> </body> </html>