Плагин Jquery: как использовать изменение размера окна?

0

Ищете создание моего самого первого 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), но добавление "окна" после $ не решает мою проблему. Как я могу заставить этот плагин работать и с изменением размера окна? Спасибо вам за все!

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

Теги:

3 ответа

2

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

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

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

2

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

  • что вы применяете 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.

  • 0
    Отредактированный код с вашим ответом, но он не изменяется с окном. Я сделал другую ошибку? большое спасибо
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);
  • 0
    Если это работает, то это правильно :)
  • 0
    Вы делаете больше работы, чем необходимо. Вы кэшируете $(this) как $this , который может содержать несколько элементов. И затем вы привязываете window.resize события window.resize для каждого события, но внутри этого обработчика вы применяете CSS ко всем элементам объекта $this . Я бы либо создал переменную $this в .each() либо window.resize к window.resize только один раз. Кроме того, обычно запуск переменной с $ в проекте, который использует jQuery, означает, что переменная является объектом jQuery.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню