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("传入一个默认的颜色");

js 颜色选择插件的更多相关文章

  1. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  2. 【JS】一款好用的JS日历选择插件【bootstrap-datetimepicker.js】

    1.插件名称:bootstrap-datetimepicker.js,下载地址:上Github下载或者下面链接 2.效果图: 3.使用方法:里面有Demo 链接: https://pan.baidu. ...

  3. JS分类选择插件

    需要做一个选择分类工具,大致要求如下: 点击按钮,显示一级分类,指向某个一级分类显示对应二级分类,分类有几层不定. 只能选择最后一个分类,然后把分类的ID 传值给按钮的value 我的思路: 1.后台 ...

  4. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 纯原生js移动端日期选择插件

    最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...

  7. 11个JavaScript颜色选择器插件

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

  8. js颜色拾取器

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

  9. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

随机推荐

  1. vue项目结构搭建

    1安装node.js,已集成npm 2.临时使用淘宝镜像 npm --registry https://registry.npm.taobao.org install express 3.instal ...

  2. python第一周语言基础

    控制语句 if语句,当条件成立时运行语句块.经常与else, elif(相当于else if) 配合使用. for语句,遍历列表.字符串.字典.集合等迭代器,依次处理迭代器中的每个元素. while语 ...

  3. Web用户登录---验证码的设计与实现

    在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 验证码生成步骤:1.获得随机生成的颜色,画出随机线条生成背景底.2.String cod ...

  4. Python学习—数据库篇之索引

    一.索引简介 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可,对于索引,会保存在额外的文件中.在mys ...

  5. VS2017 连接Linux

    喜欢测试各种工具. 注意选择 使用C++的Linux开发 ! 配置ssh连接 工具->选项 添加ssh连接. 添加头文件 我的路径是:C:\Program Files (x86)\Microso ...

  6. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  7. 机器学习入门:Linear Regression与Normal Equation -2017年8月23日22:11:50

    本文会讲到: (1)另一种线性回归方法:Normal Equation: (2)Gradient Descent与Normal Equation的优缺点:   前面我们通过Gradient Desce ...

  8. C#使用反射获取对象变化的情况

    记录日志时, 经常需要描述对象的状态发生了怎样的变化, 以前处理的非常简单粗暴: a. 重写class的ToString()方法, 将重要的属性都输出来 b. 记录日志时:  谁谁谁  由  变更前实 ...

  9. 在linux上添加硬盘

    首先呢我们需要添加一个硬盘,如下所示: 接着我们需要新建一个硬盘 代码如下: mkdir /bak fdisk -l 接着我们继续第二步,分区 代码如下: fdisk /dev/sdb n   add ...

  10. Unique Letter String LT828

    A character is unique in string S if it occurs exactly once in it. For example, in string S = " ...