`
wlcxx98
  • 浏览: 62873 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery的颜色选择插件

阅读更多

忙了一夜,终于把jquery的颜色选择插件写完了,不多说了,看看代码吧。

  1. (function($){
  2. $.fn.extend({
  3. selectColor:function(){
  4. var_d=newDate();
  5. var_tem=_d.getTime();
  6. returnthis.each(function(){
  7. varshowColor=function(_obj){
  8. var_left=parseInt($(_obj).offset().left);
  9. var_top=parseInt($(_obj).offset().top);
  10. var_width=parseInt($(_obj).width());
  11. var_height=parseInt($(_obj).height());
  12. var_maxindex=function(){
  13. var___index=0;
  14. $.each($("*"),function(i,n){
  15. var__tem=$(n).css("z-index");
  16. if(__tem>0)
  17. {
  18. if(__tem>___index)
  19. {
  20. ___index=__tem+1;
  21. }
  22. }
  23. });
  24. return___index;
  25. }();
  26. varcolorH=newArray('00','33','66','99','CC','FF');
  27. varScolorH=newArray('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
  28. var_str=newArray();
  29. for(varn=0;n<6;n++)
  30. {
  31. _str.push('<trheight="11">');
  32. _str.push('<tdstyle="width:11px;background-color:#'+colorH[n]+colorH[n]+colorH[n]+'"></td>');
  33. for(vari=0;i<3;i++)
  34. {
  35. for(varj=0;j<6;j++)
  36. {
  37. _str.push('<tdstyle="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
  38. }
  39. }
  40. _str.push('</tr>');
  41. }
  42. for(varn=0;n<6;n++)
  43. {
  44. _str.push('<trheight="11">');
  45. _str.push('<tdstyle="width:11px;background-color:#'+ScolorH[n]+'"></td>')
  46. for(vari=3;i<6;i++)
  47. {
  48. for(varj=0;j<6;j++)
  49. {
  50. _str.push('<tdstyle="width:11px;background-color:#'+colorH[i]+colorH[j]+colorH[n]+'"></td>');
  51. }
  52. }
  53. _str.push('</tr>');
  54. }
  55. varcolorStr='<divid="colorShowDiv_'+_tem+'"style="width:229px;position:absolute;z-index:'+_maxindex+';left:'+(_left+_width)+'px;top:'+(_top+_height)+'px;"><tablestyle="width:100%;height:30px;background-color:#CCCCCC;"><tr><tdstyle="width:40%;"><divid="colorShow_'+_tem+'"style="width:80px;height:18px;border:solid1px#000000;background-color:#FFFFFF;"></div></td><tdstyle="width:60%;"><inputid="color_txt_'+_tem+'"type="text"style="width:100px;height:16px;"value="#FFFFFF"/></td></tr></table><tableid="colorShowTable_'+_tem+'"cellpadding="0"cellspacing="1"style="background-color:#000000;">'+_str.join('')+'</table></div>'
  56. $("body").append(colorStr);
  57. var_currColor;
  58. var_currColor2;
  59. $("#colorShowTable_"+_tem+"td").mouseover(function(){
  60. var_color=$(this).css("background-color");
  61. if(_color.indexOf("rgb")>=0)
  62. {
  63. var_tmeColor=_color;
  64. _tmeColor=_color.replace("rgb","");
  65. _tmeColor=_tmeColor.replace("(","");
  66. _tmeColor=_tmeColor.replace(")","");
  67. _tmeColor=_tmeColor.replace(newRegExp("","gm"),"");
  68. var_arr=_tmeColor.split(",");
  69. var_tmeColorStr="#";
  70. for(varii=0;ii<_arr.length;ii++)
  71. {
  72. var_temstr=parseInt(_arr[ii]).toString(16);
  73. _temstr=_temstr.length<2?"0"+_temstr:_temstr;
  74. _tmeColorStr+=_temstr;
  75. }
  76. }
  77. $("#color_txt_"+_tem).val(_tmeColorStr);
  78. $("#colorShow_"+_tem).css("background-color",_color);
  79. _currColor=_color;
  80. _currColor2=_tmeColorStr;
  81. $(this).css("background-color","#FFFFFF");
  82. });
  83. $("#colorShowTable_"+_tem+"td").mouseout(function(){
  84. $(this).css("background-color",_currColor);
  85. });
  86. $("#colorShowTable_"+_tem+"td").click(function(){
  87. $(_obj).val(_currColor2);
  88. });
  89. }
  90. $(this).click(function(){
  91. showColor(this);
  92. });
  93. var_sobj=this;
  94. $(document).click(function(e){
  95. e=e?e:window.event;
  96. vartag=e.srcElement||e.target;
  97. if(_sobj.id==tag.id)return;
  98. var_temObj=tag;
  99. while(_temObj)
  100. {
  101. if(_temObj.id=="colorShowDiv_"+_tem)return;
  102. _temObj=_temObj.parentNode;
  103. }
  104. $("#colorShowDiv_"+_tem).remove();
  105. });
  106. });
  107. }
  108. });
  109. })(jQuery);

使用方法:

  1. $(document).ready(function(){
  2. $("#要绑定的ID").selectColor();
  3. });

注意:要绑定的对像一定要是文本输入框

分享到:
评论

相关推荐

    jquery颜色选择插件

    jQuery颜色选择插件是通过JavaScript和CSS来实现的,它通常包含以下几个核心部分: 1. 用户界面:这是用户与颜色选择器进行交互的部分,通常设计为一个调色板,允许用户点击或滑动选择所需颜色。 2. 事件处理:通过...

    jquery 颜色选择控件

    《jQuery颜色选择控件详解与应用》 在Web开发中,色彩选择功能是不可或缺的一部分,尤其是在需要用户自定义颜色的应用场景下。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来增强网页的功能,其中就...

    jquery 颜色选择插件

    **jQuery颜色选择插件**是一种常用的前端开发工具,它为网页中的输入元素提供了方便的颜色选择功能,用户可以通过视觉化的调色板选取颜色,提升用户体验。本文将深入探讨jQuery颜色选择插件及其相关知识点。 首先,...

    ps样式的jQuery颜色选择插件

    【jQuery颜色选择插件】是一种基于JavaScript库jQuery的交互式颜色选择工具,它的设计灵感来源于Adobe Photoshop中的颜色选择器。这种插件的主要目的是为网页设计师和开发者提供一个用户友好、功能丰富的颜色选取...

    一款jQuery颜色选择插件

    今天我们将深入探讨一个名为"bigcolorpicker"的jQuery颜色选择插件。jQuery,作为一种轻量级的JavaScript库,极大地简化了DOM操作、事件处理以及动画效果,而bigcolorpicker插件则为jQuery增添了一个强大的颜色选择...

    jquery颜色选择器插件多功能取颜色工具代码

    本资源"jquery颜色选择器插件多功能取颜色工具代码"显然是一个基于jQuery开发的颜色选择器插件,用于帮助用户在网页上方便地选取颜色,以实现更丰富的界面交互体验。 颜色选择器是网页设计中常见的一种功能,常用于...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jquery颜色选择插件Spectrum.zip

    **jQuery Spectrum 颜色选择插件** jQuery Spectrum 是一个功能强大的颜色选择插件,它为Web应用程序提供了灵活且用户友好的颜色选择器。这款插件设计简洁,易于集成,适用于各种网页项目,无论是简单的颜色输入...

    Jquery颜色选择器

    总的来说,jQuery颜色选择器插件是网页开发中的实用工具,它们简化了颜色选择功能的实现,让开发者能够专注于网页的其他方面,而无需从零开始编写复杂的颜色选择逻辑。通过理解这些插件的工作原理和如何在项目中使用...

    jquery 时间选择控件

    - **自定义样式**:为了使控件与网站设计风格一致,开发者可能需要编写CSS样式来调整时间选择器的外观,如颜色、大小、边框等。 - **响应式设计**:确保控件在不同设备和屏幕尺寸上都能正确显示和操作,是现代Web...

    jquery 颜色选择器插件

    《jQuery颜色选择器插件——colpick-jQuery-Color-Picker深度解析》 在网页设计与开发中,用户界面的交互性和美观性是至关重要的。其中,颜色选择器作为一个常用的组件,能让用户方便地选取所需的颜色,提升用户...

    jquery颜色选择器源码

    而“jQuery颜色选择器源码”则是基于jQuery开发的一个插件,用于帮助用户在网页中方便地选取颜色。这个源码提供了一个图形化的界面,使得用户可以通过视觉方式来挑选颜色,常应用于网页设计、表单输入或者UI组件中。...

    jquery颜色选择器插件选取颜色值代码

    本篇文章将详细讲解如何利用jQuery颜色选择器插件来选取颜色值,并通过代码实例深入理解其工作原理。 一、jQuery颜色选择器插件介绍 颜色选择器插件是jQuery生态系统中的一个组件,它为用户提供了图形化的颜色选择...

    一个jquery的颜色选择插件

    **jQuery颜色选择插件详解** 在网页开发中,颜色选择功能常常被用于各种设计相关的应用,如CSS编辑器、调色板等。jQuery作为一个强大的JavaScript库,提供了许多方便的插件来扩展其功能,其中就包括颜色选择插件。...

    jquery 插件 颜色选择器

    总的来说,jQuery颜色选择器插件是提高用户体验、简化颜色输入的有效工具,它们通过丰富的功能和良好的兼容性,使得在网页中处理颜色变得更加便捷。对于开发者来说,理解并熟练运用这些插件可以提升项目的质量和效率...

    jQuery颜色选择器

    jQuery颜色选择器是一种在网页开发中常用的前端工具,它极大地简化了用户在网页上选取颜色的过程。这个插件,称为colpick,是基于jQuery库构建的,为网页设计师和开发者提供了一个直观、易于集成的颜色选择界面。...

    简单实用的jQuery颜色选择器插件

    **jQuery颜色选择器插件——ClassyColor** 在网页开发中,为用户提供便捷的颜色选择功能是常见的需求,jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来满足这种需求。ClassyColor就是这样一个专为jQuery...

    jQuery颜色选择器插件jColor.js.zip

    jQuery颜色选择器插件jColor.js是一款专门为网页开发者设计的工具,它允许用户在网页上实现交互式颜色选择功能。这个插件基于流行的JavaScript库jQuery,使得颜色选择过程变得更加直观和用户友好。在网页设计中,...

    jquery 颜色选择器,使用简单

    jQuery颜色选择器是一个方便的工具,它允许用户在网页上以图形化的方式选取颜色。这些选择器通常以调色板的形式呈现,用户可以通过点击或滑动来挑选所需颜色。这种交互性提高了用户的参与度,使得颜色选择过程更加...

Global site tag (gtag.js) - Google Analytics