纯JSweb调色板控件（浏览器兼容小巧好用）.docx

本人第一次做纯JS控件，今天拿出来供大伙拍砖，欢迎各位修改完善，如果那位大侠完善后希望能够给小弟发一个版本，以供学习（）谢谢。此JS控件是以JQUERY1.4.2为基础框架实现WEB调色板功能，解决了浏览器兼容性问题。在同一页面上可以供多个控件调用。效果图：调用方法：调用jquery-1.4.2.min.js 1.4.2版JQUERY调用页添加HTML 添加如下JS：$(document).ready(function() ShowColorControl(txtBackgroundColor););txtBackgroundColor 为添加调色板功能的控件ID实现方法：/绑定控件 调用此函数实现调用调色板function ShowColorControl(controlId) $(# + controlId).bind(click, OnDocumentClick);/ 在页面中加载此HTMLvar 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 = + + + +   + + 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); $(document).ready(function() initPanel(););/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) =