jQuery封装插件开发入门教程

jQuery.fn.myPlugin = function(){

  //你自己的插件代码

};

(function ($) {
    $.fn.m​​axHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);

var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

(function ($) {
    $.fn.lockDimensions = function (type) {
        return this.each(function () {

            var $this = $(this);

            if (!type || type == 'width') {
                $this.width($this.width());
            }

            if (!type || type == 'height') {
                $this.height($this.height());
            }
        });
    };
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };

    $.fn.tooltip = function () {
        // 获取传入的方法，切勿用function(method){}来实现，否则会毁掉一切
        // arguments对象用法参考：http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp
        var method = arguments[0];
        // 方法调用
        if (methods[method]) {
 
            // 如果存在，获取方法名
            method = methods[method];

            // 我们的方法是作为参数传入的，把它从参数列表中删除，因为调用方法时仅需JSON格式参数，并不需要它
            arguments = Array.prototype.slice.call(arguments, 1);

        } else if (typeof method === 'object' || !method) {

            // 如果没有传入方法名，则默认调用init方法，参数为arguments
            method = methods.init;
        } else {

            // 否则提示错误
            $.error('Method' + method + 'does not exist on jQuery.tooltip');
        }

        // 用apply方法来调用方法，并传入参数 
        return method.apply(this, arguments);
    };
})(jQuery);

// 调用init方法
$('div').tooltip();

// 调用init方法
$('div').tooltip({
    foo: 'bar'
});

// 调用hide方法
$('div').tooltip('hide');

// 调用update方法
$('div').tooltip('update', 'This is the new tooltip content!');

(function($) {
    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);

                // 尝试去获取settings，如果不存在，则返回“undefined”
                var settings = $this.data('pluginName');
 
               // 如果获取settings失败，则根据options和default创建它
                if(typeof(settings) == 'undefined') {
 
                    var defaults = {
                        propertyName: 'value',
                        onSomeEvent: function() {}
                    }
 
                    settings = $.extend({}, defaults, options);
                    // 保存我们新创建的settings
                    $this.data('pluginName', settings);
                } else {
                    // 如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做）
                    settings = $.extend({}, settings, options);

                    // 如果你想每次都保存options，可以添加下面代码：
                    // $this.data('pluginName', settings);
                }
        
               // 执行代码
            });
        },
        destroy: function(options) {
            
            // 在每个元素中执行代码
            return $(this).each(function() {
                var $this = $(this);
 
                // 执行代码

                // 删除元素对应的数据
                $this.removeData('pluginName');
            });
        },
        val: function(options) {
            // 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值
            var someValue = this.eq(0).html();
            // 返回值
            return someValue;
        }
    };
 
    $.fn.pluginName = function() {
        var method = arguments[0];
 
        if(methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else if( typeof(method) == 'object' || !method ) {
            method = methods.init;
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
 
        return method.apply(this, arguments);
 
    }
 
})(jQuery);