colorpicker.js
上传用户:wenllgg125
上传日期:2020-04-09
资源大小:7277k
文件大小:8k
源码类别:

SCSI/ASPI

开发平台:

Others

  1. 
  2. var tb_ClientID = ''; //颜色文件框ID
  3. var img_ClientID = ''; //显示选取器的图标ID
  4. var color = "" ;
  5. var SelRGB = color;
  6. var DrRGB = '';
  7. var SelGRAY = '120';
  8. var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
  9. //转成16进制数
  10. function ToHex(n) {
  11. var h, l;
  12. n = Math.round(n);
  13. l = n % 16;
  14. h = Math.floor((n / 16)) % 16;
  15. return (hexch[h] + hexch[l]);
  16. }
  17. //进行标准颜色值转换            
  18. function DoColor(c, l){
  19. var r=1, g=2, b=3;
  20.      
  21.   r = '0x' + c.substring(1, 3);
  22. g = '0x' + c.substring(3, 5);
  23. b = '0x' + c.substring(5, 7);
  24. if(l > 120)
  25. {
  26. l = l - 120;
  27. r = (r * (120 - l) + 255 * l) / 120;
  28. g = (g * (120 - l) + 255 * l) / 120;
  29. b = (b * (120 - l) + 255 * l) / 120;
  30. }
  31. else
  32. {
  33. r = (r * l) / 120;
  34. g = (g * l) / 120;
  35. b = (b * l) / 120;
  36. }
  37.     var aaa='#' + ToHex(r) + ToHex(g) + ToHex(b);
  38.     if(aaa=='#NaNNaNNaN')
  39.     {
  40. return '#FFFFFF';
  41.     }
  42.     else
  43.     {
  44.         return '#' + ToHex(r) + ToHex(g) + ToHex(b);
  45.     }
  46. }
  47. //显示当前颜色区域(td)
  48. function wc(r, g, b, n, tb_ClientID)
  49. {         
  50.     r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
  51.     g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
  52.     b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
  53.     document.write('<td bgcolor=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' title="#' + ToHex(r) + ToHex(g) + ToHex(b) + '" height=8 width=8 onmouseover="ColorTableMouseOver(this)" onmousedown="ColorTableMouseDown(this)"  onmouseout="ColorTableMouseOut(this)" ></td>');
  54. }
  55. //显示颜色和灰度面板
  56. function WriteColorPanel(tb_ClientID,img_ClientID,leftvalue,topvalue)
  57. {
  58.     
  59.     document.write('<td >');
  60.     document.write('<table border="0" cellPadding="0" cellSpacing="0" id="ColorTable_'+tb_ClientID+'" style="cursor:crosshair;" >');
  61.     var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
  62.     for(i = 0; i < 16; i ++)
  63.     {
  64.         document.write('<TR>');
  65.         for(j = 0; j < 30; j ++)
  66.         {
  67.             n1 = j % 5;
  68.             n2 = Math.floor(j / 5) * 3;
  69.            n3 = n2 + 3;
  70.             wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
  71.             (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
  72.             (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i,tb_ClientID);
  73.         }
  74.         document.write('</tr>');
  75.     }
  76.     document.write('</table></td>');
  77.     
  78.     
  79.     document.write('<td>');
  80.     document.write('<table border="0" cellPadding="0" cellSpacing="0" id="GrayTable'+tb_ClientID+'" style="CURSOR: hand;cursor:crosshair;" >');
  81.     for(i = 255; i >= 0; i -= 8.5)
  82.        document.write('<tr bgcolor=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><td title=' + Math.floor(i * 16 / 17) + ' height=4 width=20 onmouseover="GrayTableMouseOver(this)" onmousedown="GrayTableMouseDown(this)"  onmouseout="GrayTableMouseOut(this)" ></td></tr>');
  83.            
  84.     // alert(tb_ClientID);      
  85.     document.write("<tbody></tbody></table></td>");
  86. }
  87. //鼠标在颜色面板上MouseDown事件处理程序
  88. function ColorTableMouseDown(e)
  89. {
  90. SelRGB = e.title;
  91. EndColor();
  92. }
  93. //鼠标在颜色面板上MouseOver事件处理程序
  94. function ColorTableMouseOver(e)
  95. {
  96.   $('RGB'+tb_ClientID).innerHTML = e.title;
  97. EndColor();
  98. }
  99. //鼠标在颜色面板上MouseOut事件处理程序
  100. function ColorTableMouseOut(e)
  101. {
  102.    $('RGB'+tb_ClientID).innerHTML = SelRGB;
  103. EndColor();
  104. }
  105. //鼠标在灰度面板上MouseDown事件处理程序
  106. function GrayTableMouseDown(e)
  107. {
  108. SelGRAY = e.title;
  109. EndColor();
  110. }
  111. //鼠标在灰度面板上MouseOver事件处理程序
  112. function GrayTableMouseOver(e)
  113. {
  114. $('GRAY'+tb_ClientID).innerHTML = e.title;
  115. EndColor();
  116. }
  117. //鼠标在灰度面板上MouseOut事件处理程序
  118. function GrayTableMouseOut(e)
  119. {
  120.     //alert(tb_ClientID);
  121. $('GRAY'+tb_ClientID).innerHTML = SelGRAY;
  122. EndColor();
  123. }
  124. //隐藏颜色和灰度面板
  125. function HideColorPanel(tb_clientid)
  126. {   
  127.     $('ShowColor'+tb_ClientID).bgColor = $('SelColor'+tb_ClientID).value;
  128.     $('ColorPicker'+tb_clientid).style.display='none';
  129. }
  130. //当鼠标在颜色或灰度面板上操作时,将所选值设置到相应控件或区域
  131. function EndColor()
  132. {
  133.     var i;
  134.     if(DrRGB != SelRGB)
  135.     {
  136.        DrRGB = SelRGB;
  137.        for(i = 0; i <= 30; i ++)
  138.        {
  139.             $('GrayTable'+tb_ClientID).rows[i].bgColor = DoColor(SelRGB, 240 - i * 8);
  140.        }
  141.     }
  142.     $('SelColor'+tb_ClientID).value = DoColor($('RGB'+tb_ClientID).innerHTML, $('GRAY'+tb_ClientID).innerHTML);
  143.     $('ShowColor'+tb_ClientID).bgColor = $('SelColor'+tb_ClientID).value;
  144.     $(tb_ClientID).value = $('SelColor'+tb_ClientID).value;
  145. }
  146. //当点击"确定"按钮时
  147. function ColorPickerOK(tb_clientid ,img_clientid)
  148. {
  149.      var selectcolor=$('SelColor'+tb_clientid).value;
  150.      $(img_ClientID).style.background=selectcolor;
  151.      obj=$(tb_clientid);
  152.      obj.value=selectcolor;
  153.      obj.focus();
  154.      obj.select();
  155.      //if(navigator.appName.indexOf('Explorer') > -1)
  156.      //{
  157.      //    obj.createTextRange().execCommand('Copy');
  158.      //    window.status = '将模板内容复制到剪贴板';
  159.      //    setTimeout("window.status=''", 1800);
  160.      //}
  161.      HideColorPanel(tb_clientid);
  162. }
  163. //在参数值指定的位置显示"颜色"面板,供面板自身设置时(onmouseover)调用
  164. function ShowColorPanel(tb_clientid,img_clientid, leftvalue,topvalue)
  165. {
  166.      tb_ClientID = tb_clientid;
  167.      img_ClientID = img_clientid;
  168.      var p = getposition($(tb_ClientID));
  169.      $('ColorPicker'+tb_ClientID).style.display = 'block';
  170.     
  171.         if(navigator.appName.indexOf('Explorer') > -1)
  172.         {
  173.   $('ColorPicker'+tb_ClientID).style.left = p['x'] + leftvalue +  'px';
  174. }
  175. else
  176. {
  177.     $('ColorPicker'+tb_ClientID).style.left = p['x'] + 'px';
  178. }
  179.         
  180.         if(navigator.appName.indexOf('Explorer') > -1)
  181.         {
  182.             $('ColorPicker'+tb_ClientID).style.top = p['y'] + $(tb_ClientID).offsetHeight + topvalue + 'px';
  183.         }
  184.         else
  185.         {
  186. $('ColorPicker'+tb_ClientID).style.top = p['y'] + $(tb_ClientID).offsetHeight + 'px';
  187.         }    
  188. }
  189. //在参数值指定的位置显示"颜色"面板(供控件调用)
  190. function IsShowColorPanel(tb_clientid,img_clientid, leftvalue,topvalue)
  191. {
  192.      tb_ClientID = tb_clientid;
  193.      img_ClientID = img_clientid;
  194.      if($('ColorPicker'+tb_ClientID).style.display == 'none')
  195.      {
  196.         var p = getposition($(tb_ClientID));
  197.         $('ColorPicker'+tb_ClientID).style.display = 'block';
  198.         
  199.         if(navigator.appName.indexOf('Explorer') > -1)
  200.         {
  201.   $('ColorPicker'+tb_ClientID).style.left = p['x'] + leftvalue +  'px';
  202. }
  203. else
  204. {
  205.     $('ColorPicker'+tb_ClientID).style.left = p['x'] + 'px'; 
  206. }
  207.         
  208.         if(navigator.appName.indexOf('Explorer') > -1)
  209.         {
  210.             $('ColorPicker'+tb_ClientID).style.top = p['y'] + $(tb_ClientID).offsetHeight + topvalue + 'px';
  211.         }
  212.         else
  213.         {
  214. $('ColorPicker'+tb_ClientID).style.top = p['y'] + $(tb_ClientID).offsetHeight + 'px';
  215.         }    
  216.      }
  217.      else
  218.      {
  219.         $('ColorPicker'+tb_ClientID).style.display = 'none';
  220.      }
  221. }
  222. //获得指定元素的位置
  223. function getposition(obj)
  224. {
  225.     // alert(topvalue);
  226.      var r = new Array();
  227.      r['x'] = obj.offsetLeft;
  228.      r['y'] = obj.offsetTop;
  229.      while(obj = obj.offsetParent)
  230.      {
  231.   r['x'] += obj.offsetLeft;
  232. r['y'] += obj.offsetTop;
  233.      }
  234.      return r;
  235. }
  236. //摘自prototype.js
  237. function $()  {     var elements = new Array();        for (var i = 0; i < arguments.length; i++)      {         var element = arguments[i];         try         {     if (typeof element == 'string')     {         element = document.getElementById(element) || document.all(element) || document.forms(0).all(element);     }         }         catch(ex)         {     element = null;         }         if (arguments.length == 1)          {             return element;         }                elements.push(element);     }        return elements; }
  238. //初始化选取器中图标的背景色
  239. function InitColorPicker(img_ClientID , selectColor)   
  240. {         
  241.     if (selectColor != null && selectColor != "")
  242.     {
  243.         $(img_ClientID).style.background=selectColor;
  244.     }
  245. }