几年前,很难找到一个合适的颜色选择器。正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总。在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复杂,其他比较简单,相信应该会有适合你的。

1. ExColor

ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器。它可以附加到任意的input输入框,通过简单地调用一行函数即可。

2. JScolor


JSColor是一个简单、易于使用的JavaScript库,可以将任何给定input框转化为颜色选择器。该选择器是隐藏层,没有使用任何弹出窗口,可以出现在input框的任意一端。

3. Advanced Javascript ColorPicker

ColorPicker是个高度可定制的高级JavaScript颜色拾取器,并不依赖于任何JS框架。它可以6种不同的颜色模式来显示整个调色板(~16.78 mil. 颜色)。

4. Farbtastic

Farbtastic是一个jQuery的颜色拾取插件,可以非常轻松地将颜色选择器添加到Web页面中。颜色选择器将链接到Web页面上的一个已有元素(如,一个文本框),当选择一个颜色时即更新元素值。

5. Javascript Color Picker

该JavaScript颜色拾取器拥有HSB和RGB两种模式,使用颜色原型,兼容所有的主流浏览器。

6. mooRainbox

mooRainbox是一个易于集成的JavaScript颜色拾取器,基于mootools框架创建。该拾取器可以连接到任意DOM中的元素,这里会生成一个单击事件。通过简单地点击,你就可以显示或隐藏mooRainbow。

7. ColorPicker

一个简单的组件,可以与Adobe Photoshop一样选择颜色。

8. jPicker


jPicker是一个快速、轻量级的jQuery插件,让你的Web项目中可以包含一个高级颜色拾取器。它来自于Joh Dyer的选择器,使用Prototype框架进行了改良。

9. SimpleColor

jQuerySimpleColor是个非常简单的颜色拾取器插件,通过一个个的正方形来挑选颜色。

10. Really Simple Color Picker

带有预设调色板的一个颜色拾取器,简单直接。

11. Flexi

Flexi是一个轻量级的颜色拾取器(只有4.3KB),它只用JavaScript编写而没有使用任何的图像(由于SVG/VML)或CSS。Flexi是一个独立的脚本,不需要任何JavaScript框架,并且可以设置选中颜色为十六进制、HSV或RGB格式。

其它地址:http://www.open-lib.com/Type/170-1.jsp

转载自:http://blog.jobbole.com/9476/

程序员的基础教程:菜鸟程序员

js颜色拾取器的更多相关文章

  1. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  3. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  4. js颜色调试器

    1 /* ColorTestViewer 颜色调试器 2 3 attribute: 4 onchange: Function; //颜色改变回调; 默认null 5 6 //以下属性不建议直接修改 7 ...

  5. 推荐一款jQuery ColorPicked 颜色拾取器插件

    先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^. 官网地址:http://www.eyecon.ro/colorpicker/#about 代码SVN 地址:https:/ ...

  6. jq仿ps颜色拾取功能-js颜色拾取

    1.效果展示 2.html代码:index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. bigcolorpicker 颜色拾取器插件——例

    参考:http://bigui4.sinaapp.com/picker/colorpicker.html 效果: html: <!DOCTYPE html> <html> &l ...

  8. iOS UI-UIPickerView(拾取器)、UIWebView(网页视图)和传值方式

    // // ViewController.m // IOS_0107_finalToolClass // // Created by ma c on 16/1/7. // Copyright (c) ...

  9. 颜色采集器colpick Color Picker

    简单 RGB.HSB.十六进制颜色选取器 jQuery 插件. 非常直观类似 Photoshop 的界面. 光明和黑暗很容易自定义 CSS3 外观. 28 KB 总由浏览器加载看起来不错甚至在 IE7 ...

随机推荐

  1. bzoj 4987 Tree

    Written with StackEdit. Description 从前有棵树. 找出\(K\)个点\(A_1,A_2,-,A_K\). 使得\(∑dis(A_i,A_{i+1}),(1<= ...

  2. [Luogu3538][POI2012]OKR-A Horrible Poem

    luogu 题意 给出一个由小写英文字母组成的字符串\(S\),再给出\(q\)个询问,要求回答\(S\)某个子串的最短循环节. 如果字符串\(B\)是字符串\(A\)的循环节,那么\(A\)可以由\ ...

  3. 关于 avalon总线理解(整理)

    1,一个基于Avalon接口的系统会包含很多功能模块,这些功能模块就是Avalon存储器映射外设,通常简称Avalon外设.所谓存储器映射外设是指外设和存储器使用相同的总线来寻址,并且CPU使用访问存 ...

  4. sqlalchemy在pythonweb中开发的使用(基于tornado的基础上)

    一.关于SQLAlchemy的安装pip install SQLAlchemy安装如果上面的方式安装不成功的情况可以使用下面的方法 百度下载window或者linux下面对应的sqlalchemy的版 ...

  5. RK3288 dts文件中背光配置参数

    backlight { // 设备名(用于匹配) compatible = "pwm-backlight"; // pwm编号 通道 频率(ns) pwms = <& ...

  6. 题目1534:数组中第K小的数字 ——二分

    http://ac.jobdu.com/problem.php?pid=1534 给定两个整型数组A和B.我们将A和B中的元素两两相加可以得到数组C.譬如A为[1,2],B为[3,4].那么由A和B中 ...

  7. C#将字符串数组转换为以逗号分隔的字符串

    , tyt, gff }; string str=string.Join(",",array);

  8. 1126 Eulerian Path

    题意:若图是连通图,且所有结点的度均为偶数,则称为Eulerian:若有且仅有两个结点的度为奇数,则称为semi-Eulerian.现给出一个图,要我们判断其是否为Eulerian,semi-Eule ...

  9. 关于 NULL的坑

    有如下的表: select * from testtable where name in ('name'):  结果是第一条: select * from testtable where name n ...

  10. SQL语句替换字段内容例子

    SELECT REPLACE(SysFuncID,'7201','7204') ,           CASE           WHEN Flag=1 THEN REPLACE(funcname ...