js 颜色选择插件
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 颜色选择插件的更多相关文章
- 4个好用的JS联动选择插件
jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...
- 【JS】一款好用的JS日历选择插件【bootstrap-datetimepicker.js】
1.插件名称:bootstrap-datetimepicker.js,下载地址:上Github下载或者下面链接 2.效果图: 3.使用方法:里面有Demo 链接: https://pan.baidu. ...
- JS分类选择插件
需要做一个选择分类工具,大致要求如下: 点击按钮,显示一级分类,指向某个一级分类显示对应二级分类,分类有几层不定. 只能选择最后一个分类,然后把分类的ID 传值给按钮的value 我的思路: 1.后台 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- 11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- js颜色拾取器
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
随机推荐
- neo4j配置(转)
我的neo4j配置 # 修改第9行,去掉#,修改数据库名 dbms.active_database=wkq_graph.db # 修改第12行,去掉#.修改路径,改成绝对路径 dbms.directo ...
- Taro开发小程序移动地图固定中间获取地址
效果图如下: 绿色地标固定在中间,移动地图的时候获取对应信息. 先定义map. <Map className="location" id={location} latitud ...
- JavaScript heap out of memory解决方法
在 npm 打包的时候,node环境控制台报错了,JavaScript heap out of memory 解决方法如下: 不管你是angular还是其他的,找到 \node_modules\.bi ...
- Vue-Router导航守卫:
有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单 ...
- Ubuntu---grep
摘要:我们已经学过正则表达式了,所以现在开始学习 grep 也是水到渠成的事情. 简介:grep 是 Linux 中最常用的“文本处理工具”之一,grep 与 sed.awk 合称为 Linux 中的 ...
- 2018-2019-2 20175218 实验一《Java开发环境的熟悉》实验报告
实验内容.步骤与体会: 1.实验过程的理解,实验指导书中知识点的理解. (1)知道了JVM.JRE.JDK之间的区别. JVM就是我们熟知的Java虚拟机:JRE是Java运行环境:而JDK则是Jav ...
- centos7下Etcd3集群搭建
一.环境介绍 etcd主要功能是分布式的存储键值,优点不多说了,分布是集群,自动选举等等,自行百度,主要说下配置方法,折腾了几天,终于优点眉目了,记录下操作方法,本文参考了如下链接 https://w ...
- 通信导论-IP数据网络基础(4)
IP地址的编址方法--IP地址+掩码地址=网络地址 分类的IP地址 每一类地址都由两个固定长度的字段组成,其中一个字段是网络号 net-id,标志主机或路由器所连接到的网络,另一个字段则是主机号 ho ...
- [leetcode]149. Max Points on a Line多点共线
Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...
- tiny4412 --Uboot移植(4) 串口
开发环境:win10 64位 + VMware12 + Ubuntu14.04 32位 工具链:linaro提供的gcc-linaro-6.1.1-2016.08-x86_64_arm-linux-g ...