color_picker.js
上传用户:jisenq
上传日期:2014-06-29
资源大小:7216k
文件大小:7k
源码类别:

数据库编程

开发平台:

ASP/ASPX

  1. /*** Color Picker Object ***/
  2. var arrColorPickerObjects=[];
  3. function ColorPicker(sName,sParent)
  4. {
  5. this.oParent=sParent;
  6. if(sParent)
  7. {
  8. this.oName=sParent+"."+sName;
  9. this.oRenderName=sName+sParent;
  10. }
  11. else
  12. {
  13. this.oName=sName;
  14. this.oRenderName=sName;
  15. }
  16. arrColorPickerObjects.push(this.oName);
  17. this.url="color_picker.htm";
  18. this.onShow=function(){return true;};
  19. this.onHide=function(){return true;};
  20. this.onPickColor=function(){return true;};
  21. this.onRemoveColor=function(){return true;};
  22. this.onMoreColor=function(){return true;};
  23. this.show=showColorPicker;
  24. this.hide=hideColorPicker;
  25. this.hideAll=hideColorPickerAll;
  26. this.color;
  27. this.customColors=[];
  28. this.refreshCustomColor=refreshCustomColor;
  29. this.isActive=false;
  30. this.txtCustomColors="Custom Colors";
  31. this.txtMoreColors="More Colors...";
  32. this.align="left";
  33. this.currColor="#ffffff";//default current color
  34. this.RENDER=drawColorPicker;
  35. }
  36. function drawColorPicker()
  37. {
  38. var arrColors=[["#800000","#8b4513","#006400","#2f4f4f","#000080","#4b0082","#800080","#000000"],
  39. ["#ff0000","#daa520","#6b8e23","#708090","#0000cd","#483d8b","#c71585","#696969"],
  40. ["#ff4500","#ffa500","#808000","#4682b4","#1e90ff","#9400d3","#ff1493","#a9a9a9"],
  41. ["#ff6347","#ffd700","#32cd32","#87ceeb","#00bfff","#9370db","#ff69b4","#dcdcdc"],
  42. ["#ffdab9","#ffffe0","#98fb98","#e0ffff","#87cefa","#e6e6fa","#dda0dd","#ffffff"]]
  43. 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>"
  44. sHTMLColor+="<table align=center cellpadding=0 cellspacing=0 border=0 unselectable=on>";
  45. for(var i=0;i<arrColors.length;i++)
  46. {
  47. sHTMLColor+="<tr>";
  48. for(var j=0;j<arrColors[i].length;j++)
  49. 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>"+
  50. "<table style='margin:0;width:13px;height:13px;background:"+arrColors[i][j]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  51. "<tr><td unselectable=on></td></tr>"+
  52. "</table></td>";
  53. sHTMLColor+="</tr>";
  54. }
  55. //~~~ custom colors ~~~~
  56. sHTMLColor+="<tr><td colspan=8 id=idCustomColor"+this.oRenderName+"></td></tr>";
  57. //~~~ remove color & more colors ~~~~
  58. sHTMLColor+= "<tr>";
  59. sHTMLColor+= "<td unselectable=on>"+
  60. "<table style='margin-left:1px;width:14px;height:14px;background:#f3f3f3;' cellpadding=0 cellspacing=0 unselectable=on>"+
  61. "<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>"+
  62. "</table></td>";
  63. sHTMLColor+= "<td colspan=7 unselectable=on>"+
  64. "<table style='margin:1px;width:117px;height:16px;background:#f3f3f3;border:#f3f3f3 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  65. "<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>"+
  66. "</table></td>";
  67. sHTMLColor+= "</tr>";
  68. sHTMLColor+= "</table>";
  69. sHTMLColor+="</td></tr></table>";
  70. document.write(sHTMLColor);
  71. }
  72. function refreshCustomColor()
  73. {
  74. if(dialogArguments.oUtil)//[CUSTOM]
  75. this.customColors=dialogArguments.oUtil.obj.customColors;//[CUSTOM] (Get from public definition)
  76. else //text2.htm [CUSTOM]
  77. this.customColors=dialogArguments[0].oUtil.obj.customColors;//[CUSTOM] (Get from public definition)
  78. if(this.customColors.length==0)
  79. {
  80. eval("idCustomColor"+this.oRenderName).innerHTML="";
  81. return;
  82. }
  83. 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>"
  84. sHTML+="<table cellpadding=0 cellspacing=0><tr>";
  85. for(var i=0;i<this.customColors.length;i++)
  86. {
  87. if(i<22)
  88. {
  89. if(i==8||i==16||i==24||i==32)sHTML+="</tr></table><table cellpadding=0 cellspacing=0><tr>"
  90. 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>"+
  91. " <table  style='margin:0;width:13;height:13;background:"+this.customColors[i]+";border:white 1px solid' cellpadding=0 cellspacing=0 unselectable=on>"+
  92. " <tr><td unselectable=on></td></tr>"+
  93. " </table>"+
  94. "</td>";
  95. }
  96. }
  97. sHTML+="</tr></table>";
  98. eval("idCustomColor"+this.oRenderName).innerHTML=sHTML;
  99. }
  100. function showColorPicker(oEl)
  101. {
  102. this.onShow();
  103. this.hideAll();
  104. var box=eval("dropColor"+this.oRenderName);
  105. box.style.display="block";
  106. var nTop=0;
  107. var nLeft=0;
  108. oElTmp=oEl;
  109. while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  110. {
  111. if(oElTmp.style.top!="")
  112. nTop+=oElTmp.style.top.substring(1,oElTmp.style.top.length-2)*1;
  113. else nTop+=oElTmp.offsetTop;
  114. oElTmp = oElTmp.offsetParent;
  115. }
  116. oElTmp=oEl;
  117. while(oElTmp.tagName!="BODY" && oElTmp.tagName!="HTML")
  118. {
  119. if(oElTmp.style.left!="")
  120. nLeft+=oElTmp.style.left.substring(1,oElTmp.style.left.length-2)*1;
  121. else nLeft+=oElTmp.offsetLeft;
  122. oElTmp=oElTmp.offsetParent;
  123. }
  124. if(this.align=="left")
  125. box.style.left=nLeft;
  126. else//right
  127. box.style.left=nLeft-143+oEl.offsetWidth;
  128. //box.style.top=nTop+1;//[CUSTOM]
  129. box.style.top=nTop+1+oEl.offsetHeight;//[CUSTOM]
  130. this.isActive=true;
  131. this.refreshCustomColor();
  132. }
  133. function hideColorPicker()
  134. {
  135. this.onHide();
  136. var box=eval("dropColor"+this.oRenderName);
  137. box.style.display="none";
  138. this.isActive=false;
  139. }
  140. function hideColorPickerAll()
  141. {
  142. for(var i=0;i<arrColorPickerObjects.length;i++)
  143. {
  144. var box=eval("dropColor"+eval(arrColorPickerObjects[i]).oRenderName);
  145. box.style.display="none";
  146. eval(arrColorPickerObjects[i]).isActive=false;
  147. }
  148. }