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()来启动该方法吗？

谢谢

Pluginplugin的源代码

(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 vs $.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

jQuery插件init

Pluginplugin的源代码

1 个答案: