相仿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";
}
}
文中注释的部分是弹出其他颜色窗口，颜色数组里边的颜色用户可以自己修改为自己需要的颜色