纯JS web调色板控件(浏览器兼容小巧好用)

纯JS web调色板控件(浏览器兼容小巧好用)本人第一次做纯JS控件，今天拿出来供大伙拍砖，欢迎各位修改完善，如果那位大侠完善后希望能够给小弟发一个版本，以供学习（gctren@gmail.com）谢谢。此JS控件是以JQUERY1.4.2为基础框架实现WEB调色板功能，解决了浏览器兼容性问题。在同一页面上可以供多个控件调用。效果图：调用方法：调用jquery-1.4.2.min.js 1.4.2版JQUERY 调用页添加HTML 添加如下JS： $(document).ready(function() { ShowColorControl(...

本人第一次做纯JS控件，今天拿出来供大伙拍砖，欢迎各位修改完善，如果那位大侠完善后希望能够给小弟发一个版本，以供学习（gctren@gmail.com）谢谢。此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); } // 在页面中加载此HTML var 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);

                    本文档为【纯JS web调色板控件(浏览器兼容 小巧好用)】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

纯JS web调色板控件(浏览器兼容 小巧好用)

你可能还喜欢

纯JS web调色板控件(浏览器兼容小巧好用)