jsp页面:
javascript脚本: $(document).ready(function() { initPanel(); //初始化调色板 $("#fontColor").bind("click", OnDocumentClick); //fontColor:调用调色板的控件ID }); js内容: var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF'); var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF','FF00FF'); var current = null //初始化调色板 function initPanel() { var colorTable = '' for (i = 0; i < 2; i++) { for (j = 0; j < 6; j++) { colorTable = colorTable + '' colorTable = colorTable + '' if (i == 0) { colorTable = colorTable + '' } else { colorTable = colorTable + '' } colorTable = colorTable + '' for (k = 0; k < 3; k++) { for (l = 0; l < 6; l++) { colorTable = colorTable + '' } } } } colorTable = '
' + ''; $("#colorpanel").html(colorTable); $("#tblColor").bind("mouseover", doOver); $("#tblColor").bind("mouseout", doOut); $("#tblColor").bind("click", doclick); $("#spnClose").bind("click", function(){ $("#colorpanel").css("display","none"); } ); } //鼠标覆盖事件 function doOver(event) { var e = $.event.fix(event); var element = e.target; if ((element.tagName == "TD") && (current != element)) { if (current != null) { current.style.backgroundColor = current.style.background; } element.style.background = element.style.backgroundColor; $("#DisColor").css("backgroundColor", element.style.backgroundColor); var clr = element.style.backgroundColor.toUpperCase(); if (clr.indexOf('RGB') > -1) { clr = clr.substring(clr.length - 18); clr = rgb2hex(clr); } $("#HexColor").val(clr); //element.style.backgroundColor = "white"; current = element; } } //鼠标移开事件 function doOut(event) { if (current != null) current.style.backgroundColor = current.style.background.toUpperCase(); } //鼠标点击事件 function doclick(event) { var e = $.event.fix(event); if (e.target.tagName == "TD") { var clr = e.target.style.background; clr = clr.toUpperCase(); if (targetElement) { if (clr.indexOf('RGB') > -1) { clr = clr.substring(clr.length - 18); clr = rgb2hex(clr); } targetElement.value = clr; } DisplayClrDlg(false, e); return clr; } } var targetElement = null; function OnDocumentClick(event) { var e = $.event.fix(event); var srcElement = e.target; // if (srcElement.alt == "clrDlg") { targetElement = srcElement; DisplayClrDlg(true, e); // } // else { // while (srcElement && srcElement.id != "colorpanel") { // srcElement = srcElement.parentElement; // } // if (!srcElement) { // DisplayClrDlg(false, e); // } // } } //显示颜色对话框 //display 决定显示还是隐藏 //自动确定显示位置 function DisplayClrDlg(display, event) { var clrPanel = $("#colorpanel"); if (display) { var left = document.body.scrollLeft + event.clientX; var top = document.body.scrollTop + event.clientY; if (event.clientX + clrPanel.width > document.body.clientWidth) { //对话框显示在鼠标右方时会出现遮挡将其显示在鼠标左方 left -= clrPanel.width; } if (event.clientY + clrPanel.height > document.body.clientHeight) { //对话框显示在鼠标下方时会出现遮挡将其显示在鼠标上方 top -= clrPanel.height; } clrPanel.css("left", left); clrPanel.css("top", top); clrPanel.css("display", "block"); } else { clrPanel.css("display", "none"); } } //RGB转十六进制颜色值 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } function rgb2hex(rgb) { if (rgb.charAt(0) == '#') return rgb; var n = Number(rgb); var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]); return "#" + zero_fill_hex(decimal, 6); }