Javascript 调色板

2019/7/21 22:54:35 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/keke/archive/2010/12/23/1914843.html

  :今儿做项目时遇到标题可选颜色的功能,便在网上查找了下调色板的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

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->