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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 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 观察者模式的实现代码
2013/05/10 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python实现局域网内实时通信代码
2019/12/22 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
大学生暑期实践感言
2014/02/26 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers