你的位置:首页 > Java教程

[Java教程]如何自己编写一个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);

 

 

4. 使用hello插件

<!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">	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>  <script type="text/javascript" src="jquery.hello.js"></script>  <script type="text/javascript" src="jquery.hello.extension.js"></script></head><body>  <div id="divMyPlugin1" data-options="to:'world', myColor:'red', some:'aaa' ">点我sayHello一次</div>  <div id="divMyPlugin2" data-options="to:'world', repeatTimes:3, myColor:'green', some:'aaa', 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. 在线查看

点这里