Colorpicker 基于 jQuery 的网页颜色选择器插件

Question

Color Picker 是一款能够让我们像在 Photoshop 里面选择颜色一样在网页中选择颜色的 jQuery 插件。

特征

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

简单使用

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

附加到一个文本字段，并使用回调函数来更新字段的值的颜色，并提交颜色设置在该领域的值。

<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>

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

下载地址

colorpicker.zip (89 kb): jQuery, Javscript files, CSS files, images, examples and instructions.

引入文件

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

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

开始使用

All you have to do is to select the elements in a jQuery way and call the plugin.

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

可选参数

A hash of parameters. All parameters are optional.

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

设置颜色

If you want to set a new 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}).