0

あなたが私の英語を理解してくれることを願っています。

Jquery パターン "Lightweight" を使用してみます ( http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ )

しかし、call メソッドとこれのスコープに問題があります。

テーブルにプラグインをバインドします:

    $("#tableSurface0").flexTab();
    $("#tableSurface1").flexTab();

私のJqueryプラグイン:

;(function ( $, window, document, undefined ) {


    var pluginName = 'flexTab',
        defaults = {
            wrapOverflowHeight : true
        };

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

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

        this.init();
    }

    Plugin.prototype.init = function () {
        $("th:not([noflex])", this.element).on("mousedown", menuContextuel);
    };

    menuContextuel = function(event)
    {
        //BUG
        console.log( ?? ); // show this.element of constructor
    }

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

したがって、イベント ハンドラにデータを追加せずに、menuContextuel 関数で this.element を呼び出すことはできません。

Plugin.prototype.init = function () {
    $("th:not([noflex])", this.element).on("mousedown", { table:this.element }, menuContextuel);
};
...
menuContextuel = function(event)
{
   console.log( event.data.table );
}

彼は別の解決策を持っていますか?

ありがとうございました

4

1 に答える 1