Ищете создание моего самого первого 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 не срабатывает в плагине jQuery), но добавление "окна" после $
не решает мою проблему. Как я могу заставить этот плагин работать и с изменением размера окна? Спасибо вам за все!
Отредактировано с ответом...
this
в контексте вашего window.resize
события window.resize
относится к window
. Вы должны сохранить ссылку на внешнее this
, так что вы можете использовать его в обработчик события:
...
var $this = $(this);
$(window).resize(function() {
$this.css('margin-top',$marginTop+'px');
});
...
Вы также должны поместить свое return
в конце функции, все после того, как оно не будет выполнено.
Две проблемы здесь
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
.
Решено: я не пересчитал высоту окна. Это окончательный код. Как вы думаете, правильно?
(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);
$(this)
как $this
, который может содержать несколько элементов. И затем вы привязываете window.resize
события window.resize
для каждого события, но внутри этого обработчика вы применяете CSS ко всем элементам объекта $this
. Я бы либо создал переменную $this
в .each()
либо window.resize
к window.resize
только один раз. Кроме того, обычно запуск переменной с $
в проекте, который использует jQuery, означает, что переменная является объектом jQuery.