jQuery iColor拾色器插件Demo_颜色选择器JS插件
2014-09-25 12:19:56 By: shinyuu
在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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛