一款小巧的jQuery拾色器组件v0.2.29.04.2014

这款组件是我在11年的时候开发的,现在已过了3年了,今天难得又拿起来再次更新,你可以在这里查看到以前的版本:

文件下载:

iColor.zip – http://files.cnblogs.com/aiyuchen/iColor-29.04.14.zip

版本:v0.2.29.04.2014

在线效果:

更新说明:

  1. 继续提高执行效率,去掉了这个组件中无异议的对象,读过源码,对照你就能发现;比如:$this、color对象
  2. 增加了事件类型,不限制触发事件为click
  3. 增加了面板打开回调方法
  4. 修改选择颜色回调方法
  5. 修改了配置参数,之前需要对应需求填充null对应;而现在呢,你只需要根据需要传递参数,而不是填充一个null

无论是面板打开还是选择好颜色,调用的回调方法都通过了call,而不再将触发拾色器的元素作为参数回调回来,只需要在回调函数中使用this,这里的this是jQuer对象,大家可省去$(this)

在线文档

最简单的调用方法:

$('input').iColor();

设置初始颜色:
html设置方法:给标签加上一个hx,如:

<input name="mycolor" id="lineColor" type="text" value="" hx="#c00" />

js设置方法:

$('input').attr('hx': '#c00').iColor();

获取当前颜色(简单的方法):

$('input').iColor().attr('hx');

设置面板坐标位置的偏移:

上一个版本坐标对应触发的元素,这个版本为了提高效率,坐标对应触发事件时鼠标的位置

$('input').iColor({'x': 10, 'y': -50});

拾取颜色后设置回调函数:

$('#lineColor').iColor(function(hx) {
    console.log('自定义回调:去掉内容');
    this.val('').css('background', '#' + hx);
});

来个比较完整的:

  • 通过mouseover进行触发
  • 设置函数前告诉我们在此之前设置的颜色是什么
  • 选取好颜色后,告诉我们现在的颜色是什么
$('[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);
    }
});

关于open回调?

  1. 在这个版本以及之前的版本中我都对浏览器默认的触发事件进行阻止了,因为我设置了document来结束icolor,这样可能大家不知道icolor何时打开的,所以我增加了一个open回调
  2. 在open回调的时候会将事件作为参数抛回来,大家在使用的时候可以将这个回调当作一个事件

最后希望大家多多支持这款组件,如果在使用过程中遇到什么问题,或者BUG,请留言反馈给我,谢谢

最后,有什么问题,大家可以给我留言哦,别忘了关注我的博客哦:

http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0



此条目发表在Javascript分类目录,贴了, 标签。将固定链接加入收藏夹。