脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 颜色选择插件

js 颜色选择插件

 更新时间：2017年01月23日 14:35:51   作者：先修客  
本文主要介绍了js 颜色选择插件。具有很好的参考价值，下面跟着小编一起来看下吧

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("传入一个默认的颜色");

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 超详细的JS弹出窗口代码大全

    超详细的JS弹出窗口代码大全

    这篇文章主要为大家分享超详细的JS弹出窗口代码大全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS短路原理的应用示例 精简代码的途径

    JS短路原理的应用示例 精简代码的途径

    正如标题所言，js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。这就需要我们自己来权衡了，下面有个不错的示例
    2013-12-12
  • js实现顶部可折叠的菜单工具栏效果实例

    js实现顶部可折叠的菜单工具栏效果实例

    这篇文章主要介绍了js实现顶部可折叠的菜单工具栏效果,可实现鼠标滑过菜单工具栏出现折叠与展开效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • Web前端开发工具——bower依赖包管理工具

    Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，通过 Bower 来管理模块间的这种联系,本文给大家介绍bower依赖包管理工具，感兴趣的朋友一起学习
    2016-03-03
  • 枚举的实现求得1-1000所有出现1的数字并计算出现1的个数

    枚举的实现求得1-1000所有出现1的数字并计算出现1的个数

    求得1-1000所有出现1的数字，并计算出现1的个数，以下是采用枚举的实现方法，但是若从1-N就不管用了，因为N不一定会是多少
    2013-09-09
  • 遍历DOM对象内的元素属性示例代码

    遍历DOM对象内的元素属性示例代码

    如何遍历DOM对象内的元素属性，例如要获取一个id为btn的按钮的所有属性该怎么实现呢？下面有个不错的教程，大家可以参考下
    2014-02-02
  • 微信小程序 接入腾讯地图的两种写法

    微信小程序 接入腾讯地图的两种写法

    这篇文章主要介绍了微信小程序 接入腾讯地图的两种写法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • JavaScript 函数的执行过程

    JavaScript 函数的执行过程

    下面小编就为大家带来一篇JavaScript 函数的执行过程。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript中子对象访问父对象的方式详解

    JavaScript中子对象访问父对象的方式详解

    js中虽然没有传统面向对象的编程语言里子类访问父类的特殊语法，但是我们可以根据需要造一个，接下来本文给大家分享在JavaScript中子对象访问父对象的方式,需要的朋友可以参考下
    2016-09-09
  • js绘制购物车抛物线动画

    js绘制购物车抛物线动画

    这篇文章主要为大家详细介绍了js绘制购物车抛物线动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论