# 颜色挑选期ColorPicker插件
使用步骤:
$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb) {
$('#colorSelector').css('backgroundColor', '#' + hex);
}});
注意其中用到了一个 onChange 事件,当我们改变颜色选择其里面的颜色的时候就及时改变 div 的背景颜色,
参数配置
# eventName 触发颜色选择器显示的事件 字符串 ‘click’
# color 默认的颜色 字符串或HSB ({r:255, r:0, b:0}) ‘ff0000′
# flat 颜色选择器的显示模式,如果为true的话整个选择器直接显示出来 布尔值 false
# onShow 当颜色变选择器显示的时候的回掉函数 函数 function(){}
# onBeforeShow 当颜色选择器显示之前的回掉函数 函数 function(){}
# onHide 当颜色选择器隐藏的时候的回掉函数 函数 function(){}
# onChange 当颜色变得时候的回掉函数 函数 function(){}
# onSubmit 当颜当选择好颜色后的回掉函数 函数 function(){}
$('#color').ColorPicker({
onChange:function(hsb,hex,rgb){
console.log(hex);
},
onSubmit:function(hsb, hex, rgb, el){
$(el).val(hex);
}
});
#问题: 当我们设置id 为color属性为position:absolute,基本就失效了,
我们将源码改掉就好,可以让新插入的div位置自定义,以及新增class名称,那样就可以随我们操作了。
cal.insertBefore($('script'));使新生成的div插入到脚本之前。
增加我们想要的class名称,那样我们就可以为所欲为了。
var className=$(this).attr('id');
var cal = $(tpl).attr('id', id).addClass(className);