js 颜色选择插件


Posted in Javascript onJanuary 23, 2017

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
提交表单时执行func方法实现代码
Mar 17 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
JavaScript常用正则函数用法示例
Jan 23 #Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 #Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 #Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 #Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 #Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 #Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
多重?l件?合查?(二)
2006/10/09 PHP
php实现删除空目录的方法
2015/03/16 PHP
php 实现进制相互转换
2016/04/07 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Angular4.0动画操作实例详解
2019/05/10 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
TensorFlow数据输入的方法示例
2018/06/19 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
《一个小村庄的故事》教学反思
2014/04/13 职场文书
英语故事演讲稿
2014/04/29 职场文书
学校安全管理责任书
2014/07/23 职场文书
终止劳动合同协议书
2014/10/05 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
python编写五子棋游戏
2021/05/25 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android