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

这里有两个问题

  • 您正在将 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声明之前。

于 2013-10-04T19:33:35.140 回答
2

this在您的window.resize事件处理程序的上下文中指的是window. 您应该存储对外部的引用，this以便您可以在事件处理程序中使用它：

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

您还需要将您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 回答