js 颜色选择器

 

/*
┌─ 深度学习(js)颜色选择器  ────────────────────┐
│  colorPicker
│  感谢你使用 深度学习(js)颜色选择器
│  本代码完全公开和免费，你可以任意复制、传播、修改和使用，
│  但不得公开发表代码 不得用做商业用途，不得向其他使用者收费。
│  使用时，请保留此段信息，谢谢配合
│                        作者：吕海鹏      2008-5-29
└──────────────────  www.DeepTeach.com  ───┘
【安装使用】
1、先将js文件拷贝到您网站的目录，不需要做任何修改 范例如：根目录下位置：/js/Deepteach_colorPicker.js
2、在需要调用html标签 id="colorPicker",范例如：<input  type="text"  id="colorPicker" />
3、在调用html标签的后边调用Deepteach_colorPicker.js，范例如：<script type="text/javascript" src="js/Deepteach_colorPicker.js"></script>
*/
//div层
document.write ("<div  id='colorPopup'  style=' position:absolute; z-index:100;  display:none; '></div>  ");
var oColorPopup=document.getElementById("colorPopup");
var oColorPicker=document.getElementById("colorPicker");
//在div层内显示颜色选择器函数(main)
function  showColorPicker()
{
    //判断选择器是否显示
    if(oColorPopup.style.display=="none")   {
        //获取鼠标的坐标值 for  IE、Firefox
        window.document.onclick=function(evt){
            //evt=evt || window.event;
            evt = evt ? evt : (window.event ? window.event : null);
            oColorPopup.style.left=evt.clientX+"px";
            oColorPopup.style.top=evt.clientY+"px";
            window.document.onclick=null;
        }
       oColorPopup.style.display="block";
    }
    else {
       oColorPopup.style.display="none";
    }
     initColor();
}
// 初始化颜色选择器函数
function initColor(){
    var baseColorHex=new Array('00','33','66','99','CC','FF');     //256色的颜色是用00,33,66,99,cc,ff组成
    var SpColorHex=new Array('000000','333333','666666','999999','cccccc','FFFFFF', 'FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF' );
    var colorRGB ="";
    var sColorPopup;
    sColorPopup="<table  width='260'  border='1'  cellPadding=1  cellSpacing=0   bordercolordark='#ffffff'  bordercolorlight='#000000'  bgcolor='#cccccc'  title='深度学习(js)颜色选择器' ><tr><td>";
    sColorPopup+="<input   id='colorDis'  style='width:50px;border:solid 1px #000000;background-color:#ffff00;margin-left:3px' disabled title='当前颜色' />";
    sColorPopup+=" <input id='colorHexDis'  style='width:70px;border:inset 1px;font-family:Arial;' type='text' value='#FFFF00' readonly title='当前颜色16进制值'/>";
    sColorPopup+="<input  type='button' style='border:outset 1px;font-family:Arial;font-size:12px;line-height:12px;width:15px;height:15px;margin-left:105px;margin-bottom:3px;cursor:pointer;' value='X' onclick='doClose()' title='关闭颜色选择器' />";
    sColorPopup+="</td></tr><tr><td>";
    sColorPopup+="<table  border='0' cellpadding='0' cellspacing='0' align='center' ><tr><td bgcolor='#000000' width='30'>";//1行2列
    //竖 start
    sColorPopup+="<table  border='0' cellpadding='0'  cellspacing='1' bgcolor='#000000' align='center' >";        //第1列
    for(i=0;i<12;i++)
    {
        sColorPopup+="<tr  height='12'>";
        colorRGB=SpColorHex[i];
        sColorPopup+="<td width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;' title='点击选择颜色"+colorRGB+"'></td>";
        sColorPopup+="</tr>";
    }
    sColorPopup+="</table>";
    //竖 end
    sColorPopup+="</td><td>";
    sColorPopup+="<table  border='0'    cellpadding='0'    cellspacing='1'    bgcolor=#000000 align='center' >";    //第2列
    for(n=0;n<2;n++){    //循环2块
        for(i=0;i<6;i++) {  //每块6行
            sColorPopup+="<tr    height=12>";
            for(j=0+3*n;j<3+3*n;j++)
            {
                for(k=0;k<6;k++)
                {
                    colorRGB=baseColorHex[j]+baseColorHex[k]+baseColorHex[i];
                    sColorPopup+="<td  width='12' onmouseover='currentColor(this.bgColor)' onclick='clickColor(this.bgColor)'  bgColor='"+colorRGB+"' style='cursor:pointer;'  title='点击选择颜色"+colorRGB+"'></td>";
                }
            }
            sColorPopup+="</tr>";
        }
    }
    sColorPopup+="</table>";
    sColorPopup+="</td></tr></table>";
    sColorPopup+="</td></tr></table>";
    oColorPopup.innerHTML=sColorPopup;
}
//当前颜色块函数
function   currentColor(colorStr)  {
    document.getElementById("colorDis").style.backgroundColor=colorStr;
    document.getElementById("colorHexDis").value=colorStr.toUpperCase();    //toUpperCase()方法将颜色值大写
}
//点击选择颜色函数
function clickColor(colorStr) {
    oColorPicker.style.backgroundColor=colorStr;
    oColorPicker.value=colorStr;
    oColorPopup.style.display="none";
}
//关闭颜色选择器函数
function doClose() {
      oColorPopup.style.display="none";
}
//oColorPicker对象 绑定事件处理函数
oColorPicker.onclick=showColorPicker;

 

2.颜色拾取器是免费的，只有6kb。他的核心是jQuery.他的使用方法是转换class为"iColorPicker?"的input field将其转换为颜色拾取器。

地址:

http://www.supersite.me/website-building/jquery-free-color-picker/

使用方法非常简单：
只要你导入了jQuery和iColorPicker?脚本。那么每一个class属性为"iColorPicker?"的输入框将变成漂亮的颜色选择器。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iColorPickerLink.js"></script>
<input type="text" value="#ffcc00" class="iColorPicker" name="mycolor" id="mycolor" />

重要: 每个输入框必须是唯一的ID。

原理：
在加载js库文件的时候，将自动搜索页面，如果存在 class="iColorPicker?"的输入框，则在body的底部添加两个隐藏的DIV。
分别是 iColorPicker?和iColorPickerBg?.在点击图片的onclick事件中触发iColorShow?方法。它会将iColorPicker?显示出来，而将
iColorPickerBg?遮盖住其他地区。