类似word的颜色选择器支持IE和FF
/**
?* 简单的颜色选择器
?* @author ballanfeng
?*/
//document.write("<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>"); active控件显示其他颜色
var ecolorPopup = null; //触发js的文本框对象
var colorDIV = null; //显示颜色选择器div对象
function colordialog(textid, divid) {
?ecolorPopup = document.getElementById(textid);
?colorDIV = document.getElementById(divid);
?colorDIV.style.backgroundColor = "#f9f8f7";
?colorDIV.style.border = "solid #999999 1px";
?colorDIV.style.fontSize = "12px";
?var colorlist = new Array(40);?//颜色数组
?colorlist[0] = "#000000";
?colorlist[1] = "#993300";
?colorlist[2] = "#333300";
?colorlist[3] = "#003300";
?colorlist[4] = "#003366";
?colorlist[5] = "#000080";
?colorlist[6] = "#333399";
?colorlist[7] = "#333333";
?colorlist[8] = "#800000";
?colorlist[9] = "#FF6600";
?colorlist[10] = "#808000";
?colorlist[11] = "#008000";
?colorlist[12] = "#008080";
?colorlist[13] = "#0000FF";
?colorlist[14] = "#666699";
?colorlist[15] = "#808080";
?colorlist[16] = "#FF0000";
?colorlist[17] = "#FF9900";
?colorlist[18] = "#99CC00";
?colorlist[19] = "#339966";
?colorlist[20] = "#33CCCC";
?colorlist[21] = "#3366FF";
?colorlist[22] = "#800080";
?colorlist[23] = "#999999";
?colorlist[24] = "#FF00FF";
?colorlist[25] = "#FFCC00";
?colorlist[26] = "#FFFF00";
?colorlist[27] = "#00FF00";
?colorlist[28] = "#00FFFF";
?colorlist[29] = "#00CCFF";
?colorlist[30] = "#993366";
?colorlist[31] = "#CCCCCC";
?colorlist[32] = "#FF99CC";
?colorlist[33] = "#FFCC99";
?colorlist[34] = "#FFFF99";
?colorlist[35] = "#CCFFCC";
?colorlist[36] = "#CCFFFF";
?colorlist[37] = "#99CCFF";
?colorlist[38] = "#CC99FF";
?colorlist[39] = "#FFFFFF";
?var ocbody = "";
?ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
?ocbody += "<tr height="20" width="20"><td align="center"><table style="border:1px solid #808080;" width="12" height="12" bgcolor="" + ecolorPopup.value + ""><tr><td></td></tr></table></td><td bgcolor="eeeeee" colspan="7" style="font-size:12px;" align="center">\u5f53\u524d\u989c\u8272</td></tr>";
?for (var i = 0; i < colorlist.length; i++) {
??if (i % 8 == 0) {
???ocbody += "<tr>";
??}
??ocbody += "<td width="14" height="16" style="border:1px solid;" onMouseOut="colordialogmouseout(this);" onMouseOver="colordialogmouseover(this);" onMouseDown="colordialogmousedown('" + colorlist[i] + "')" align="center" valign="middle"><table style="border:1px solid #808080;" width="12" height="12" bgcolor="" + colorlist[i] + ""><tr><td></td></tr></table></td>";
??if (i % 8 == 7) {
???ocbody += "</tr>";
??}
??//ocbody += "<tr><td align="center" height="22" colspan="8" onMouseOut="parent.colordialogmouseout(this);" onMouseOver="parent.colordialogmouseover(this);" style="border:1px solid;font-size:12px;cursor:default;" onMouseDown="parent.colordialogmore()">其它颜色</td></tr>";
?}
?ocbody += "</table>";
?colorDIV.innerHTML = ocbody;
?colorDIV.style.left = (calculateOffset(ecolorPopup, "offsetLeft") + 1) + "px";
?colorDIV.style.top = (calculateOffset(ecolorPopup, "offsetTop") + ecolorPopup.offsetHeight) + "px";
?colorDIV.style.width = (ecolorPopup.offsetWidth + 2) + "px";
?colorDIV.style.height = 150 + "px";
?colorDIV.style.position = "absolute";
?colorDIV.style.display = "block";
}
function colordialogmouseout(obj) {
?obj.style.borderColor = "";
?obj.bgColor = "";
}
function colordialogmouseover(obj) {
?obj.style.borderColor = "#0A66EE";
?obj.bgColor = "#EEEEEE";
}
function colordialogmousedown(color) {
?ecolorPopup.value = color;
?ecolorPopup.style.background = color;
?colorDIV.style.display = "none";
}
/** 显示其他颜色方法
function colordialogmore() {
?var sColor = dlgHelper.ChooseColorDlg(ecolorPopup.value);
?sColor = sColor.toString(16);
?if (sColor.length < 6) {
??var sTempString = "000000".substring(0, 6 - sColor.length);
??sColor = sTempString.concat(sColor);
?}
?ecolorPopup.value = "#" + sColor.toUpperCase();
?ecolorPopup.style.backgroundColor = "#" + sColor.toUpperCase();
?ecolorPopup.style.display="none";
}
**/
???
//计算显示颜色div的显示位置
function calculateOffset(field, attr) {
?var offset = 0;
?while (field) {
??offset += field[attr];
??field = field.offsetParent;
?}
?return offset;
}
/**文本框失去焦点颜色选择器隐藏**/
function clearColorDIV(divid) {
?var divobj = document.getElementById(divid);
?if (divobj.style.display == "block") {
??divobj.style.display = "none";
?}
}
?
文中注释的部分是弹出其他颜色窗口，颜色数组里边的颜色用户可以自己修改为自己需要的颜色
