Question

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

注意：另请注意，事件处理程序附加到正文和文档容器，这些容器存在于使用插件创建的Modal窗口之外。我知道为了向插件添加内容，我可以将方法附加到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 );

Answer 1

只需在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();
        }
    });
}

jQuery插件 - 添加功能

1 个答案: