前天做了个小项目，需要一个调色板，自己动手写了一个，现在发出来，希望大家批评指正。
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;"> </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