jQuery赋予了我们很强大的插件自定义的功能,可以作为我们的武器库,应用到所有的网页中,使用的语法比较有意思,下面是对它的一些探讨.
遵循以下的原则:
1 IIFE 创建一个jQuery的scope
(function($){}(jQuery))
2 namespace要唯一.
$.widget(‘custom.colorize‘)
custom为命名空间,colorize为插件名
3 default options
options:{red:255,green:0,blue:0,change:null,random:null}
三个属性(red,green,blue),两个方法(change,random)初始化
4 可扩展option,使用工厂方法会自动进行检测输入参数和扩展.比如
$(‘#div1‘).colorize({ green:128, random:function(event, ui) { return ui.green > 128; } })
就会将option扩展为:
option = { red:255, green:128, blue:0, change:null, random:function(event, ui) { return ui.green > 128; } }
本质使用的应该是 $.extend({},default,options) 方法
5 添加私有方法:
(function($){ $.widget("custom.colorize",{ options:{ red:255, green:0, blue:0, change:null, random:null }, // constructor _create:function() { this.element .addClass("custom-colorize"); this.changer = $(‘<button>‘,{text:‘change‘,‘class‘:‘custom-colorize-changer‘}) .appendTo(this.element) .button(); // 绑定点击事件在该button上 this._on(this.charger, { click:"random" }); this._refresh(); }, // 更新,render _refresh: function() { this.element.css(‘background-color‘,`rgb(${this.options.red},${this.options.green},${this.options.blue})`); // 触发回调函数change this._trigger(‘change‘); }, //销毁 _destroy: function() { this.changer.remove(); this.element .removeClass(‘custom-colorize‘) .enableSelection() .css(‘background-color‘, ‘transparent‘); }, // 设置,包含所有参数合并 _setOptions:function(){ this._superApply(arguments); this._refresh(); }, // 设置,部分参数 _setOption:function(key,value){ if(/ref|green|blue/.test(key) && (value < 0 || value > 255)) { return; } this._super(key,value); } }); }(jQuery))
6 公有方法,添加一个随机的方法
(function($){ $.widget("custom.colorize",{ //公有方法,可被colorize(‘random‘)访问 random:function(){ let color = { red: Math.floor(Math.random() * 256), green: Math.floor(Math.random() * 256), blue: Math.floor(Math.random() * 256) }; if (this._trigger("random",event,colors) !== false) { this.option(colors); } } });
然后来看一下怎么使用这个插件:
// 初始化默认参数 $(‘#my-widget1‘).colorize(); // 初始化并带有参数 $(‘#my-widget2‘).colorize({ green: 128, random: function(event, ui) { return ui.green > 128; } }); // 点击enable或disable $(‘#disable‘).on(‘click‘,function(){ if ($(‘:custom-colorize‘).colorize(‘option‘,‘disabled‘)) { $(‘:custom-colorize‘).colorize(‘enable‘); } else { $(‘:custom-colorize‘).colorize(‘disable‘); } }); // 点击设置运行后参数 $(‘#grenn‘).on(‘click‘,function() { $(‘:custom-colorize‘).colorize(‘option‘, { red: 64, green: 250, blue: 8 }); });
值得注意的是:
1 内置的插件selector, 如果是使用的工厂方法创建的插件,可以使用$(‘:插件名称‘)来获取所有应用了该插件的所有实例(instance),
2 使用"enable"和"disable"作为参数来操作插件是否有效
3 random里的ui是jQuery UI对象,详情请参见 https://jqueryui.com/
代码来自jQuery官方文档:http://jqueryui.com/widget/
希望对你有所帮助!
