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中before()方法用法实例
Dec 25 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JavaScript实现队列结构过程
Dec 06 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
PHP PDO操作总结
2014/11/17 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Vue中使用Sortable的示例代码
2018/04/07 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
高一历史教学反思
2014/01/13 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
设置IIS Express并发数
2022/07/07 Servers