强大 颜色选择器插件 jQuery MiniColors

  • 源码大小:143.47KB
  • 所需积分:1积分
  • 源码编号:19JP-3800
  • 浏览次数:1268次
  • 最后更新:2023年07月24日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

MiniColors是一款功能强大、优雅、生动且可完全自定义的基于jQuery的颜色选择器,适用于您的现代网页/web应用程序。

主要特点:

  • 在模糊和单击时显示颜色选择器。
  • 也支持内联模式。
  • 同时支持十六进制和rgb(a)颜色格式。
  • 可配置的打开/关闭动画。
  • 自定义位置。
  • 自定义控件类型。
  • 使用您自己的CSS轻松设置样式。
  • API方法和事件处理程序。

使用NPM安装:

  1. $ npm install @claviska/jquery-minicolors --save

如何使用它:

1.将jQuery JavaScript库和jQuery MiniColors插件的文件添加到网页中。

  1. <!-- jQuery -->
  2. <script src="//code.jquery.com/jquery.min.js"></script>
  3. <!-- MiniColors -->
  4. <script src="jquery.minicolors.js"></script>
  5. <link rel="stylesheet" href="jquery.minicolors.css">

2.将颜色选择器(使用默认设置)附加到输入字段。您可以使用本机价值属性以指定初始颜色。

  1. <input type="text" id="demo" class="demo" value="#ff6161">
  1. $('.demo').minicolors();

3.自定义颜色选择器的所有可能选项。

  1. $('.demo').minicolors({
  2.  
  3. // animation speed
  4. animationSpeed: 50,
  5.  
  6. // easing function
  7. animationEasing: 'swing',
  8.  
  9. // defers the change event from firing while the user makes a selection
  10. changeDelay: 0,
  11.  
  12. // hue, brightness, saturation, or wheel
  13. control: 'hue',
  14.  
  15. // default color
  16. defaultValue: '',
  17.  
  18. // hex or rgb
  19. format: 'hex',
  20.  
  21. // show/hide speed
  22. showSpeed: 100,
  23. hideSpeed: 100,
  24.  
  25. // is inline mode?
  26. inline: false,
  27.  
  28. // a comma-separated list of keywords that the control should accept (e.g. inherit, transparent, initial).
  29. keywords: '',
  30.  
  31. // uppercase or lowercase
  32. letterCase: 'lowercase',
  33.  
  34. // enables opacity slider
  35. opacity: false,
  36.  
  37. // custom position
  38. position: 'bottom left',
  39. // additional theme class
  40. theme: 'default',
  41.  
  42. // an array of colors that will show up under the main color grid
  43. swatches: []
  44. });

4.事件处理程序

  1. $('.demo').minicolors({
  2.  
  3. // Fires when the value of the color picker changes
  4. change: null,
  5.  
  6. // Fires when the color picker is hidden.
  7. hide: null,
  8.  
  9. // Fires when the color picker is shown.
  10. show: null
  11.  
  12. });

6.您也可以通过将选项传递给颜色选择器数据选项属性:

  1. <input type="text"
  2. id="inline"
  3. class="demo"
  4. data-inline="true"
  5. value="#4fc8db"
  6. >

更新日志:

v2.3.6 (2021-11-25)

  • 修复了对样例名称使用不受信任的代码时可能出现的XSS漏洞

2021-02-06

  • 固定透明手表
  • 改进边框颜色

v2.3.5版本(2020-06-05)

  • 修复了不正确的代码缩进
  • 修复jQuery 4弃用警告

v2.3.4版本(2018-12-20)

  • 修复了jQuery Slim未显示的面板

v2.3.2版本(2018-12-13)

  • 允许样例中的alpha值为0
  • 修复了一个颜色描述错误

v2.3.1版本(2018-06-08)

  • 使现代化

预览截图