如何自己编写一个easyui插件
本文介绍如何通过参考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);我们倒着看，
①$.fn.progressbar.defaults定义了一些参数的默认值，而且是直接定义在$.fn.progressbar.defaults上的，是全局的。
②$.fn.progressbar.parseOptions是一个对data-options="......"中的属性进行解析的方法，其实$.parser.parseOptions已经帮助我们做了主要工作，我们只需要设置一下参数是什么类型的数据就行，如这里的value设置为number类型。
③$.fn.progressbar.methods定义了这个插件的行为（一些方法），可以看出也是全局的。
④$.fn.progressbar这个是重点了，typeof options == 'string'时就是调用插件的某个方法，如$('#xxx').progressbar('setValue', 10)；否则就相当于调用无参方法$('#xxx').progressbar()，有点像是个构造函数。
2. 实现自己的hello插件
jquery.hello.js
(function($){ function init(target) { //注：此处还不能获取options //所以这里可以进行一些如设置样式、绑定事件的事情 $(target).css('cursor', 'pointer'); $(target).bind('click', function (e, preventBubble) { $.fn.hello.methods.sayHello($(e.target)); return false; }); return $(target); } //easyui插件函数 $.fn.hello = function (options, param) { //如果options为string，则是方法调用，如$('#divMyPlugin').hello('sayHello'); if (typeof options == 'string'){ var method = $.fn.hello.methods[options]; if (method){ return method(this, param); } } //否则是插件初始化函数，如$('#divMyPlugin').hello(); options = options || {}; return this.each(function(){ var state = $.data(this, 'hello'); if (state){ $.extend(state.options, options); } else { //easyui的parser会依次计算options、initedObj state = $.data(this, 'hello', { options: $.extend({}, $.fn.hello.defaults, $.fn.hello.parseOptions(this), options), initedObj: init(this) //这里的initedObj名称随便取的 }); } $(this).css('color', state.options.myColor); }); }; //设置hello插件的一些方法的默认实现 //注：第一个参数为当前元素对应的jQuery对象 $.fn.hello.methods = { options: function(jq){ return $.data(jq[0], 'hello').options; }, sayHello: function (jq) { var opts = $.data(jq[0], 'hello').options; //获取配置参数 for (var i = 0; i < opts.repeatTimes; i++) { opts.howToSay(opts.to); } } }; //设置参数转换方法 $.fn.hello.parseOptions = function (target) { var opts = $.extend({}, $.parser.parseOptions(target, ['to', 'myColor', { repeatTimes: 'number' }]));//这里可以指定参数的类型 return opts; }; //设置hello插件的一些默认值 $.fn.hello.defaults = { to: 'world', repeatTimes: 1, myColor: null, howToSay: function (to) { alert('Hello, ' + to + "!"); } }; //注册自定义easyui插件hello $.parser.plugins.push("hello");})(jQuery);3. 给hello插件拓展功能
我们前面已经说了$.fn.hello.methods是全局的，所以所谓拓展就是直接给$.fn.hello.methods加方法。
如果需要改写原有实现，可以直接将原来的方法覆盖掉就可以了，如：$.fn.hello.methods.sayHello = function(jq){ ...... };
jquery.hello.extension.js
(function($){ //拓展方法 $.fn.hello.methods.sayHi = function (jq) { //var opts = $.data(jq[0], 'hello').options; alert("Hi"); } })(jQuery);<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <script type="text/javascript" src="jquery.hello.js"></script> <script type="text/javascript" src="jquery.hello.extension.js"></script></head><body> <div id="divMyPlugin1" class="easyui-hello" data-options="to:'world', myColor:'red' ">点我sayHello一次</div> <div id="divMyPlugin2" class="easyui-hello" data-options="to:'world', repeatTimes:3, myColor:'green', howToSay:customeHowToSay">点我sayHello三次</div> <button onclick="invokePluginMethod()">调用插件的方法</button><button onclick="invokePluginExMethod()">调用插件的拓展方法</button><button onclick="$('#divMsg').empty()">Clear</button> <div id="divMsg"> </div> <script type="text/javascript"> function invokePluginMethod() { $('#divMyPlugin2').hello('sayHello'); } function invokePluginExMethod() { $('#divMyPlugin2').hello('sayHi'); } function customeHowToSay(to) { $('<p></p>').html('你好, <span >' + to + '<span>!' + new Date().getTime()).appendTo($('#divMsg')); } </script></body></html>5. 在线查看
点这里http://liqipeng.github.io/MyDemoCode/demos/easyui/02write-a-easyui-plugin.html
来源 http://www.cnblogs.com/liqipeng/p/write-a-easyui-plugin.html
