/**
* 简单的颜色选择器
* @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";
}
}
文中注释的部分是弹出其他颜色窗口,颜色数组里边的颜色用户可以自己修改为自己需要的颜色
分享到:
相关推荐
IE和FF(火狐)的部分区别,css样式等。
NULL 博文链接:https://heikediguo.iteye.com/blog/1088150
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
同时支持FF和IE自动换行的CSS,用table表格实现
用JS实现和google地图类似的图片查看器 -----图片放大、缩小、移动和还原,都控制在div里,兼容ie,FF
Javascript中有很多语句在不同浏览器中显示不同,或者不能显示,这里主要介绍了JS在IE和FF中的差异。
FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结
完全由js绘制,支持IE,FF,效果像MindManager软件绘制出来的意义,很适合做流程图展示
省市县选择器,支持 ie6/7/8 和火狐
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
利用XML三级联动城市 支持IE FF 调用简单
CSS兼容IE6,IE7和FF的总结 . 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; ...
在ie6 ie7 ie8 ff浏览器下显示不同的效果,测试的时候很好用哦。
ie和ff浏览器的兼容性的一些解决方法(div )
js实现支持IE、FF、Opera、Safia浏览器的xp menu菜单 在 无名谷分享的基础上修改完成 欢迎访问http://121.18.78.216
用JS实现和google地图类似的图片查看器 -----图片放大、缩小、移动和还原,都控制在div里,兼容ie,FF
通过鼠标的拖动,来改变表格的宽度,关键是该功能可兼容IE和FF两个浏览器
CSS完美兼容IE6IE7FF的通用方法
简要说明IE与FF在脚本上的差异!例如事件差异等,具体看文档
支持ie和ff的图片上传浏览,火狐7以下和(包括)以上的获取file的路劲有点不一样,里面已有修改了,可以注意一下就行了。个人测试过,可以的!