你的位置:首页 > Java教程

[Java教程]如何自己编写一个easyui插件续


接着如何自己编写一个easyui插件继续分享一下如何从上一节写的“hello”插件继承出一个“hello2”。

参考了combobox的源码中继承combo,当然我这个简单很多了。都是根据自己的理解来写的,没有参考什么权威资料,欢迎各位看官拍砖。

 

1. 实现效果

点击这里在线查看
增加了一个输入框,sayHello的是输入的名字。

 

2. 贴代码

(function ($) {  function init(target) {    $(target).addClass('hello2');    return $(target);  }  //easyui插件函数  $.fn.hello2 = function (options, param) {    //如果options为string,则是方法调用,如$('#divMyPlugin').hello('sayHello');    if (typeof options == 'string') {      var method = $.fn.hello2.methods[options];      if (method) { //尝试调用hello2的方法,没有找到就去找hello的方法        return method(this, param);      } else {        return this.hello(options, param); //调用继承的hello的方法      }    }    //否则是插件初始化函数,如$('#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, 'hello2', {          options: $.extend({}, $.fn.hello2.defaults, $.fn.hello2.parseOptions(this), options),        });        init(this);      }      $(this).hello(state.options); //调用继承的hello的构造方法      var $input = $("<input />");      var current = this;      $input.width(state.options.inputWidth).val(state.options.to).change(function () {        var val = $(this).val();        $.data(current, 'hello').options.to = val;        $.data(current, 'hello2').options.to = val;      });      $(this).append($input);      $(this).css('color', state.options.myColor);    });  };  //【注意】这里的methods没有采用$.extend  $.fn.hello2.methods = {    options: function (jq) {      var copts = jq.hello('options'); //获取hello继承的options      return $.extend($.data(jq[0], 'hello2').options, {});    }  };  //设置参数转换方法(使用$.extend从继承的hello那里拓展)  $.fn.hello2.parseOptions = function (target) {    var opts = $.extend({}, $.fn.hello.parseOptions(target), $.parser.parseOptions(target, [{ inputWidth: 'number' }]));//这里可以指定参数的类型    return opts;  };  //设置hello插件的一些默认值(使用$.extend从继承的hello那里拓展)  $.fn.hello2.defaults = $.extend({}, $.fn.hello.defaults, {    inputWidth: 100  });  //注册插件hello2  $.parser.plugins.push("hello2");})(jQuery);