color_picker.js
上传用户:jhtang88
上传日期:2014-01-27
资源大小:28528k
文件大小:9k
源码类别:

Jsp/Servlet

开发平台:

Java

  1. /*** Color Picker Object ***/ var arrColorPickerObjects=[]; function ColorPicker(sName,sParent)     {     this.oParent=sParent;     if(sParent)         {         this.oName=sParent+"."+sName;         this.oRenderName=sName+sParent;         }     else         {         this.oName=sName;         this.oRenderName=sName;         }     arrColorPickerObjects.push(this.oName);     this.url="color_picker.htm";     this.onShow=function(){return true;};     this.onHide=function(){return true;};     this.onPickColor=function(){return true;};     this.onRemoveColor=function(){return true;};     this.onMoreColor=function(){return true;};       this.show=showColorPicker;     this.hide=hideColorPicker;     this.hideAll=hideColorPickerAll;     this.color;     this.customColors=[];     this.refreshCustomColor=refreshCustomColor;     this.isActive=false;     this.txtCustomColors="Custom Colors";     this.txtMoreColors="More Colors...";     this.align="left";     this.currColor="#ffffff";//default current color     this.RENDER=drawColorPicker;     }     
  2. function drawColorPicker()     {        var arrColors=[["#800000","#8b4513","#006400","#2f4f4f","#000080","#4b0082","#800080","#000000"],
  3.                 ["#ff0000","#daa520","#6b8e23","#708090","#0000cd","#483d8b","#c71585","#696969"],
  4.                 ["#ff4500","#ffa500","#808000","#4682b4","#1e90ff","#9400d3","#ff1493","#a9a9a9"],
  5.                 ["#ff6347","#ffd700","#32cd32","#87ceeb","#00bfff","#9370db","#ff69b4","#dcdcdc"],
  6.                 ["#ffdab9","#ffffe0","#98fb98","#e0ffff","#87cefa","#e6e6fa","#dda0dd","#ffffff"]]
  7.     var sHTMLColor="<table id=dropColor"+this.oRenderName+" style="z-index:1;display:none;position:absolute;border:#716F64 1px solid;cursor:default;background-color:#f3f3f3;padding:2px" unselectable=on cellpadding=0 cellspacing=0 width=145px><tr><td unselectable=on>"
  8.     sHTMLColor+="<table align=center cellpadding=0 cellspacing=0 border=0 unselectable=on>";
  9.     for(var i=0;i<arrColors.length;i++)
  10.         {
  11.         sHTMLColor+="<tr>";
  12.         for(var j=0;j<arrColors[i].length;j++)
  13.             sHTMLColor+="<td onclick=""+this.oName+".color='"+arrColors[i][j]+"';"+this.oName+".onPickColor();"+this.oName+".currColor='"+arrColors[i][j]+"';"+this.oName+".hideAll()" onmouseover="this.style.border='#777777 1px solid'" onmouseout="this.style.border='#efefef 1px solid'" style="cursor:default;padding:1px;border:#efefef 1px solid;" unselectable=on>"+
  14.                 "<table style='margin:0px;width:13px;height:13px;background:"+arrColors[i][j]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  15.                 "<tr><td unselectable=on></td></tr>"+
  16.                 "</table></td>";
  17.         sHTMLColor+="</tr>";        
  18.         }
  19.     
  20.     //~~~ custom colors ~~~~
  21.     sHTMLColor+="<tr><td colspan=8 id=idCustomColor"+this.oRenderName+"></td></tr>";
  22.     
  23.     //~~~ remove color & more colors ~~~~
  24.     sHTMLColor+= "<tr>";
  25.     sHTMLColor+= "<td unselectable=on>"+
  26.         "<table style='margin-left:1px;width:14px;height:14px;background:#f3f3f3;' cellpadding=0 cellspacing=0 unselectable=on>"+
  27.         "<tr><td onclick=""+this.oName+".onRemoveColor();"+this.oName+".currColor='';"+this.oName+".hideAll()" onmouseover="this.style.border='#777777 1px solid'" onmouseout="this.style.border='white 1px solid'" style="cursor:default;padding:1px;border:white 1px solid;font-family:verdana;font-size:10px;font-color:black;line-height:9px;" align=center valign=top unselectable=on>x</td></tr>"+
  28.         "</table></td>";
  29.     sHTMLColor+= "<td colspan=7 unselectable=on>"+
  30.         "<table style='margin:1px;width:117px;height:16px;background:#f3f3f3;border:#f3f3f3 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  31.         "<tr><td id='"+this.oName+"moreColTd' onclick=""+this.oName+".onMoreColor();"+this.oName+".hideAll();modalDialogShow('"+this.url+"?" +this.oName+ "', 442, 380)" onmouseover="this.style.border='#777777 1px solid';this.style.background='#8d9aa7';this.style.color='#ffffff'" onmouseout="this.style.border='#efefef 1px solid';this.style.background='#f3f3f3';this.style.color='#000000'" style="cursor:default;padding:1px;border:#efefef 1px solid" style="font-family:verdana;font-size:9px;font-color:black;line-height:9px;padding:1" align=center valign=top nowrap unselectable=on>"+this.txtMoreColors+"</td></tr>"+
  32.         "</table></td>";
  33.     sHTMLColor+= "</tr>";
  34.     
  35.     sHTMLColor+= "</table>";            
  36.     sHTMLColor+="</td></tr></table>";     document.write(sHTMLColor);     }     
  37. function refreshCustomColor()     {     var arg = eval(dialogArgument[0]);
  38.     var arg2 = eval(dialogArgument[1]);
  39.     if(arg.oUtil)//[CUSTOM]         this.customColors=arg.oUtil.obj.customColors;//[CUSTOM] (Get from public definition)     else //text2.htm [CUSTOM]         this.customColors=arg2.oUtil.obj.customColors;//[CUSTOM] (Get from public definition)     if(this.customColors.length==0)         {         document.getElementById("idCustomColor"+this.oRenderName).innerHTML="";         return;         }     sHTML="<table cellpadding=0 cellspacing=0 width=100%><tr><td colspan=8 style="font-family:verdana;font-size:9px;font-color:black;line-height:9px;padding:1">"+this.txtCustomColors+":</td></tr></table>"
  40.     sHTML+="<table cellpadding=0 cellspacing=0><tr>";   
  41.     for(var i=0;i<this.customColors.length;i++)
  42.         {
  43.         if(i<22)
  44.             {
  45.             if(i==8||i==16||i==24||i==32)sHTML+="</tr></table><table cellpadding=0 cellspacing=0><tr>"  
  46.             sHTML+="<td onclick=""+this.oName+".color='"+this.customColors[i]+"';"+this.oName+".onPickColor()" onmouseover="this.style.border='#777777 1px solid'" onmouseout="this.style.border='#efefef 1px solid'" style="cursor:default;padding:1px;border:#efefef 1px solid;" unselectable=on>"+
  47.                 "   <table  style='margin:0;width:13;height:13;background:"+this.customColors[i]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  48.                 "   <tr><td unselectable=on></td></tr>"+
  49.                 "   </table>"+
  50.                 "</td>";
  51.             }           
  52.         }
  53.     sHTML+="</tr></table>";     document.getElementById("idCustomColor"+this.oRenderName).innerHTML=sHTML;     } function showColorPicker(oEl)     {     this.onShow();          this.hideAll();     var box=document.getElementById("dropColor"+this.oRenderName);
  54.     //remove hilite
  55.     var allTds = box.getElementsByTagName("TD");
  56.     for (var i = 0; i<allTds.length; i++) {
  57.         allTds[i].style.border="#efefef 1px solid";
  58.         if (allTds[i].id==this.oName+"moreColTd") {
  59.             allTds[i].style.border="#efefef 1px solid";
  60.             allTds[i].style.background="#f3f3f3";
  61.             allTds[i].style.color="#000000";
  62.         }
  63.     }
  64.     box.style.display="block";     var nTop=0;     var nLeft=0;     oElTmp=oEl;     while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  65.         {
  66.         if(oElTmp.style.top!="")
  67.             nTop+=oElTmp.style.top.substring(1,oElTmp.style.top.length-2)*1;
  68.         else nTop+=oElTmp.offsetTop;
  69.         oElTmp = oElTmp.offsetParent;
  70.         }
  71.     oElTmp=oEl;
  72.     while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  73.         {
  74.         if(oElTmp.style.left!="")
  75.             nLeft+=oElTmp.style.left.substring(1,oElTmp.style.left.length-2)*1;
  76.         else nLeft+=oElTmp.offsetLeft;
  77.         oElTmp=oElTmp.offsetParent;
  78.         }
  79.     
  80.     if(this.align=="left")
  81.         box.style.left=nLeft;
  82.     else//right
  83.         box.style.left=nLeft-143+oEl.offsetWidth;
  84.         
  85.     //box.style.top=nTop+1;//[CUSTOM]     box.style.top=nTop+1+oEl.offsetHeight;//[CUSTOM]     this.isActive=true;          this.refreshCustomColor();     } function hideColorPicker()     {     this.onHide();     var box=document.getElementById("dropColor"+this.oRenderName);     box.style.display="none";     this.isActive=false;     } function hideColorPickerAll()     {     for(var i=0;i<arrColorPickerObjects.length;i++)         {         var box=document.getElementById("dropColor"+eval(arrColorPickerObjects[i]).oRenderName);         box.style.display="none";         eval(arrColorPickerObjects[i]).isActive=false;         }     }
  86.     
  87. function convertHexToDec(hex)
  88.     {
  89.     return parseInt(hex,16);
  90.     }
  91.     
  92. function convertDecToHex(dec)
  93.     {
  94.     var tmp = parseInt(dec).toString(16);
  95.     if(tmp.length == 1) tmp = ("0" +tmp);
  96.     return tmp;//.toUpperCase();
  97.     }
  98.     
  99. function convertDecToHex2(dec)
  100.     {
  101.     var tmp = parseInt(dec).toString(16);
  102.     if(tmp.length == 1) tmp = ("00000" +tmp);
  103.     if(tmp.length == 2) tmp = ("0000" +tmp);
  104.     if(tmp.length == 3) tmp = ("000" +tmp);
  105.     if(tmp.length == 4) tmp = ("00" +tmp);
  106.     if(tmp.length == 5) tmp = ("0" +tmp);
  107.     tmp = tmp.substr(4,1) + tmp.substr(5,1) + tmp.substr(2,1) + tmp.substr(3,1) + tmp.substr(0,1) + tmp.substr(1,1)
  108.     return tmp;//.toUpperCase();
  109.     }
  110.     
  111. //input color in format rgb(R,G,B)
  112. //ex, return by document.queryCommandValue(forcolor)
  113. function extractRGBColor(col) {
  114.     var re = /rgb((d{1,3}),s*(d{1,3}),s*(d{1,3}))/i;
  115.     if (re.test(col)) {
  116.         var result = re.exec(col);
  117.         return convertDecToHex(parseInt(result[1])) + 
  118.                convertDecToHex(parseInt(result[2])) + 
  119.                convertDecToHex(parseInt(result[3]));
  120.     }
  121.     return convertDecToHex2(0);
  122. }    
  123.