简单的面向对象的颜色选择器
2009-03-18 16:50
169 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <mce:script type="text/javascript"><!-- var colorPicker = function(idStr){ this.colorPool = ["#000000","#993300","#333300","#003300","#003366","#000080","#333399","#333333","#800000","#FF6600","#808000","#008000","#008080","#0000FF","#666699","#808080","#FF0000","#FF9900","#99CC00","#339966","#33CCCC","#3366FF","#800080","#999999","#FF00FF","#FFCC00","#FFFF00","#00FF00","#00FFFF","#00CCFF","#993366","#CCCCCC","#FF99CC","#FFCC99","#FFFF99","#CCFFCC","#CCFFFF","#99CCFF","#CC99FF","#FFFFFF"]; this.initialize(idStr); } colorPicker.prototype = { initialize: function(idStr){ var count=0; var html = ''; var self = this; html+= '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >'; // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>'; for(i=0;i<5;i++) { html+= "<tr>"; for(j=0;j<8;j++) { html+= '<td align="center" width="20" height="20" style="background:'+ this.colorPool[count]+'" mce_style="background:'+ this.colorPool[count]+'" unselectable="on"> </td>'; count++; } html+= "</tr>"; } html+= '</table>'; this.trigger = document.getElementById(idStr); this.div = document.createElement('div'); this.div.innerHTML = html; var tds = this.div.getElementsByTagName('td'); for(var i=0,l=tds.length;i<l;i++){ tds[i].onclick = function(){ self.setColor(this.style.backgroundColor); } } this.div.id = 'myColorPicker'; this.trigger.parentNode.appendChild(this.div); this.div.style.position = 'absolute'; this.div.style.left = this.trigger.offsetLeft + 'px' this.div.style.top = (this.trigger.clientHeight + this.trigger.offsetTop)+ 'px'; //this.hide(); this.trigger.onclick = function(){ if(self.div.style.display == 'none'){ self.show(); return false; }else{ self.hide(); return false; } } }, setColor : function(c){ this.hide(); document.getElementById('demo').style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能 }, hide : function(){ this.div.style.display = 'none' }, show : function(){ this.div.style.display = 'block' } } // --></mce:script> <div > <a href="#" mce_href="#" onclick="initColorPicker();return false" id="demo" style="position:absolute;left:200px">颜色选择</a> </div> <mce:script type="text/javascript"><!-- function initColorPicker(){ picker = new colorPicker('demo'); } // --></mce:script> </body> </html>
相关文章推荐
- asp.net ajax简单实现省市区三级联动(二):面向对象实现
- ABAP面向对象事件处理-简单实例
- 我的第一篇博客,java面向对象来解决简单的问题--杭电2001
- 7、面向对象以及winform的简单运用(委托)
- 简单理解js面向对象工厂方式
- JS中面向对象简单入门
- 利用UML进行简单的面向对象分析
- sdut 面向对象程序设计上机练习五(简单类和对象)
- 面向对象思想的简单描述
- android简单的颜色选择器制作
- php面向对象操作mysql数据库,简单的新闻管理系统的编写
- 初学java--利用面向对象概念做一个简单的新闻系统
- 面向对象最简单的计算器
- php面向对象简单实例
- 《UML和模式应用》读书笔记(一)面向对象分析和设计简单示例
- js 面向对象简单练习(继承)
- 使用jQuery在对象中缓存选择器的简单方法
- 6、面向对象以及winform的简单运用(抽象基类与接口)
- 9、面向对象以及winform的简单运用(输入输出流、图像的上传和读取)
- 简单的面向对象类的写法