开发者社区> 渣渣先> 正文

js 颜色选择插件

简介: COLPICK是一款非常的轻小,无需图片就可以实现颜色选择器的jquery插件,只用 JS 和 CSS 就实现了全部功能,而且非常直观,类似Photoshop的界面,使用方便。颜色的明暗很容易自定义,整个整个都是用html5+ CSS3实现外观而,插件只有28 KB,浏览器加载速度可以说是非常快的,而在低于IE9的版本也可以使用,只需载入了支持html5的html5shiv.
+关注继续查看

COLPICK是一款非常的轻小,无需图片就可以实现颜色选择器的jquery插件,只用 JS 和 CSS 就实现了全部功能,而且非常直观,类似Photoshop的界面,使用方便。颜色的明暗很容易自定义,整个整个都是用html5+ CSS3实现外观而,插件只有28 KB,浏览器加载速度可以说是非常快的,而在低于IE9的版本也可以使用,只需载入了支持html5的html5shiv.js.

下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头:

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

html

<button id="picker">Show Color Picker</button>

js

 $('#colorSelector').colpick({
        flat: true,
        layout: 'full',
        submit: true,
        width: 500,
        colorScheme: 'dark',
        color: "#bbbbbb",
        onChange: function (hsb, hex, rgb, el, bySetColor) {

        }, onSubmit: function (hsb, hex, rgb, el) {
            //处理你的业务需求
        }

    }).keyup(function () {
        $(this).colpickSetColor(this.value);
    }).colpickSetColor("传入一个默认的颜色");

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件
20 0
javaScript 10 正则表达式(了解即可,后面都用插件)
javeScript中正则的常见用法与正则插件的分享
26 0
JS动态插入插件后,不能马上使用,必须刷新
JS动态插入插件后,不能马上使用,必须刷新
32 0
原生js写的一个下拉框功能插件
用原生js写的一个下拉框功能插件
35 0
【译】设计一个JavaScript插件系统
【译】设计一个JavaScript插件系统
44 0
如何优雅地编写一个高逼格的JS插件惊艳你的领导和同事?
从前端模块化发展历程详细讲解如何开始编写一个JS插件,纯干货。
51 0
js:cocomessage消息提示插件
js:cocomessage消息提示插件
39 0
js:webpack插件BannerPlugin添加版权信息
js:webpack插件BannerPlugin添加版权信息
46 0
js: webpack插件的使用
js: webpack插件的使用
41 0
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
58 0
+关注
渣渣先
学无止境,是技术行业的必要准则,学如逆水行舟不进则退&hellip;&hellip;
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载