Javascript jQuery插件初始化

我不熟悉为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');
        }
    }
});

我是否总是需要使用

返回this.each（）

来启动该方法，即使我知道插件不会迭代任何元素

多谢各位

Pluginplugin的源代码

（函数（$）{
//拆下modalbox
函数removejmodalbox（）{
$（'.jmodalbox'）.fadeOut（'slow'，function（）{
$（'.jmodalbox'）.remove（）；
});
}
//应用方法
$.fn.jModalbox=函数（方法）{
if（方法[方法]）{
返回方法[method].apply（this，Array.prototype.slice.call（arguments，1））；
}else if（typeof方法=='object'| |！方法）{
return methods.init.apply（这是参数）；
}否则{
$.error（'Method'+Method+'在jQuery.jModalbox上不存在'）；
}
};
var方法={
//init（）方法
init：函数（选项、回调）{
//默认选项
var默认值={
速度:500,，
内容：“内容”，
不透明度：0.5，
按钮：错误
};
var options=$.extend（默认值，选项）；
var o=期权；
$（'.jmodalbox wrap.jmodal btn'）.live（'click'，function（）{
返回false；
});
//返回
返回此。每个（函数（）{
var obj=$（本）；
//设置jModal对象
var jModal=$（''）；
jModal.append（$（''）；
jModal.append（$（''）；
jModal.find（'.jmodalbox wrap'）.append（$（''）；
jModal.find（'.jmodalbox'）.append（$（''）；
jModal.find（'.jmodalbox'）.append（$（''）；
jModal.find（'.jmodalbox content'）.html（o.content）；
//设置按钮
如果（！o.按钮）{
（jModal.find（'.jmodalbox接口'）.remove（）；
}否则{
$。每个（o.按钮、功能（索引、值）{
btn=$（''）；
$（'.jmodalbox接口'，jModal）.append（btn）；
btn.bind（'click'，值）；
});
}
//淡入框
$（jModal.find（'.jmodalbox overlay'）.fadeTo（0,0）；
$（'body'）.append（jModal）；
$（'.jmodalbox overlay'）.fadeTo（o.speed，o.opacity，function（）{
$（'.jmodalbox wrap'）.fadeIn（500）；
});
//设置框定位
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'，车身高度-wrapheight）；
//隐藏框时
//单击包装器
$（'.jmodalbox overlay'）.live（'click'，函数（）{
移除jModalbox（）；
});
//按下退出键
$（文档）。按键（功能（e）{
var代码=（e.keyCode？e.keyCode:e.which）；
如果（代码==27）{
移除jModalbox（）；
}
});
});
},
//end init（）
//隐藏方法（）
隐藏：函数（）{
移除jModalbox（）；
}
}
})（jQuery）；

对于

返回此。each（）

零件…不，您不必

返回

，但它是用于链接目的，例如：

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

如果你不希望你的插件是可链接的，你可以返回任何你想要的。即使在方法内部，它也可能不同，一些方法已经在集合上运行，例如：

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

或

这两种方法都是返回jQuery集的方法的示例……如果这些方法是可链接的，则可以返回这些方法的结果，除非需要，否则不需要迭代

---

对于

$.fn.jModalbox

与

$.jModalbox

相比，您所需要做的就是在插件中更改它，并且不再返回任何内容或使用，如下所示：

/*

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

---

@atif089-那么哪些元素会变成对话框？第二种方法没有多大意义…我在插件内部创建它，请检查行

//setupjmodal object

。。最终，除了在

@atif089中添加模式之外，我不需要文档的DOM中的任何东西。我更新了答案，以展示如何做到这一点……没有你的样式，我无法制作出一个像样的演示，但那应该可以。@atif089-啊，不得不删除它，收到了太多的抱怨：）@atif089挖掘一篇旧帖子，这是我见过的最好的jquery模式示例。您是否仍在使用jmodalbox的映像？我很想看看你是如何设计元素的。

/*

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