jQuery iColor拾色器插件Demo_颜色选择器JS插件
2014-09-25 12:19:56  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 7749
• 2

在web项目中很多地方都需要用到颜色选择器、来让用户根据自己的喜好来自定义颜色

按照我们交互设计的期望-设色器最好简单易用、仅显示常用的那些色块给用户选择

另外提供一个输入框方便用户输入自定义的色值、那么jQuery iColor拾色器插件刚好满足我们的需求

主要有以下特点

1、默认提供的色值为“常用的浏览器安全的色值”、相当于整合了下面最后一个prototype版本的颜色拾取器

2、用户可以自定义常用色值、相当于整合了下面图片中的第7个颜色选择器

3、用户可根据需要设置是否显示颜色输入框、确认按钮

4、inline模式和popup模式

5、轻量级、符合xhtml、css2标准、大小只5KB、样式与行为分离

下面先看一下效果

实现也非常简单、一起来年一下JS代码

$(´input´).iColor({´x´: 10, ´y´: -50});
$(´#lineColor´).iColor(function(hx) {
	console.log(´自定义回调：去掉内容´);
	this.val(´´).css(´background´, ´#´ + hx);
});
$(´#color´).iColor(function(hx) {
	console.log(´自定义回调：我不修改背景色´);
	this.val(´#´ + hx)
});
$(´#mycolor2´).iColor();
$(´[name="mousecolor"]´).iColor({
	´type´: ´mouseover´, 
	´open´: function(e) {
		var color = this.data(´color´);
		console.log(´事件类型´ + e.type);
		console.log(color ? ´之前设置的颜色为：´ 
			+ color : ´之前没有设置颜色´);
	},
	´set´: function(hx) {
		this.data(´color´, ´#´+hx);
		this.val(´´).css(´background´, ´#´ + hx);
		
		console.log(´现在设置的颜色为：´ + ´#´+hx);
	}
});

下面是HTML代码

<div style="margin: 50px;">
	<input name="mycolor" id="lineColor" type="text" 
		value="" hx="#c00" />
	<input name="mycolor" id="color" type="text" 
		value="" hx="#ccc" />
</div>
<div style="margin: 50px;">
	<input name="mycolor" type="text" value="" hx="#ccc" />
	<div id="mycolor2" style="width: 80px; height: 24px; 
		line-height: 24px" hx="#f00"></div>
</div>
<div style="margin: 50px;">
	<input name="mousecolor" type="text" value="" hx="#c0c" />
	鼠标悬停看看 
</div>

最后给大家献上我的源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjueVCh 密码: gvvw

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛