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?遮蓋住其他地區。