一步步教你实现跨游览器的颜色选择器
Posted 起个名字好难
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一步步教你实现跨游览器的颜色选择器相关的知识，希望对你有一定的参考价值。
原文：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1530264.html#2580430
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style type="text/css"> </style> </head> <body bgcolor="#D5F3F4"> <div id="result"></div> <script type="text/javascript"> var addSheet = function(){ var doc,cssCode; if(arguments.length == 1){ doc = document; cssCode = arguments[0]; }else if(arguments.length == 2){ doc = arguments[0]; cssCode = arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } var headElement = doc.getElementsByTagName("head")[0]; var styleElements = headElement.getElementsByTagName("style"); if(styleElements.length == 0){/*如果不存在style元素则创建*/ if(!+"\\v1"){ //ie doc.createStyleSheet(); }else{ var tempStyleElement = doc.createElement(\'style\');//w3c tempStyleElement.setAttribute("type", "text/css"); headElement.appendChild(tempStyleElement); } } var styleElement = styleElements[0]; var media = styleElement.getAttribute("media"); if(media != null && !/screen/.test(media.toLowerCase()) ){ styleElement.setAttribute("media","screen"); } if(!+"\\v1"){ //ie styleElement.styleSheet.cssText += cssCode; }else if(/a/[-1]==\'a\'){ styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加样式表字串 }else{ styleElement.appendChild(doc.createTextNode(cssCode)) } } var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var ColorPicker = Class.create();//我们的富文本编辑器类 ColorPicker.prototype = { initialize:function(options){ this.setOptions(options); this.drawPicker(this.options.textfield_id); }, setOptions:function(options){ this.options = { //这里集中设置默认属性 id:\'colorpicker\'+ new Date().getTime(), textfield_id:null//用于textarea的ID,也就是我们的必选项 } extend(this.options, options || {});//这里是用来重写默认属性 }, ID:function(id){ return document.getElementById(id) },//getElementById的快捷方式 TN:function(tn){ return document.getElementsByTagName(tn) },//getElementsByTagName的快捷方式 CE:function(s){ return document.createElement(s) },//createElement的快捷方式 hide:function(el){ el.style.display = \'none\'; }, show:function(el){ el.style.display = \'block\'; }, //用于生成颜色选择器的具体内容 colorPickerHtml : function(){ var _hex = [\'FF\', \'CC\', \'99\', \'66\', \'33\', \'00\']; var builder = []; // 呈现一个颜色格 var _drawCell = function(builder, red, green, blue){ builder.push(\'<td bgcolor="\'); builder.push(\'#\' + red + green + blue); builder.push(\'" unselectable="on"></td>\'); }; // 呈现一行颜色 var _drawRow = function(builder, red, blue){ builder.push(\'<tr>\'); for (var i = 0; i < 6; ++i) { _drawCell(builder, red, _hex[i], blue) } builder.push(\'</tr>\'); }; // 呈现六个颜色区之一 var _drawTable = function(builder, blue){ builder.push(\'<table class="cell" unselectable="on">\'); for (var i = 0; i < 6; ++i) { _drawRow(builder, _hex[i], blue) } builder.push(\'</table>\'); }; //开始创建 builder.push(\'<table><tr>\'); for (var i = 0; i < 3; ++i) { builder.push(\'<td>\'); _drawTable(builder, _hex[i]); builder.push(\'</td>\'); } builder.push(\'</tr><tr>\'); for (var i = 3; i < 6; ++i) { builder.push(\'<td>\'); _drawTable(builder, _hex[i]) builder.push(\'</td>\'); } builder.push(\'</tr></table>\'); builder.push(\'<table id="color_result"><tr><td id="color_view"></td><td id="color_code"></td></tr></table>\'); return builder.join(\'\'); }, addEvent:function(el, type, fn ) { if(!+"\\v1") { el[\'e\'+type+fn]=fn; el.attachEvent( \'on\'+type, function() { el[\'e\'+type+fn](); } ); }else{ el.addEventListener( type, fn, false ); } }, drawPicker:function(id){ var $ = this, textfield = $.ID(id), colorPicker = $.CE("div"); colorPicker.className = "colorpicker"; colorPicker.innerHTML = $.colorPickerHtml(); textfield.parentNode.insertBefore(colorPicker,null); $.hide(colorPicker); $.addEvent(textfield,\'focus\',function(){ textfield.style.position = \'relative\'; $.show(colorPicker); var l = textfield.offsetLeft + \'px\', t = (textfield.clientHeight + textfield.offsetTop)+ \'px\'; if(/msie|MSIE 6/.test(navigator.userAgent)){ var iframe = $.CE("<iframe id=\'picker_mask\' style=\'left:"+l +";width:220px;filter:mask();position:absolute;"+";top:"+t +"height:180px;z-index:1;\'></iframe>");//z-index不能为负数 textfield.insertAdjacentElement(\'afterEnd\',iframe); } colorPicker.style.left =l ; colorPicker.style.top = t ; }) $.addEvent(colorPicker,\'mouseover\',function(){ var e = arguments[0] || window.event, td = e.srcElement ? e.srcElement : e.target, nn = td.nodeName.toLowerCase(), colorView = $.ID(\'color_view\'), colorCode = $.ID(\'color_code\'); if( \'td\' == nn){ colorView.style.backgroundColor = td.bgColor; !+"\\v1"? (colorCode.innerText js练习8 --- 事件处理程序表单脚本