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 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
javascript中的delete使用详解
Apr 11 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
微信小程序实现锚点跳转
Nov 23 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在服务器执行exec命令失败的解决方法
2012/03/03 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python中创建二维数组
2018/10/17 Python
python用post访问restful服务接口的方法
2018/12/07 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
银行实习自我鉴定
2013/10/12 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
经营目标管理责任书
2014/07/25 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2016新年晚会开场白
2015/12/03 职场文书
2016年感恩节寄语
2015/12/07 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python