颜色选择器 - jQuery插件

介绍

一个简单的组件来选择色彩在你选择的颜色一样Adobe Photoshop

特征

• 在页面元素平面模式
• 颜色选择功能强大的控件
• 容易定制通过改变一些图像的外观
• 可视选择器颜色变化

例子

平面模式

$('#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);

});

使用回调的实现预览的颜色和添加颜色动画。

$('#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);

	}

});