純JSweb調(diào)色板控件（瀏覽器兼容小巧好用）

1、.;本人第一次做純JS控件，今天拿出來(lái)供大伙拍磚，歡迎各位修改完善，如果那位大俠完善后希望能夠給小弟發(fā)一個(gè)版本，以供學(xué)習(xí)（）謝謝。此JS控件是以JQUERY1.4.2為基礎(chǔ)框架實(shí)現(xiàn)WEB調(diào)色板功能，解決了瀏覽器兼容性問(wèn)題。在同一頁(yè)面上可以供多個(gè)控件調(diào)用。效果圖：調(diào)用方法：調(diào)用jquery-1.4.2.min.js 1.4.2版JQUERY調(diào)用頁(yè)添加HTML 添加如下JS：$(document).ready(function() ShowColorControl(txtBackgroundColor););txtBackgroundColor 為添加調(diào)色板功能的控件ID實(shí)現(xiàn)方法：/綁定控件 調(diào)用

2、此函數(shù)實(shí)現(xiàn)調(diào)用調(diào)色板function ShowColorControl(controlId) $(# + controlId).bind(click, OnDocumentClick);/ 在頁(yè)面中加載此HTMLvar ColorHex = new Array(00, 33, 66, 99, CC, FF)var SpColorHex = new Array(FF0000, 00FF00, 0000FF, FFFF00, 00FFFF, FF00FF)var current = null/初始化調(diào)色板function initPanel() var colorTable = for (i =

3、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

4、).html(colorTable); $(#tblColor).bind(mouseover, doOver); $(#tblColor).bind(mouseout, doOut); $(#tblColor).bind(click, doclick); $(#spnClose).bind(click, function() $(#colorpanel).css(display,none); );/鼠標(biāo)覆蓋事件function doOver(event) var e = $.event.fix(event); var element = e.target; if (element.tagNa

5、me = 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.in

6、dexOf(RGB) -1) clr = clr.substring(clr.length - 18); clr = rgb2hex(clr); $(#HexColor).val(clr); /element.style.backgroundColor = white; current = element; /鼠標(biāo)移開(kāi)事件function doOut(event) if (current != null) current.style.backgroundColor = current.style.background.toUpperCase();/鼠標(biāo)點(diǎn)擊事件function doclick(

7、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 target

8、Element = 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 (!srcEleme

9、nt) / DisplayClrDlg(false, e);/ / /顯示顏色對(duì)話框/display 決定顯示還是隱藏/自動(dòng)確定顯示位置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.b

10、ody.clientWidth) /對(duì)話框顯示在鼠標(biāo)右方時(shí)，會(huì)出現(xiàn)遮擋，將其顯示在鼠標(biāo)左方 left -= clrPanel.width; if (event.clientY + clrPanel.height document.body.clientHeight) /對(duì)話框顯示在鼠標(biāo)下方時(shí)，會(huì)出現(xiàn)遮擋，將其顯示在鼠標(biāo)上方 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轉(zhuǎn)十六進(jìn)制顏色值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) =