本文主要是介绍jsp页面引入调色板、颜色表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
jsp页面：<form>
<input id="fontColor"/>
<div id="colorpanel" style="position:absolute;display:none; width:253px;height:177px;"></div>
</form>
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 + '<tr style="height:12px;">'
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#000000">'
if (i == 0) {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
}
else {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td style="width=11px;height:12px;background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;" bordercolor="000000">'
+ '<tr height="30px"><td colspan=21 bgcolor=#cccccc>' + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
+ '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
+ '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td><td align="right" width="100%"><span id="spnClose" style="cursor:hand;">Ⅹ</span> </td></tr></table></td></table>'
+ '<table width=253 id="tblColor" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;">'
+ colorTable + '</table>';
$("#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);
}
这篇关于jsp页面引入调色板、颜色表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
