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:history.go()和History.back()的区别及应用
Nov 25 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
JavaScript中的Function函数
Aug 27 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP图片上传代码
2013/11/04 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
javascript json 新手入门文档
2009/12/03 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python3最长回文子串算法示例
2019/03/04 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python获取栅格点和面值的实现
2020/03/10 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
如何利用python 读取配置文件
2021/01/06 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
项目考察欢迎辞
2014/01/17 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
运动会入场词
2015/07/18 职场文书
医院消毒隔离制度
2015/08/05 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript