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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
JS如何在数组指定位置插入元素
Mar 10 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
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php session和cookie使用说明
2010/04/07 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js 判断 enter 事件
2009/02/12 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
美国眼镜网站:LensCrafters
2020/01/19 全球购物
Ajax的工作原理
2015/12/04 面试题
销售辞职报告范文
2014/01/12 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
建筑工地大门标语
2014/06/18 职场文书
生死抉择观后感
2015/06/09 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
使用javascript解析二维码的三种方式
2021/11/11 Javascript
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis