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 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
JavaScript判断对象和数组的两种方法
May 31 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/11/25 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
职业生涯规划书范文
2014/03/10 职场文书
大学生实训报告总结
2014/11/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
检讨书之工作不认真
2019/08/14 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python