jQuery插件开发详细教程

2020-05-23 06:07:12易采站长站整理

            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === ‘object’ || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error(‘Method’ + method + ‘does not exist on jQuery.tooltip’);
        }
    };
})(jQuery);
//调用init方法
$(‘div’).tooltip();
//调用init方法
$(‘div’).tooltip({
    foo: ‘bar’
});
// 调用hide方法
$(‘div’).tooltip(‘hide’);
//调用Update方法
$(‘div’).tooltip(‘update’, ‘This is the new tooltip content!’);


这种类型的插件架构允许您封装所有的方法在父包中,通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准,它被无数的插件在使用,包括jQueryUI中的插件和widgets。


八、事件

一个鲜为人知bind方法的功能即允许绑定事件命名空间。 如果你的插件绑定一个事件,一个很好的做法是赋予此事件命名空间。 通过这种方式,当你在解除绑定的时候不会干扰其他可能已经绑定的同一类型事件。   你可以通过追加命名空间到你需要绑定的的事件通过 ‘.<namespace>’。

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                $(window).bind(‘resize.tooltip’, methods.reposition);
            });
        },
        destroy: function () {
            return this.each(function () {
                $(window).unbind(‘.tooltip’);
            })
        },
        reposition: function () {
            //…
        },
        show: function () {
            //…