代表颜色:
<input name="txtColorValue" type="text" id="txtColorValue" class="inputText" οnclick="colordialog()" οnblur="LoadColor()" style="width:120px;" />
<input type="text" class="inputText" id="txtExample" style="width: 120px; border: 0px; background-color: #e0dfe3" />
<script type="text/javascript">
function LoadColor() {
var txtColorValue = $("#txtColorValue");
if (jQuery.trim(txtColorValue.val()).length == 0) return;
var pattern = /^#[0-9a-fA-F]{6}$/;
if (txtColorValue.val().match(pattern) == null) {
newAlert_Top('非法的颜色值!');
txtColorValue.focus();
txtColorValue.val("");
}
$("#txtExample").css("backgroundColor", txtColorValue.val());
}
</script>
<script language="javascript">
<!--
//只有把〈script〉〈/script〉标签放在〈body〉标签内才可以正常使用“其它颜色...”功能
document.write("<OBJECT id='dlgHelper' CLASSID='clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b' width='0px' height='0px'></OBJECT>");
var ocolorPopup = window.createPopup();
var ecolorPopup = null;
//鼠标移开时移除边框
function colordialogmouseout(obj) {
obj.style.borderColor = "";
obj.bgColor = "";
}
//鼠标滑过时给颜色添加边框
function colordialogmouseover(obj) {
obj.style.borderColor = "#0A66EE";
obj.bgColor = "#EEEEEE";
}
//点击颜色时触发
function colordialogmousedown(color) {
ecolorPopup.value = color;
ocolorPopup.document.body.blur();
$("#txtExample").css("backgroundColor", color);
ocolorPopup.hide();
}
//其它颜色
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();
//document.body.bgColor="#"+sColor.toUpperCase();
ocolorPopup.document.body.blur();
$("#txtExample").css("backgroundColor", "#" + sColor.toUpperCase());
}
function colordialog() {
var e = event.srcElement;
e.onkeyup = colordialog;
ecolorPopup = e;
var ocbody;
var oPopBody = ocolorPopup.document.body;
var colorlist = new Array(40);
oPopBody.style.backgroundColor = "#f9f8f7";
oPopBody.style.border = "solid #999999 1px";
oPopBody.style.fontSize = "12px";
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";
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='+e.value+'><tr><td></td></tr></table></td><td bgcolor='eeeeee' colspan='7' style='font-size:12px;' align='center'>当前颜色</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='parent.colordialogmouseout(this);' onMouseOver='parent.colordialogmouseover(this);' onMouseDown=parent.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>";
oPopBody.innerHTML = ocbody;
ocolorPopup.show(e.offsetLeft + 0, e.offsetTop + e.offsetHeight + 0, 158, 147, document.body);
}
//-->
</script>