jQuery的 MiniColors 2.1

现在有了Bootstrap 3支持!

一个项目 美丽的地方 , 最初是为 超现实CMS .

内容

下载

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

在GitHub上下载

演示版

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

查看无引导的演示

控制类型

输入方式




职位

Valid 位置 s include bottom left, 右下 , top left, and 右上 .

…and more!


不透明度 can be assigned by including the data-opacity attribute or by setting the 不透明 option to true.

该字段具有默认值,因此永远不会为空。

该字段将始终为大写。
使用Bootstrap输入组的示例。
颜色
带插件的输入组示例。

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]);
创造

初始化与您的选择器匹配的所有项目的控件。这是默认值 method, so data may be passed in as the only argument.

To set a preset color 值 , populate the attribute of the original 输入元素。

破坏

返回 输入 元素恢复为其原始未初始化状态。

不透明

获取或设置控件的不透明度级别。要将此方法用作设置器,请在 介于0到1之间的值。(您也可以通过检查输入来获得此值 element's data-opacity attribute.)

To set a preset 不透明 值 , populate the data-opacity attribute of the 原始输入元素。

rgbObject

返回一个对象,该对象包含与之对应的红色,绿色,蓝色和alpha属性 控件的当前值。例:

{ r: 0, g: 82, b: 148, a: 0.75 }
rgbString & rgbaString

返回适合在CSS中使用的RGB或RGBA字符串。例子:

rgb(0, 82, 148)
rgba(0, 82, 148, .75)
设定

获取或设置控件的设置。如果传入新设置,则控件将 使用覆盖旧设置的任何新设置销毁并重新初始化自己。

获取或设置控件的颜色值。要将此方法用作设置器,请通过 data 以十六进制值形式输入。 (您也可以通过检查 输入 element's attribute.)

大事记

更改

Fires when the 值 of the color picker 更改 s. The this keyword will reference 原始输入元素。

$(selector).minicolors({
     更改 : function(hex,  不透明 ) {
        console.log(hex + ' - ' +  不透明 );
    }
});

警告! 当用户拖移 color picker around. Use the 更改 Delay setting to reduce its 频率。

隐藏

Fires when the color picker is hidden. The this keyword will reference 原始输入元素。

$(selector).minicolors({
     隐藏 : function() {
    console.log('Hide event triggered!');
    }
});
节目

Fires when the color picker is 节目 n. The this keyword will reference 原始输入元素。

$(selector).minicolors({
     节目 : function() {
        console.log('Show event triggered!');
    }
});

执照

根据许可 麻省理工学院执照 , 和...一样 jQuery的 的 .

©2013 一个美丽的网站,LLC。