1

我有一个使用流行插件模式的 jquery 插件。该插件打开一个模态窗口，也可以关闭模​​态窗口。我还想添加更多功能，例如通过按退出键关闭窗口或通过单击模式外部关闭窗口。如何将此新代码集成到插件中？

注意：还要注意，事件处理程序附加到使用插件创建的模态窗口之外的正文和文档容器。我知道为了向插件添加东西，我可以将方法附加到 Plugin.prototype.xxx。我可以在这里做同样的事情还是我们应该以不同的方式处理这种情况？

//press 'Esc' key - hide Modal
        $('body').bind('keydown', function(e) {
            if (e.keyCode == 27) { // "Esc" Key
                   if ( $('.show').is(':visible') ) {
                       $('.Close').click();
                   }  
                   return false;
            }
        });

        //click outside Modal - hide Modal
        $(document).mouseup(function (e){
            var container = $(".Window");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                 $('.Close').click();
            }
        });

我用于插件的流行插件模式：

;(function ( $, window, document, undefined ) {
    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {

    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );
4

1 回答 1

0

只需在 init 方法中添加代码，但请确保您只针对所需的元素。

Plugin.prototype.init = function(){
    this.bindEventHandlers();
}
Plugin.prototype.bindEventHandlers = function(){
    var self = this;

    $('body').bind('keydown', function(e) {
        if (e.keyCode == 27) { // "Esc" Key
               if ( $('.show', self.element).is(':visible') ) {
                   $('.Close', self.element).click();
               }  
               return false;
        }
    });

    //click outside Modal - hide Modal
    $(document).mouseup(function (e){
        var container = $(".Window", self.element);
        if (!container.is(e.target) && container.has(e.target).length === 0){
             $('.Close', self.element).click();
        }
    });
}
于 2012-12-27T16:32:15.193 回答