一个jQuery插件,可以给你的网站增加颜色选择,比如我的网站“装逼神器”中的颜色选择使用的就是该插件。Jquery MiniColors支持Bootstrap颜色选择器,也可以不需要Bootstrap支持。

jquery MiniColors支持“Control Types”、“Input Modes”、“Positions”、“RGB(A)”等等。

官方demo : jquery MiniColors

使用方法:

  1. 引入jquery.minicolors.min.js和jquery.minicolors.css;
  2. 实例像任何jQuery插件:
 $('INPUT.minicolors').minicolors(settings);  

默认的设置如下:

$.minicolors = {
	defaults: {
		animationSpeed: 50,
		animationEasing: 'swing',
		change: null,
		changeDelay: 0,
		control: 'hue',
		defaultValue: '',
		hide: null,
		hideSpeed: 100,
		inline: false,
		letterCase: 'lowercase',
		opacity: false,
		position: 'bottom left',
		show: null,
		showSpeed: 100,
		theme: 'default'
	}
};

animationSpeed

当用户点击或点击一个新的颜色滑块的动画速度。设置为 0为没有动画。

animationEasing

缓动动画滑杆时使用。

changeDelay

的时间,以毫秒为单位,推迟了变化,而 用户进行选择的射击事件。这是为了防止有用变化的事件频繁发射作为用户拖动周围的颜色选择器。

缺省值是0(无延迟)。如果你改变的回调功能的东西资源密集型(如AJAX请求),你可能会想将它设置为至少200。

控制

确定控制的种类。有效的选项为色调,亮度, 饱和度,和车轮。

设置defaultValue

要强制默认的颜色,设置为一个有效的十六进制字符串。当用户清除了控制,它会恢复到这种颜色。

hideSpeed&showSpeed

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

内联

设置为真给力拾色器出现内联。

大小写

确定的十六进制代码值的字母大小写。有效选项为大写 或小写。

不透明度

设置为真,使不透明度滑块。(使用输入单元的 数据不透明度属性来设置一个预先设定的值。)

位置

设置下拉列表的位置。有效的选项为bottom left, bottom right, top left, and top right.