0

私の最初の Jquery プラグインを作成しようとしています。基本的に、空白ページの div を垂直方向に中央揃えにします。

    (function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var $heightDiv      = $this.height();
        var $heightWindow   = $(window).height();
        var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
        var applyMargin     = function() {
            $this.css('margin-top',$marginTop+'px');
            console.log($heightWindow);
        }
        $(window).resize(applyMargin);
        applyMargin();
        return $this;
    }; // fn.centerdiv
})(jQuery);

「ウィンドウのサイズ変更」では機能しますが、機能しません。別の回答 ( jQuery $(window).resize が jQuery プラグイン内で起動しない)が見つかりましたが、後に「window」を追加$しても問題は解決しません。このプラグインをウィンドウのサイズ変更でも機能させるにはどうすればよいですか? 皆さんありがとうございます！

回答で編集...

4

3 に答える 3

2

thiswindow.resizeイベント ハンドラーのコンテキストでは、を参照しwindowます。thisイベントハンドラー内で使用できるように、アウターへの参照を保存する必要があります。

...
var $this = $(this);
    $(window).resize(function() {
        $this.css('margin-top',$marginTop+'px');
    });
...

また、関数の最後に your を配置する必要がありますreturn。それ以降はすべて実行されません。

于 2013-10-04T19:34:41.803 に答える
0

解決済み: ウィンドウの高さを再計算しませんでした。これは最終的なコードです。それは正しいと思いますか？

(function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var calculateMargin = function() {
            var $heightDiv      = $this.height();
            var $heightWindow   = $(window).height();
            var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
            return $marginTop;  
        }
        return this.each(function() {
            var $marginTop = calculateMargin();
            $this.css('margin-top',$marginTop+'px');
            $(window).resize(function() {
                var $marginTop = calculateMargin();
                $this.css('margin-top',$marginTop+'px');
            });
        }); 
    }; // fn.centerdiv
})(jQuery);
于 2013-10-04T20:06:52.567 に答える