jQuery plugin init_问答_开发者_运维开发者技术经验分享

I am new to writing plugins for jQuery. Below is the source for the plugin that I have written. The plugin works fine but there are some things that I would like to know.

To initiate the plugin you have to use,

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

However, I would like to make it to work like this

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

and also do I always need to use return this.each() to initiate the method even if I know that the plugin is not going to iterate over any element?

Thank You

Source Code for the 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 = $.ext开发者_开发知识库end(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);

For the return this.each() part...no you don't have to return that, it's for chaining purposes though, e.g.:

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

If you don't want your plugin to be chainable, you can return whatever you want. Even inside the method it can be different, some methods operate on sets already, for example it could be:

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

return this.addClass("myClass");

Both of those are examples of methods that return jQuery sets...if those methods are chainable you can return the result of those, there's no requirement to iterate over with .each() unless you need to.

For the $.fn.jModalbox vs $.jModalbox, all you need do is change that in your plugin and don't return anything or use .each() anymore, like this:

/*

******************************            
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);

A side note: unless you plan to add more to hide later, there's no need for the anonymous wrapper, you can reference remove_jModalbox directly, like this: