本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能。有利于我们理解easyui插件的实现,以及了解如何对easyui插件进行拓展,或者当发现bug时在不修改源码的情况下对bug进行修复。 ...
本文介绍如何通过参考1.4.2版本的progressbar的源码自己编写一个HelloWorld级别的easyui插件,以及如何拓展插件的功能。
有利于我们理解easyui插件的实现,以及了解如何对easyui插件进行拓展,或者当发现bug时在不修改源码的情况下对bug进行修复。
1. 首先让我们来看看progressbar的源码(已经删除了一些对本文不重要的)。
比较了一下有源码的那几个插件,发现这个只有3KB,最小,所以拿这个学习最好了;而且这个progressbar没有涉及继承其他控件,易于理解。
(function($){ function init(target) { $(target).addClass('progressbar'); return $(target); } $.fn.progressbar = function(options, param){ if (typeof options == 'string'){ var method = $.fn.progressbar.methods[options]; if (method){ return method(this, param); } } options = options || {}; return this.each(function(){ var state = $.data(this, 'progressbar'); if (state){ $.extend(state.options, options); } else { state = $.data(this, 'progressbar', { options: $.extend({}, $.fn.progressbar.defaults, $.fn.progressbar.parseOptions(this), options), bar: init(this) }); } }); }; $.fn.progressbar.methods = { options: function(jq){ return $.data(jq[0], 'progressbar').options; }, getValue: function(jq){ return $.data(jq[0], 'progressbar').options.value; } }; $.fn.progressbar.parseOptions = function(target){ return $.extend({}, $.parser.parseOptions(target, ['width','height','text',{value:'number'}])); }; $.fn.progressbar.defaults = { width: 'auto', height: 22, value: 0, // percentage value text: '{value}%', onChange:function(newValue,oldValue){} };})(jQuery);
原标题:如何自己编写一个easyui插件
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。