喜气羊羊

羊羊其实是条鱼|每天学习一点点|每天进步一点点

  PHP博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  68 随笔 :: 0 文章 :: 63 评论 :: 0 Trackbacks
前天做了个小项目,需要一个调色板,自己动手写了一个,现在发出来,希望大家批评指正。
 1 /**
 2  * 文件:colorpad.js
 3  * 版本:0.1
 4  * 作者:young40 || 杨世玲
 5  * 日期:2008-04-07
 6  * 作用:弹出一个调色板
 7  * 版权:GPL2
 8  */
 9 var cp_loaded = false;
10 var postioned = false;
11 var target_obj = false;
12 function cp_load()
13 {
14     var p = '';
15     p += '<div id="colorpad" style="position:absolute; z-index:10;border:#000000 solid 1px; background-color:#FFF; width:490px;">';
16     p += '<div style="text-align:right; cursor:pointer;" onclick="hidecolorpad();">关闭</div>';
17     var R = G = B = new Array('0', '3', '6', '9', 'C', 'F');
18     
19     var colors = '';
20     
21     for(r in R)
22     {
23         var _r = R[r] + R[r];
24         for(g in G)
25         {
26             var _g = G[g] + G[g];
27             for(b in B)
28             {
29                 var _b = B[b] + B[b];
30                 var color = _r + _g + _b;    
31                 colors += ' <a href="javascript:cp_pick(\'' + color + '\');" style="color:#' + color + ';background-color:#' + color + ';" display:block; width:40px;">&nbsp;&nbsp;</a> ';
32             }
33         }
34     }
35     p += colors;
36     p += '</div>';
37     
38     var container = document.createElement('div');
39     container.id = 'container';
40     container.innerHTML = p;
41     document.body.appendChild(container);
42     cp_loaded = true;
43 }
44 
45 function showcolorpad(event, obj)
46 {
47     if(!cp_loaded){ cp_load(); }//加载
48     
49     if(!postioned)
50     {
51         var postion = cp_postion(event, obj);//定位
52         cp_$('colorpad').style.top     = (postion.y + 20) + 'px';
53         cp_$('colorpad').style.left = (postion.x - 250) + 'px';
54         postioned = true;
55     }    
56     
57     cp_$('colorpad').style.display = '';//显示
58     
59     target_obj = obj;//记录需要改变的表单
60 }
61 
62 function hidecolorpad()
63 {
64     if(!cp_loaded){return false;}//加载
65     
66     cp_$('colorpad').style.display = 'none';//隐藏
67 }
68 
69 function cp_pick(color)
70 {
71     target_obj.value = '#' + color;
72     hidecolorpad();
73 }
74 
75 function cp_postion(event, obj)
76 {
77     var p = new Object();
78     p.x = event.clientX;
79     p.y = event.clientY;
80 
81     return p;
82 }
83 
84 function cp_$(id)
85 {
86     return document.getElementById(id);
87 }

调用方法:
1 <input type="text" onclick="showcolorpad(event, this);">


下载地址:
http://www.phpweblog.net/Files/young40/colorpad.js




posted on 2008-04-12 21:22 young40 阅读(2836) 评论(7)  编辑 收藏 引用 网摘

评论

# re: [发布]js调色板(colorpad) 2008-04-13 17:13 jarry
做得不错,为什么颜色排之间有这么多空隙的?  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-04-14 05:00 young40
@jarry
感谢支持哈。

关于空隙的问题
我是出于色块被设置的是2个空格的宽度,怕临近的色块太近的话不容易区分,所以在色块之间加了个空隙

可以看代码的31行
' <a href="ja
以及31行结尾处
</a> ';
删除链接前后的空格即可。  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-04-14 22:00 小葱
哈哈,谢谢你的教导啦~~
昨天看到你得文章后就马上注册了phpwebblog
以后要多多交流哦!  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-04-14 22:19 young40
@小葱
呵呵,多交流,呵呵。。  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-04-23 09:29 zhang,jianhui
我就显示不了呢。。。。。。下载的js 文件,然后写的
<html>
<head>
<script type="text/javascript" src="colorpad.js"/>
</head>
<body>
<input type="text" onclick="showcolorpad(event, this);">
</body>
</html>
咋会显示不了。。。郁闷,最近人品闹了很多问题。。  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-05-05 19:13 红叶
我把

' <a href="ja
以及31行结尾处
</a> ';

空格去掉后,弹出显示的调色板就是一个长形条了。这是什么原因呢?
  回复  更多评论
  

# re: [发布]js调色板(colorpad) 2008-05-15 20:38 网上买书
可以直接下载喽  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: