JQuery плагин init

Question

Я новичок в написании плагинов для jQuery.Ниже приведен источник для плагина, который я написал.Плагин работает нормально, но есть некоторые вещи, которые я хотел бы знать.

Чтобы запустить плагин, который вы должны использовать,

$(this).jModalbox({
    content: 'aaa',
    speed: 400,
    buttons: {
        'yes': function () {
        },
        'no': function () {
            alert('no');
        }
    }
});

Однако я бы хотел, чтобы он работалкак это

$.jModalbox({
    content: 'aaa',
    speed: 400,
    buttons: {
        'yes': function () {
        },
        'no': function () {
            alert('no');
        }
    }
});

, а также мне всегда нужно использовать return this.each() для запуска метода, даже если я знаю, что плагин не будет перебирать какой-либо элемент?

Спасибо

Исходный код подключаемого модуля

(function ($) {


    // remove modalbox
    function remove_jModalbox() {
        $('.jmodalbox').fadeOut('slow', function () {
            $('.jmodalbox').remove();
        });
    }






    // apply methods  
    $.fn.jModalbox = function (method) {
        if (methods[method]) {
            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.jModalbox');
        }
    };



    var methods = {



        // init() method
        init: function (options, callback) {

            // default options
            var defaults = {
                speed: 500,
                content: 'content',
                opacity: 0.5,
                buttons: false
            };
            var options = $.extend(defaults, options);
            var o = options;


            $('.jmodalbox-wrap .jmodal-btn').live('click', function () {
                return false;
            });



            // return        
            return this.each(function () {

                var obj = $(this);

                // set up jModal object
                var jModal = $('<div class="jmodalbox"></div>');
                    jModal.append($('<div class="jmodalbox-overlay"></div>'));
                    jModal.append($('<div class="jmodalbox-wrap"></div>'));
                    jModal.find('.jmodalbox-wrap').append($('<div class="jmodalbox"></div>'));
                    jModal.find('.jmodalbox').append($('<div class="jmodalbox-content"></div>'));
                    jModal.find('.jmodalbox').append($('<div class="jmodalbox-interface"></div>'));
                    jModal.find('.jmodalbox-content').html(o.content);

                // setup buttons
                if (!o.buttons) {
                    (jModal).find('.jmodalbox-interface').remove();
                } else {
                    $.each(o.buttons, function (index, value) {
                        btn = $('<a class="jmodal-btn" href="">' + index + '</a>');
                        $('.jmodalbox-interface', jModal).append(btn);
                        btn.bind('click', value);
                    });
                }

                // fade in box
                $(jModal).find('.jmodalbox-overlay').fadeTo(0, 0);
                $('body').append(jModal);
                $('.jmodalbox-overlay').fadeTo(o.speed, o.opacity, function () {
                    $('.jmodalbox-wrap').fadeIn(500);
                });

                // set box positioning
                var bodywidth = $('.jmodalbox-overlay').width() / 2;
                var wrapwidth = $('.jmodalbox-wrap').width() / 2;
                var bodyheight = $('.jmodalbox-overlay').height() / 2;
                var wrapheight = $('.jmodalbox-wrap').height() / 2;
                $('.jmodalbox-wrap').css('left', bodywidth - wrapwidth);
                $('.jmodalbox-wrap').css('top', bodyheight - wrapheight);





                // hide box when

                // wrapper is clicked        
                $('.jmodalbox-overlay').live('click', function () {
                    remove_jModalbox();
                });
                // escape key is pressed
                $(document).keypress(function (e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 27) {
                        remove_jModalbox();
                    }
                });


            });

        },
        // end init()
        // hide method()     
        hide: function () {
            remove_jModalbox();
        }


    }



})(jQuery);

Answer 1

Для части return this.each() ... нет, у вас нет , что до return этого, но для целей цепочки, например:

$("selector").jModalbox().show().addClass("something").....

Если вы неЕсли вы хотите, чтобы ваш плагин был цепным, вы можете вернуть все, что захотите.Даже внутри метода он может быть другим, некоторые методы уже работают с наборами, например это может быть:

return this.click(function() { alert("Quit tickling me!"); });

или

return this.addClass("myClass");

Оба эти примера являются примерами методов, которые возвращаютjQuery устанавливает ... если эти методы являются цепочечными, вы можете вернуть их результат, нет необходимости перебирать с .each(), если вам не нужно.

---

Для $.fn.jModalbox против $.jModalbox все, что вам нужно сделать, это изменить это в своем плагине и больше ничего не возвращать или использовать .each(), например:

/*

******************************            
License
******************************

    * Redistributions of source code must retain the above copyright.
    * You are free to modify any part of the code.
    * Commercial use permitted.

*/
(function ($) {
    // remove modalbox
    function remove_jModalbox() {
        $('.jmodalbox').fadeOut('slow', function () {
            $('.jmodalbox').remove();
        });
    }
    // apply methods  
    $.jModalbox = function (method) {
        if (methods[method]) {
            methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.jModalbox');
        }
    };
    var methods = {
        // init() method
        init: function (options, callback) {

            // default options
            var defaults = {
                speed: 500,
                content: 'content',
                opacity: 0.5,
                buttons: false
            };
            var options = $.extend(defaults, options);
            var o = options;


            $('.jmodalbox-wrap .jmodal-btn').live('click', function () {
                return false;
            });

            // set up jModal object
            var jModal = $('<div class="jmodalbox"></div>');
                jModal.append($('<div class="jmodalbox-overlay"></div>'));
                jModal.append($('<div class="jmodalbox-wrap"></div>'));
                jModal.find('.jmodalbox-wrap').append($('<div class="jmodalbox"></div>'));
                jModal.find('.jmodalbox').append($('<div class="jmodalbox-content"></div>'));
                jModal.find('.jmodalbox').append($('<div class="jmodalbox-interface"></div>'));
                jModal.find('.jmodalbox-content').html(o.content);

            // setup buttons
            if (!o.buttons) {
                (jModal).find('.jmodalbox-interface').remove();
            } else {
                $.each(o.buttons, function (index, value) {
                    btn = $('<a class="jmodal-btn" href="">' + index + '</a>');
                    $('.jmodalbox-interface', jModal).append(btn);
                    btn.bind('click', value);
                });
            }

            // fade in box
            $(jModal).find('.jmodalbox-overlay').fadeTo(0, 0);
            $('body').append(jModal);
            $('.jmodalbox-overlay').fadeTo(o.speed, o.opacity, function () {
                $('.jmodalbox-wrap').fadeIn(500);
            });

            // set box positioning
            var bodywidth = $('.jmodalbox-overlay').width() / 2;
            var wrapwidth = $('.jmodalbox-wrap').width() / 2;
            var bodyheight = $('.jmodalbox-overlay').height() / 2;
            var wrapheight = $('.jmodalbox-wrap').height() / 2;
            $('.jmodalbox-wrap').css('left', bodywidth - wrapwidth);
            $('.jmodalbox-wrap').css('top', bodyheight - wrapheight);

            // hide box when
            // wrapper is clicked        
            $('.jmodalbox-overlay').live('click', function () {
                remove_jModalbox();
            });
            // escape key is pressed
            $(document).keypress(function (e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 27) {
                    remove_jModalbox();
                }
            });
        },
        // end init()
        // hide method()     
        hide: function () {
            remove_jModalbox();
        }
    }
})(jQuery);

Примечание: если вы не планируете добавлять больше к hide позже, анонимная оболочка не нужна, вы можете напрямую ссылаться на remove_jModalbox, например:

hide: remove_jModalbox