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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
js动态切换图片的方法
Jan 20 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
下载给定网页上图片的方法
2014/02/18 Python
python简单实现基数排序算法
2015/05/16 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
外国人聘用意向书
2014/04/01 职场文书
银行招聘自荐信
2015/03/06 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
运动会3000米加油稿
2015/07/21 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python