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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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快递单号查询接口使用示例
2014/05/05 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python类定义的讲解
2013/11/01 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python素数筛选法浅析
2018/03/19 Python
python二进制文件的转译详解
2019/07/03 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
树莓派升级python的具体步骤
2020/07/05 Python
Python 如何在字符串中插入变量
2020/08/01 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
员工自我鉴定范文
2013/10/06 职场文书
酒店管理自荐信
2013/10/23 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
产假请假条
2014/04/10 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书