jQuery Color Picker —— 网页中类似 Photoshop 的颜色选择器

IBMdW 发布于 2011/03/28 16:00
阅读 2K+
收藏 2

简介

jQuery Color Picker是一个简单的组件,用于在网页中模拟Adobe Photoshop的颜色选择框。

特点:

  • 平面模式——作为页面中的一个元素;

  • 颜色选择的强大控制功能;

  • 可以通过修改图片来轻松地自定义;

  • 自动适应视图。

示例

1.平面模式:

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

2.在自定义的小部件中自定义皮肤,使用平面模式显示颜色选择框:

3.绑定到文本框上,使用回调函数来更新选择选择框中的颜色,在提交颜色时更新文本框的值:

 

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

4.绑定到DOM元素,使用回调函数来实时预览颜色,添加动画效果:

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

下载

点击这里从DevWing.Com下载,或者从官方网站下载。

使用

实施

在文档中附加JavaScript和CSS文件。编辑CSS文件,修正图片的路径,针对网站的色调修改颜色。

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

调用代码

选择元素,调用插件函数:

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

选项

所有参数都是可选的。

参数名 类型 默认值 含义
eventName string ‘click’ 想要触发颜色选择器的事件
color string或者hash ‘ff0000′或者{r:255,r:0,b:0} 默认颜色,十六进制的颜色值或者RGB和HSB的对象
flat boolean false 平面模式,颜色选择器被添加到元素内部
livePreview boolean true 实现获取所设置的颜色值。如果设置为false,可以提高速度
onShow function   颜色选择器显示时的回调函数
onBeforeShow function   颜色选择器将要显示时的回调函数
onHide function   颜色选择器隐藏时的回调函数
onChange function   颜色选择器的颜色被修改时的回调函数
onSubmit function   提交颜色时的回调函数

设置颜色

如果想要设置一个新的颜色,可以这样调用:

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

color参数与选项中的color格式一致,可以是字符串或者是RGB和HSB的哈希值(如{r:255,g:0,b:0})。

加载中
0
Gregary
Gregary
楼主介绍这个组件不错,这段时间我也找到另外一个ColorPicker 组件,也分享出来给大家相互学习 http://www.shinater.com/FlashSwing/Help/ColorPicker.html
返回顶部
顶部