今天看了篇博客,觉得有用就记录下来 

web项目中不少地方需要用到颜色选择器,比如设置某个元素的背景色、边框色等等,按照我们交互设计的期望-设色器最好简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值。以前我一直用的那个(eyecon.ro)功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能:

简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值

于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下:

1,默认提供的色值为“常用的浏览器安全的色值”。相当于整合了下面最后一个prototype版本的颜色拾取器。关于浏览器安全色值,可参考维基文档http://en.wikipedia.org/wiki/Web_colors

2,用户可以自定义常用色值。相当于整合了下面图片中的第7个颜色选择器。

3,用户可根据需要设置是否显示颜色输入框、确认按钮

4,inline模式和popup模式。

5,轻量级、符合xhtml、css2标准。大小只5KB。样式与行为分离。

一,jquery.icolor插件示例

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

官方地址:http://plugins.jquery.com/project/icolor

示例在这里,http://vivasky.com/labs/icolor/index.html

JS在这里,http://vivasky.com/labs/icolor/js/jquery.icolor.min.js 

二,网上流行的颜色拾取器JS组件

1,原生JS

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

2,JQuery插件

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

    Color picker by eyecon.ro

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

3,Mootools插件

Moo Rainbow

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

4,Prototype插件

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

JQuery插件发布-拾色器jquery.icolor.js
    





            
http://www.cnblogs.com/mamboer/archive/2010/09/17/jquery_icolor.html

 

 转自:

相关文章:

  • 2021-12-20
  • 2022-12-23
  • 2021-04-03
  • 2022-01-05
  • 2021-09-07
  • 2022-12-23
  • 2022-12-23
  • 2022-01-08
猜你喜欢
  • 2022-02-17
  • 2022-12-23
  • 2021-05-18
  • 2021-08-01
  • 2022-01-29
  • 2022-12-23
  • 2021-05-27
相关资源
相似解决方案