内容

• 下载
• 演示版
• API
  • 实例化
  • 设定值
  • 方法
  • 大事记
• 执照

下载

该项目在GitHub上。随时发布错误报告，功能请求和代码 官方项目页面上的改进。

在GitHub上下载

演示版

这是主要的演示页面，它使用 引导程序3 , 但是该插件也可以在没有Bootstrap的情况下使用。

查看无引导的演示

控制类型

输入方式

职位

…and more!

API

实例化

像任何其他jQuery插件一样实例化：

$('INPUT.minicolors').minicolors(settings);

设定值

默认设置如下：

$.minicolors = {
    defaults: {
         animationSpeed : 50,
         animationEasing : 'swing',
         更改 : null,
          更改 Delay : 0,
         控制 : 'hue',
         dataUris : true,
         默认值 : '',
         隐藏 : null,
         隐藏 Speed: 100,
         排队 : false,
         letterCase : 'lowercase',
         不透明 : false,
         位置 : 'bottom left',
         节目 : null,
         节目 Speed : 100,
         主题 : 'default'
    }
};

为了方便起见，您可以通过分配新值来全局更改默认设置：

$.minicolors.defaults.changeDelay = 200;

To 更改 multiple properties at once, use $.extend():

$.minicolors.defaults = $.extend($.minicolors.defaults, {
      更改 Delay : 200,
     letterCase : 'uppercase',
     主题 : 'bootstrap'
});

注意： 更改默认设置将 不 影响控制 已经初始化。

animationSpeed

用户点击或单击新颜色时滑块的动画速度。设置 0 没有动画。

animationEasing

给滑块设置动画时的轻松使用。

更改 Delay

The time, in milliseconds, to defer the 更改 event from firing while the user makes a selection. This is useful for preventing the 更改 event 用户拖动颜色选择器时频繁触发。

The default 值 is 0 (no delay). If your 更改 callback 可能会占用大量资源（例如AJAX请求） to set this to at least 200.

控制

Determines the type of 控制 . Valid options are hue, brightness, saturation, and wheel.

dataUris

Set this to false if you require IE7/IE8 support. This setting will 强制插件加载外部图片，而不使用dataURIs。

默认值

要强制使用默认颜色，请将其设置为有效的十六进制字符串。当用户清除 控件，它将恢复为该颜色。

隐藏 Speed & 节目 Speed

隐藏和显示颜色选择器的速度。

排队

Set to true to force the color picker to appear 排队 .

letterCase

确定十六进制代码值的字母大小写。有效选项是 uppercase or lowercase.

不透明

Set to true to enable the 不透明 slider. (Use the 输入 element's data-opacity 属性以设置预设值。）

位置

Sets the 位置 of the dropdown. Valid options are bottom left, 右下 , 左上方 , and 右上 .

The swatchPosition setting has been removed in version 2.1. The 位置 of the swatch is now determined by 位置 .

主题

一个字符串，其中包含要应用的自定义主题的名称。在您的CSS中，前缀 您的选择器是这样的：

.minicolors-theme-yourThemeName { ... }

如果使用默认主题，则可能需要调整色板 样式，具体取决于您现有的样式表规则。 2.1版删除了很多 styling on the 输入 element as possible, which means it’s up to 您可以调整CSS以确保色板正确对齐。

要调整色板，请覆盖以下样式：

.minicolors-theme-default .minicolors-swatch {
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
    left: auto;
    right: 5px;
}

$(selector).minicolors('method', [data]);