《纯JS web调色板控件（浏览器兼容 小巧好用）.docx》由会员分享，可在线阅读，更多相关《纯JS web调色板控件（浏览器兼容 小巧好用）.docx（5页珍藏版）》请在三一文库上搜索。
1、.本人第一次做纯JS控件，今天拿出来供大伙拍砖，欢迎各位修改完善，如果那位大侠完善后希望能够给小弟发一个版本，以供学习（gctren）谢谢。此JS控件是以JQUERY1.4.2为基础框架实现WEB调色板功能，解决了浏览器兼容性问题。在同一页面上可以供多个控件调用。效果图：调用方法：调用jquery-1.4.2.min.js 1.4.2版JQUERY调用页添加HTML 添加如下JS：$(document).ready(function() ShowColorControl(txtBackgroundColor););txtBackgroundColor 为添加调色板功能的控件ID实现方法：/绑定
2、控件 调用此函数实现调用调色板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
3、(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 + ; $
4、(#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 (e
5、lement.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()
6、; 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();/鼠标点击事件funct
7、ion 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
8、; 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;/ / i
9、f (!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.widt
10、h 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(dis
11、play, 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) = #) return rgb; var n = Number(rgb); var ds = rgb.split(/D+/); var decimal = Number(ds1) * 65536 + Number(ds2) * 256 + Number(ds3); return # + zero_fill_hex(decimal, 6);: