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 に答える