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

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; } function drawColorPicker() { var arrColors=[["#800000","#8b4513","#006400","#2f4f4f","#000080","#4b0082","#800080","#000000"],
  2. ["#ff0000","#daa520","#6b8e23","#708090","#0000cd","#483d8b","#c71585","#696969"],
  3. ["#ff4500","#ffa500","#808000","#4682b4","#1e90ff","#9400d3","#ff1493","#a9a9a9"],
  4. ["#ff6347","#ffd700","#32cd32","#87ceeb","#00bfff","#9370db","#ff69b4","#dcdcdc"],
  5. ["#ffdab9","#ffffe0","#98fb98","#e0ffff","#87cefa","#e6e6fa","#dda0dd","#ffffff"]]
  6. 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=143 height=109><tr><td unselectable=on>"
  7. sHTMLColor+="<table align=center cellpadding=0 cellspacing=0 border=0 unselectable=on>";
  8. for(var i=0;i<arrColors.length;i++)
  9. {
  10. sHTMLColor+="<tr>";
  11. for(var j=0;j<arrColors[i].length;j++)
  12. 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>"+
  13. "<table style='margin:0;width:13px;height:13px;background:"+arrColors[i][j]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  14. "<tr><td unselectable=on></td></tr>"+
  15. "</table></td>";
  16. sHTMLColor+="</tr>";
  17. }
  18. //~~~ custom colors ~~~~
  19. sHTMLColor+="<tr><td colspan=8 id=idCustomColor"+this.oRenderName+"></td></tr>";
  20. //~~~ remove color & more colors ~~~~
  21. sHTMLColor+= "<tr>";
  22. sHTMLColor+= "<td unselectable=on>"+
  23. "<table style='margin-left:1px;width:14px;height:14px;background:#f3f3f3;' cellpadding=0 cellspacing=0 unselectable=on>"+
  24. "<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>"+
  25. "</table></td>";
  26. sHTMLColor+= "<td colspan=7 unselectable=on>"+
  27. "<table style='margin:1px;width:117px;height:16px;background:#f3f3f3;border:#f3f3f3 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  28. "<tr><td onclick=""+this.oName+".onMoreColor();"+this.oName+".hideAll();window.showModelessDialog('"+this.url+"',[window,'"+this.oName+"'],'dialogWidth:432px;dialogHeight:427px;edge:Raised;center:1;help:0;resizable:1;')" 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:1px" align=center valign=top nowrap unselectable=on>"+this.txtMoreColors+"</td></tr>"+
  29. "</table></td>";
  30. sHTMLColor+= "</tr>";
  31. sHTMLColor+= "</table>";
  32. sHTMLColor+="</td></tr></table>"; document.write(sHTMLColor); } function refreshCustomColor() { if(dialogArguments.oUtil)//[CUSTOM] this.customColors=dialogArguments.oUtil.obj.customColors;//[CUSTOM] (Get from public definition) else //text2.htm [CUSTOM] this.customColors=dialogArguments[0].oUtil.obj.customColors;//[CUSTOM] (Get from public definition) if(this.customColors.length==0) { eval("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>"
  33. sHTML+="<table cellpadding=0 cellspacing=0><tr>";
  34. for(var i=0;i<this.customColors.length;i++)
  35. {
  36. if(i<22)
  37. {
  38. if(i==8||i==16||i==24||i==32)sHTML+="</tr></table><table cellpadding=0 cellspacing=0><tr>"
  39. 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>"+
  40. " <table  style='margin:0;width:13;height:13;background:"+this.customColors[i]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  41. " <tr><td unselectable=on></td></tr>"+
  42. " </table>"+
  43. "</td>";
  44. }
  45. }
  46. sHTML+="</tr></table>"; eval("idCustomColor"+this.oRenderName).innerHTML=sHTML; } function showColorPicker(oEl) { this.onShow(); this.hideAll(); var box=eval("dropColor"+this.oRenderName); box.style.display="block"; var nTop=0; var nLeft=0; oElTmp=oEl; while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  47. {
  48. if(oElTmp.style.top!="")
  49. nTop+=oElTmp.style.top.substring(1,oElTmp.style.top.length-2)*1;
  50. else nTop+=oElTmp.offsetTop;
  51. oElTmp = oElTmp.offsetParent;
  52. }
  53. oElTmp=oEl;
  54. while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  55. {
  56. if(oElTmp.style.left!="")
  57. nLeft+=oElTmp.style.left.substring(1,oElTmp.style.left.length-2)*1;
  58. else nLeft+=oElTmp.offsetLeft;
  59. oElTmp=oElTmp.offsetParent;
  60. }
  61. if(this.align=="left")
  62. box.style.left=nLeft;
  63. else//right
  64. box.style.left=nLeft-143+oEl.offsetWidth;
  65. //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=eval("dropColor"+this.oRenderName); box.style.display="none"; this.isActive=false; } function hideColorPickerAll() { for(var i=0;i<arrColorPickerObjects.length;i++) { var box=eval("dropColor"+eval(arrColorPickerObjects[i]).oRenderName); box.style.display="none"; eval(arrColorPickerObjects[i]).isActive=false; } }