ColorPicker.js——基于jQuery的一款颜色选择器

介绍

一个简单的选择颜色的jQuery，就像你在Adobe Photoshop中选择颜色一样

特征

  • 平面模式-作为页面中的元素
  • 强大的颜色选择控件
  • 通过更改某些图像可以轻松定制外观
  • 适合视口

许可证

MIT和GPL许可证下的双重许可

示例

平坦模式

$('#colorpickerHolder').ColorPicker({flat: true});

自定义皮肤并使用平面模式在自定义小部件中显示颜色选择器。

附加到文本字段并使用回调函数用字段的值更新颜色，并通过提交颜色将值设置回字段中。

$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val(hex);
		$(el).ColorPickerHide();
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	}
})
.bind('keyup', function(){
	$(this).ColorPickerSetColor(this.value);
});

附加到DOMElement并使用回调实时预览颜色和添加动画。

$('#colorSelector').ColorPicker({
	color: '#0000ff',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
	}
});

下载

colorpicker.zip (73 kb): 包含js和css文件

更新日志

23.05.2009
Added: close on color selection example
Added: restore original color option
Changed: color update on key up event
Fixed: colorpicker hide and show methods
Fixed: reference to options. Multiple fields with colorpickers is possible now.
Fixed: RGB to HSB convertion
22.08.2008
Fixed bug: where some events were not canceled right on Safari
Fixed bug: where teh view port was not detected right on Safari
16-07-2008
Fixed bug where the letter 'F' could not be typed in the Hex field
Fixed bug where the changes on Hex field where not parsed
Added new option 'livePreview'
08-07-2008
Fixed typo in the code, both JavaScript and CSS
Changed the cursor for some elements
Added new demo explaining how to implement custom skin
07.07.2008
The first release.

使用方法

将Javascript和CSS文件加到文档中。编辑CSS文件，修复图片的路径，改变颜色以适应你的网站主题。

<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

调用代码

您所要做的就是以jQuery方式选择元素并调用插件。

 $('input').ColorPicker(options);

参数

参数的散列。所有参数都是可选的。

eventName string The desired event to trigger the colorpicker. Default: 'click'
color string or hash The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'
flat boolean Whatever if the color picker is appended to the element or triggered by an event. Default false
livePreview boolean Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true
onShow function Callback function triggered when the color picker is shown
onBeforeShow function Callback function triggered before the color picker is shown
onHide function Callback function triggered when the color picker is hidden
onChange function Callback function triggered when the color is changed
onSubmit function Callback function triggered when the color it is chosen

Set color

如果你想设置一个新的颜色

$('input').ColorPickerSetColor(color);

The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

网页模板