JQuery Plugin: как изменить размер окна?

Question

Ищете создание моего самого первого JQuery Plugin. В основном вертикально вертикальный 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 not firing within jQuery plugin), но добавление «окна» после $ не решает мою проблему. Как я могу заставить этот плагин работать и с изменением размера окна? Спасибо вам за все!

Отредактировано с ответом ...

Answer 1

Две проблемы здесь

• , что вы претендуете на CSS к window.
• эта часть вашего кода после заявления return.

Заменить

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

с

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

и положить, что перед return заявление.

Answer 2

this в контексте вашего обработчика событий window.resize относится к window. Вы должны сохранить ссылку на внешний this, так что вы можете использовать его в обработчик события:

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

Вы также должны разместить return в конце функции, все после того, как он не выполняет.

Answer 3

Решено: я не пересчитал высоту окна. Это окончательный код. Как вы думаете, правильно?

(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);