<!--
var ColorPanel = function(name) { this.create = function(name) { // 建立调色板对象
this.trim = function(s) { // 去尾部空格
var i = 0;
for (i = s.length-1; i >= 0; i--) {if (s.charAt(i) != " ") break;}
return s.substring(0,i+1);
}
this.name = (name==null?"":this.trim(name)); // 调色板对象名。字母、数字、下划线，不可间空。此后可通过“document.该名”调用该日历对象
this.colorPanel = null; // 调色板元素
if (this.name==null || this.name=="") {
alert("调色板的名必须要有");
return null;
}
if (eval("(document." + this.name + "?true:false)")) {
alert("document." + this.name + "已经存在，请换一个调色板名");
return null;
}
//--------------- 载入一批函数 ---------------------------- this.reset = function(p) { // 重置调色板
if (this.colorPanel != null) {this.colorPanel.reset(p);}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.open = function(ct) { // 显示调色板。ct：16进制颜色值
if (this.colorPanel != null) {this.colorPanel.open(ct);}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.close = function() { // 隐藏调色板
if (this.colorPanel != null) {this.colorPanel.close();}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.help = function(wObj) { // 在wObj窗口（缺省：在新窗口）显示帮助页面
if (wObj == null) {
var attrString = "top=0,left=10,width=800,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes";
wObj = window.open("", "", attrString);
}
with (wObj.document) {
open("text/html");
writeln("<HTML>");
writeln("<HEAD>");
writeln("<title>说明</title>");
writeln("<style>");
writeln("<!--");
writeln("td {font-face:宋体;font-size:12px;line-height:12px;letter-spacing:0px;margin-top:0px;}");
writeln(".tit {COLOR:#ffffff;backGround-color:#999933;font-face:宋体;font-size:12px;text-align:center;font-weight:bold}");
writeln("-->");
writeln("</style>");
writeln("</HEAD>");
writeln("<BODY topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>");
writeln("<table border='1' cellpadding='3' cellspacing='0'>");
writeln("<tr><td colspan=3 class=tit>建立调色板的方法</td></tr>");
writeln("<tr><td nowrap><b>1、var myColorPanel = ColorPanel(objName);</b></td><td colspan=2>首先建立一个调色板处理对象</td></tr>");
writeln("<tr><td></td><td colspan=2>其中，objName是赋予该对象的名。以便此后可通过“document.objName”来调用之。</td></tr>");
writeln("<tr><td align=right>它有如下只读属性：</td><td>name</td><td>调色板对象名。字母、数字、下划线，不可间空</td></tr>");
writeln("<tr><td></td><td>colorPanel</td><td>已画的调色板</td></tr>");
writeln("<tr><td align=right>它有如下方法：</td><td>Parameter()</td><td>建立调色板的参数集对象</td></tr>");
writeln("<tr><td></td><td>help(wObj)</td><td>在wObj窗口（缺省：在新窗口）显示帮助页面</td></tr>");
writeln("<tr><td></td><td>open(d)</td><td>打开（显示）调色板</td></tr>");
writeln("<tr><td></td><td>close()</td><td>关闭（不显示）调色板</td></tr>");
writeln("<tr><td></td><td>reset(p)</td><td>重置调色板</td></tr>");
writeln("<tr><td></td><td>draw(p, putObj)</td><td>画出调色板（其中，p：调色板的参数集。putObj：放置调色板的目标元素）</td></tr>");
writeln("<tr><td nowrap><b>2、var p = new myColorPanel.Parameter();</b></td><td colspan=2>然后，为所画调色板建立一个参数集对象</td></tr>");
writeln("<tr><td align=right>参数集对象有如下属性：</td><td>titleBgColor = '#00267a';</td><td>调色板标题栏的底色</td></tr>");
writeln("<tr><td></td><td>titleColor = '#ffffff';</td><td>调色板标题栏的字颜色</td></tr>");
writeln("<tr><td></td><td>panelBgColor = '';</td><td>调色板的底色</td></tr>");
writeln("<tr><td></td><td>initColor = 255;</td><td>滑块最初所处的颜色位置。0——255</td></tr>");
writeln("<tr><td></td><td>h = 235;</td><td>调色板的高度</td></tr>");
writeln("<tr><td></td><td>w = 234;</td><td>调色板的宽度</td></tr>");
writeln("<tr><td></td><td>colorsColumnNumber = 8;</td><td>方格调色板中，每行放多少个方格</td></tr>");
writeln("<tr><td></td><td>colorsColumnWidth = 12;</td><td>方格调色板中，每个方格的宽度</td></tr>");
writeln("<tr><td></td><td>colorsColumnHeight = 14;</td><td>方格调色板中，每个方格的高度</td></tr>");
writeln("<tr><td></td><td>sliderColorsColumnWidth = 4;</td><td>滑竿中，每3个色素显示的象素宽度。它和滑竿及渐变色调色板的清晰度有关</td></tr>");
writeln("<tr><td></td><td>sliderWidth = 13;</td><td>滑竿的宽度</td></tr>");
writeln("<tr><td></td><td>scrollBlockSize = 16;</td><td>滑块字符的大小</td></tr>");
writeln("<tr><td></td><td>myColors = new Array(......);</td><td>方格调色板中，各方格的颜色</td></tr>");
writeln("<tr><td align=right>及方法：</td><td>test()</td><td>检查参数是否正确</td></tr>");
writeln("<tr><td nowrap><b>3、myColorPanel.draw(p, putObj);</b></td><td colspan=2>接着，利用所建参数集对象画出调色板</td></tr>");
writeln("<tr><td align=right>调色板有如下属性：</td><td>eventSrc</td><td>获取调色板的触发控件</td></tr>");
writeln("<tr><td></td><td>parameter</td><td>调色板的参数集</td></tr>");
writeln("<tr><td></td><td>frameWindow</td><td>调色板的 iframe 载体</td></tr>");
writeln("<tr><td align=right>及方法：</td><td>open(d)</td><td>打开（显示）调色板</td></tr>");
writeln("<tr><td></td><td>close()</td><td>关闭（不显示）调色板</td></tr>");
writeln("<tr><td></td><td>reset(p)</td><td>重置调色板</td></tr>");
writeln("</TABLE>");
writeln("</BODY></HTML>");
close();
}
wObj.focus();
}
var ColorPanel = function(name) { this.create = function(name) { // 建立调色板对象
this.trim = function(s) { // 去尾部空格
var i = 0;
for (i = s.length-1; i >= 0; i--) {if (s.charAt(i) != " ") break;}
return s.substring(0,i+1);
}
this.name = (name==null?"":this.trim(name)); // 调色板对象名。字母、数字、下划线，不可间空。此后可通过“document.该名”调用该日历对象
this.colorPanel = null; // 调色板元素
if (this.name==null || this.name=="") {
alert("调色板的名必须要有");
return null;
}
if (eval("(document." + this.name + "?true:false)")) {
alert("document." + this.name + "已经存在，请换一个调色板名");
return null;
}
//--------------- 载入一批函数 ---------------------------- this.reset = function(p) { // 重置调色板
if (this.colorPanel != null) {this.colorPanel.reset(p);}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.open = function(ct) { // 显示调色板。ct：16进制颜色值
if (this.colorPanel != null) {this.colorPanel.open(ct);}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.close = function() { // 隐藏调色板
if (this.colorPanel != null) {this.colorPanel.close();}
else {alert("请先用this.draw(p)方法画出调色板");}
}
this.help = function(wObj) { // 在wObj窗口（缺省：在新窗口）显示帮助页面
if (wObj == null) {
var attrString = "top=0,left=10,width=800,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes";
wObj = window.open("", "", attrString);
}
with (wObj.document) {
open("text/html");
writeln("<HTML>");
writeln("<HEAD>");
writeln("<title>说明</title>");
writeln("<style>");
writeln("<!--");
writeln("td {font-face:宋体;font-size:12px;line-height:12px;letter-spacing:0px;margin-top:0px;}");
writeln(".tit {COLOR:#ffffff;backGround-color:#999933;font-face:宋体;font-size:12px;text-align:center;font-weight:bold}");
writeln("-->");
writeln("</style>");
writeln("</HEAD>");
writeln("<BODY topmargin='0' leftmargin='0' marginheight='0' marginwidth='0'>");
writeln("<table border='1' cellpadding='3' cellspacing='0'>");
writeln("<tr><td colspan=3 class=tit>建立调色板的方法</td></tr>");
writeln("<tr><td nowrap><b>1、var myColorPanel = ColorPanel(objName);</b></td><td colspan=2>首先建立一个调色板处理对象</td></tr>");
writeln("<tr><td></td><td colspan=2>其中，objName是赋予该对象的名。以便此后可通过“document.objName”来调用之。</td></tr>");
writeln("<tr><td align=right>它有如下只读属性：</td><td>name</td><td>调色板对象名。字母、数字、下划线，不可间空</td></tr>");
writeln("<tr><td></td><td>colorPanel</td><td>已画的调色板</td></tr>");
writeln("<tr><td align=right>它有如下方法：</td><td>Parameter()</td><td>建立调色板的参数集对象</td></tr>");
writeln("<tr><td></td><td>help(wObj)</td><td>在wObj窗口（缺省：在新窗口）显示帮助页面</td></tr>");
writeln("<tr><td></td><td>open(d)</td><td>打开（显示）调色板</td></tr>");
writeln("<tr><td></td><td>close()</td><td>关闭（不显示）调色板</td></tr>");
writeln("<tr><td></td><td>reset(p)</td><td>重置调色板</td></tr>");
writeln("<tr><td></td><td>draw(p, putObj)</td><td>画出调色板（其中，p：调色板的参数集。putObj：放置调色板的目标元素）</td></tr>");
writeln("<tr><td nowrap><b>2、var p = new myColorPanel.Parameter();</b></td><td colspan=2>然后，为所画调色板建立一个参数集对象</td></tr>");
writeln("<tr><td align=right>参数集对象有如下属性：</td><td>titleBgColor = '#00267a';</td><td>调色板标题栏的底色</td></tr>");
writeln("<tr><td></td><td>titleColor = '#ffffff';</td><td>调色板标题栏的字颜色</td></tr>");
writeln("<tr><td></td><td>panelBgColor = '';</td><td>调色板的底色</td></tr>");
writeln("<tr><td></td><td>initColor = 255;</td><td>滑块最初所处的颜色位置。0——255</td></tr>");
writeln("<tr><td></td><td>h = 235;</td><td>调色板的高度</td></tr>");
writeln("<tr><td></td><td>w = 234;</td><td>调色板的宽度</td></tr>");
writeln("<tr><td></td><td>colorsColumnNumber = 8;</td><td>方格调色板中，每行放多少个方格</td></tr>");
writeln("<tr><td></td><td>colorsColumnWidth = 12;</td><td>方格调色板中，每个方格的宽度</td></tr>");
writeln("<tr><td></td><td>colorsColumnHeight = 14;</td><td>方格调色板中，每个方格的高度</td></tr>");
writeln("<tr><td></td><td>sliderColorsColumnWidth = 4;</td><td>滑竿中，每3个色素显示的象素宽度。它和滑竿及渐变色调色板的清晰度有关</td></tr>");
writeln("<tr><td></td><td>sliderWidth = 13;</td><td>滑竿的宽度</td></tr>");
writeln("<tr><td></td><td>scrollBlockSize = 16;</td><td>滑块字符的大小</td></tr>");
writeln("<tr><td></td><td>myColors = new Array(......);</td><td>方格调色板中，各方格的颜色</td></tr>");
writeln("<tr><td align=right>及方法：</td><td>test()</td><td>检查参数是否正确</td></tr>");
writeln("<tr><td nowrap><b>3、myColorPanel.draw(p, putObj);</b></td><td colspan=2>接着，利用所建参数集对象画出调色板</td></tr>");
writeln("<tr><td align=right>调色板有如下属性：</td><td>eventSrc</td><td>获取调色板的触发控件</td></tr>");
writeln("<tr><td></td><td>parameter</td><td>调色板的参数集</td></tr>");
writeln("<tr><td></td><td>frameWindow</td><td>调色板的 iframe 载体</td></tr>");
writeln("<tr><td align=right>及方法：</td><td>open(d)</td><td>打开（显示）调色板</td></tr>");
writeln("<tr><td></td><td>close()</td><td>关闭（不显示）调色板</td></tr>");
writeln("<tr><td></td><td>reset(p)</td><td>重置调色板</td></tr>");
writeln("</TABLE>");
writeln("</BODY></HTML>");
close();
}
wObj.focus();
}
this.titleBgColor = "#00267a"; // 调色板标题栏的底色。如：#686c7e
this.titleColor = "#ffffff"; // 调色板标题栏的字颜色。如：#686c7e
this.panelBgColor = ""; // 调色板的底色。如：#eeeeee
this.initColor = 255; // 滑块最初所处的颜色位置。0——255
this.h = 235; // 调色板的高度
this.w = 234; // 调色板的宽度
this.colorsColumnNumber = 8; // 方格调色板中，每行放多少个方格
this.colorsColumnWidth = 12; // 方格调色板中，每个方格的宽度
this.colorsColumnHeight = 14; // 方格调色板中，每个方格的高度
this.sliderColorsColumnWidth = 4; // 滑竿中，每3个色素显示的象素宽度。它和滑竿及渐变色调色板的清晰度有关
this.sliderWidth = 13; // 滑竿的宽度
this.scrollBlockSize = 16; // 滑块字符的大小
this.myColors = new Array("ff8080", "ffff80", "80ff80", "00ff80", "80ffff", "0080ff", "ff80c0", "ff80ff",
"ff0000", "ffff00", "80ff00", "00ff40", "00ffff", "0080c0", "8080c0", "ff00ff",
"804040", "ff8040", "00ff00", "008080", "004080", "8080ff", "800040", "ff0080",
"800000", "ff8000", "008000", "008040", "0000ff", "0000a0", "800080", "8000ff",
"400000", "804000", "004000", "004040", "000080", "000040", "400040", "400080",
"000000", "808000", "808040", "808080", "408080", "c0c0c0", "400040", "ffffff");
this.test = function() { // 检查参数
return true;
}
return this;
}
this.draw = function(p, putObj) { // 画调色板。p：调色板的参数集。putObj：放置调色板的目标元素。空：则document.write；否则putObj.innerHTML=
if (this.colorPanel != null) {
// alert("调色板已经画过了");
this.colorPanel.reset(p);
return;
}
if (p == null) {p = new this.Parameter();}
if (!p.test()) {return;} // 如果参数检查未通过
var objID = "ColorPanel_" + this.name;
var objName1 = "document." + this.name + ".colorPanel";
var objName2 = "document.all." + objID;
var str = "";
str = "<div id='" + objID + "' style='position:absolute; z-index:9999; top:0; left:0; width:"
+ p.w + "; height:" + p.h + "; display:none'>";
str += "<iframe id='" + objID + "_frame' name='" + objID + "_frame' width='100%' height='100%'"
// + " src='colorPanel.html?yes'"
+ " scrolling=no frameborder=0></iframe></div>";
if (putObj) {putObj.innerHTML = str;}
else {document.writeln(str);}//---------------- 定义要用到的变量和对象 ------------------ var newObj = eval(objName2); // 调色板控件的层
newObj.parameter = p; // 调色板的参数集
newObj.eventSrc = null; // 获取调色板的触发控件
newObj.frame = eval(objName2 + "_frame"); // 调色板控件的 iframe 载体元素
newObj.frameWindow = window.frames[objID + "_frame"]; // 调色板控件的 iframe 载体窗口
newObj.isMoving = false;
newObj.oldX = 0;
newObj.oldY = 0;
newObj.oldT = 0;
newObj.oldL = 0;//--------------- 载入一批函数 ---------------------------- newObj.open = function(ct) { // 显示调色板。ct：16进制颜色值
this.eventSrc = window.event.srcElement;
if (ct == null) {ct = this.eventSrc.value;}
var e = this.eventSrc;
var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft;
while (e = e.offsetParent) {t += e.offsetTop; l += e.offsetLeft;}
var cw = this.clientWidth, ch = this.clientHeight;
var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
if (document.body.clientHeight + dt - t - h >= ch) {this.style.top = (t+h+6);}
else {this.style.top = (t - dt < ch) ? (t+h+6) : (t-ch);}
if (dw + dl - l >= cw) {this.style.left = l;}
else {this.style.left = (dw >= cw) ? (dw-cw+dl) : dl;}
this.style.display = "block";
this.frameWindow.focus();
this.frameWindow.resetCurrentColor(ct, true);
}
newObj.close = new Function("this.style.display = 'none';"); // 隐藏调色板
// this.open();
if (p != null) {this.parameter = p;}
this.style.height = this.parameter.h;
this.style.width = this.parameter.w;
this.frame.height = this.parameter.h;
this.frame.width = this.parameter.w;
with (this.frameWindow.document) {
open("text/html");
var i, j, ss, str="";
str = "<HTML>\n"
+ "<HEAD>\n"
+ "<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>\n"
+ "<TITLE>调色板<\/TITLE>\n"
+ "<style>\n"
+ "<!--\n"
+ "td {font-family: '宋体'; font-size: 9pt;}\n"
+ "body {font-family: '宋体'; font-size: 9pt;}\n"
+ "-->\n"
+ "<\/style>\n";
str += "<SCR"+"IPT LANGUAGE='JavaScript'>\n"
+ "<!--\n"
+ "var colorsColumnNumber = "+this.parameter.colorsColumnNumber+";\n"
+ "var colorsColumnWidth = "+this.parameter.colorsColumnWidth+";\n"
+ "var colorsColumnHeight = "+this.parameter.colorsColumnHeight+";\n"
+ "var sliderColorsColumnWidth = "+this.parameter.sliderColorsColumnWidth+";\n"
+ "var sliderWidth = "+this.parameter.sliderWidth+";\n"
+ "var scrollBlockSize = "+this.parameter.scrollBlockSize+";\n"
+ "var initColor ='"+this.parameter.initColor+"';\n";
ss = "";
for (i=0; i<this.parameter.myColors.length; i++) {ss += ",'" + this.parameter.myColors[i] + "'";}
str += "var myColors = new Array(" + (ss.length>1?ss.substring(1):"") + ");"
+ "var colorSliderNumber = 0;\n"
+ "var currentColorR = 0;\n"
+ "var currentColorG = 0;\n"
+ "var currentColorB = 0;\n";
str += "function returnColor() { // 获得当前选定的颜色\n"
+ " parent."+objName1+".eventSrc.value = ('000000'+colorAll.value.toString(16)).substring(colorAll.value.toString(16).length);\n"
+ " closeColorPanel();\n"
+ "}\n";
str += "function closeColorPanel() { // 关闭或隐藏调色板\n"
+ " parent."+objName1+".style.display = 'none';\n"
+ "}\n";
str += "function resizeColorPanel(obj) { // 缩小或放大调色板\n"
+ " if (obj.innerText == '0') {\n"
+ " obj.innerText = '2';\n"
+ " panelBody.style.display = 'none';\n"
+ " parent."+objName1+".frame.height = obj.offsetHeight + 2;\n"
+ " parent."+objName1+".style.height = obj.offsetHeight + 2;\n"
+ " parent."+objName1+".oldT = parseInt(parent."+objName1+".style.top, 10);\n"
+ " parent."+objName1+".oldL = parseInt(parent."+objName1+".style.left, 10);\n"
+ " parent."+objName1+".style.top = parent.document.body.scrollTop;\n"
+ " parent."+objName1+".style.left = 0;\n"
+ " }\n"
+ " else {obj.innerText = '0';\n"
+ " panelBody.style.display = 'block';\n"
+ " parent."+objName1+".style.top = parent."+objName1+".oldT;\n"
+ " parent."+objName1+".style.left = parent."+objName1+".oldL;\n"
+ " parent."+objName1+".frame.height = parent."+objName1+".parameter.h;\n"
+ " parent."+objName1+".style.height = parent."+objName1+".parameter.h;\n"
+ " }\n"
+ "}\n";
str += "function setUpPanel(obj) { // 提起调色板\n"
+ " obj.setCapture();\n"
+ " parent."+objName1+".oldX = window.event.clientX;\n"
+ " parent."+objName1+".oldY = window.event.clientY;\n"
+ " parent."+objName1+".isMoving = true;\n"
+ " panelBody.style.display = 'none';\n"
+ "}\n";
str += "function setDownPanel(obj) { // 放下调色板\n"
+ " if (parent."+objName1+".isMoving) {\n"
+ " parent."+objName1+".isMoving = false;\n"
+ " panelBody.style.display = 'block';\n"
+ " obj.releaseCapture();\n"
+ " }\n"
+ "}\n";
str += "function dragPanel(obj) { // 拖动调色板\n"
+ " if (parent."+objName1+".isMoving) {\n"
+ " parent."+objName1+".style.left = parseInt(parent."+objName1+".style.left,10) + window.event.clientX - parent."+objName1+".oldX;\n"
+ " parent."+objName1+".style.top = parseInt(parent."+objName1+".style.top, 10) + window.event.clientY - parent."+objName1+".oldY;\n"
+ " }\n"
+ "}\n";