一个简单的组件来选择色彩在你选择的颜色一样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); } });