Javascript 调色板
：今儿做项目时遇到标题可选颜色的功能，便在网上查找了下调色板的js，一看一大段的颜色算法JS，看的我头晕目眩的！最终决定自己写一个简单点的调色板。
我的实现方式很简单，不带任何颜色算法，步骤如下：
1.在网上找一个"网页颜色代码"的站点,然后把大部分的颜色值抽取出来封装到一个文件中。
2.然后通过Ajax异步获取后再创建的调色板的面板UI。
3.最后写相关的颜色选取操作就搞定了
我写的这个Demo依赖的Jquery框架写的(主要是节省我的时间(*^__^*) 嘻嘻)
实例图：
封装了一个叫做paletteTools的调色板工具类
兼容IE6+,FX,GG,OP,Safari等浏览器
/*
* 调色板
* Author:MR.CO
* Date:2010-12-23
* QQ:[email protected]
*/
function
paletteTools(eid
/*
需要触发调色板元素ID
*/
){
var
eobj
=
$(
'
#
'
+
eid);
var
paletteID
=
'
divPalette_
'
+
eid;
if
(eobj[
0
]
==
null
||
eobj[
0
]
==
undefined)
return
;
if
(eobj[
0
].nodeName.toLowerCase()
!=
'
input
'
) {
alert(
'
Error Message:Only support input elements...(jq.palette.js)
'
);
return
;
}
if
(
!
(
'
value
'
in
eobj[
0
]))
return
;
this
.Eobj
=
eobj;
this
.PaletteID
=
paletteID;
var
colorBox
=
new
Array();
/*
异步获取颜色值
*/
$.ajax({url:
'
Palette/color.htm
'
,type:
'
get
'
,cache:
false
,async:
false
,
error:
function
(){ alert(
'
Error Message:File not found color.htm...(jq.palette.js)
'
); },
success:
function
(data){
var
colors
=
data.split(
'
'
);
colorBox.push(
'
<div id="
'
+
paletteID
+
'
" style="position:absolute;display:none;background:#fff; width:240px; _width:242px; height:180px; border:1px solid #ccc; "><ul style=" padding:0px; margin:0px; float:left; list-style: none; ">
'
);
for
(
var
i
=
0
; i
<
colors.length; i
++
){
if
(colors[i].replace(
/
[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]
/
g,
''
)
!=
''
)
colorBox.push(
'
<li style="display:block; width:10px; height:10px; background-color:
'
+
colors[i]
+
'
;float:left; margin:1px; cursor:pointer;" colorVal="
'
+
colors[i]
+
'
"></li>
'
);
}
colorBox.push(
'
</ul></div>
'
);
}
});
/*
将颜色面板追加到当前文本域后面
*/
eobj.after(colorBox.join(
''
));
}
paletteTools.prototype.show
=
function
(args
/*
可设置调色板上左位置传值方式为{top:'1px',left:'1px'}
*/
){
var
top,left;
if
(args
!=
undefined){
top
=
args.top
||
0
;
left
=
args.left
||
0
;
$(
'
#
'
+
this
.PaletteID).css({top:top,left:left});
}
var
obj
=
this
.Eobj,pid
=
this
.PaletteID;
if
(obj
==
undefined
||
obj
==
null
)
return
;
/*
设置选中的颜色值
*/
var
setObjColor
=
function
(selectedColor){
obj.css({background:selectedColor});
obj.val(selectedColor);
}
/*
显示文本域的焦点、显示/隐藏
*/
obj.focus(
function
(){
$(
'
#
'
+
pid).css({display:
'
block
'
});
}).blur(
function
(){
$(
'
#
'
+
pid).css({display:
'
none
'
});
});
/*
颜色面板鼠标滑动效果
*/
$(
'
#
'
+
pid
+
'
li
'
).mouseover(
function
(){
setObjColor($(
this
).attr(
'
colorVal
'
));
})
/*
最终选取颜色点击
*/
.click(
function
(){
setObjColor($(
this
).attr(
'
colorVal
'
));
$(
'
#
'
+
pid).css({display:
'
none
'
});
});
}
<!
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
id
="ctl00_Head1"
>
<
title
>
调色板Demo
</
title
>
<
script
type
="text/javascript"
language
="javascript"
src
='Palette/jquery-1.3.2.min.js'
></
script
>
<
script
type
="text/javascript"
language
="javascript"
src
='Palette/jq.palette.js'
></
script
>
<
script
type
="text/javascript"
language
="javascript"
>
$(
function
(){
new
paletteTools(
'
txtTest
'
).show();
new
paletteTools(
'
txtTest2
'
).show({top:
'
155px
'
,left:
'
7px
'
});
});
</
script
>
</
head
>
<
body
>
<
input
type
="text"
id
='txtTest'
/>
<
br
/><
br
/><
br
/><
br
/><
br
/><
br
/>
<
input
type
="text"
id
='txtTest2'
/>
</
body
>
</
html
>
完整DEMO http://files.cnblogs.com/keke/Palette.rar