Javascript 调色板

　　：今儿做项目时遇到标题可选颜色的功能，便在网上查找了下调色板的js，一看一大段的颜色算法JS，看的我头晕目眩的！最终决定自己写一个简单点的调色板。

我的实现方式很简单，不带任何颜色算法，步骤如下：

1.在网上找一个"网页颜色代码"的站点,然后把大部分的颜色值抽取出来封装到一个文件中。

2.然后通过Ajax异步获取后再创建的调色板的面板UI。

3.最后写相关的颜色选取操作就搞定了

我写的这个Demo依赖的Jquery框架写的(主要是节省我的时间(*^__^*) 嘻嘻)

实例图：

封装了一个叫做paletteTools的调色板工具类

兼容IE6+,FX,GG,OP,Safari等浏览器 

/*
* 调色板
* Author:MR.CO
* Date:2010-12-23
* QQ:co.mr.co@gmail.com
*/
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

 

转载于:https://www.cnblogs.com/keke/archive/2010/12/23/1914843.html