如何自己编写一个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);