// 触发一个事件，检查是否已取消
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},
// 自动移除通过 _on 绑定的事件
// 在这里重置其他的修改
_destroy: function() {
// 移除生成的元素
this.changer.remove();
this.element .removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},
// _setOptions 是通过一个带有所有改变的选项的哈希来调用的
// 当改变选项时总是刷新
_setOptions: function() {
// _super 和 _superApply
this._superApply( arguments );
this._refresh();
},
// _setOption 是为每个独立的改变的选项调用的
_setOption: function( key, value ) {
// 防止无效的颜色值
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
this._super( key, value );
}
});
// 通过默认选项进行初始化
$( "#my-widget1" ).colorize();
// 通过两个自定义的选项进行初始化
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});
// 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});
// 点击切换 enabled/disabled
$( "#disable" ).click(function() {
// 为每个小部件使用自定义的选择器来找到所有的实例
// 所有的实例一起切换，所以我们可以从第一个开始检查状态
if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
$( ":custom-colorize" ).colorize( "enable" );
} else {
$( ":custom-colorize" ).colorize( "disable" );
}
});
// 在初始化后，点击设置选项
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
red: 0,
green: 0,
blue: 0
});
});
});
</script></head><body>
<div>
<div id="my-widget1">改变颜色</div>
<div id="my-widget2">改变颜色</div>
<div id="my-widget3">改变颜色</div>
<button id="disable">切换 disabled 选项</button>
<button id="black">改为黑色</button></div>
</body></html>查看演示
