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 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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
玩转虚拟域名◎+ .
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python多维数组分位数的求取方式
2020/03/03 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
同事吵架检讨书
2014/02/05 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js