骨幹視圖窗口大小調整事件

我創建了一個骨幹觀點如下：

var MaskView = Backbone.View.extend({ 
     className: "dropdown-mask", 
     initialize: function(){ 

     }, 
     onClick: function(e){ 

     }, 
     hide: function(){ 

     }, 
     makeCSS: function(){ 
     return { 
      width : Math.max(document.documentElement.scrollWidth, $(window).width()), 
      height : Math.max(document.documentElement.scrollHeight, $(window).height()) 
     } 
     } 
    });

我想要捕捉的窗口視圖中調整的事件。

問題是，當窗口完全加載時，並且從上述骨幹視圖創建掩碼視圖。現在，當我調整窗口大小時，蒙版僅覆蓋部分窗口區域。我希望每次重新加載窗口時，mask都會根據當前窗口大小動態更改其區域。

我該如何做到這一點？

來源

2013-07-26 codeofnode

骨幹依靠jQuery（或zepto）進行DOM操作。 jQuery's .resize()是你正在尋找的事件，所以你寫的東西是這樣的：

var MaskView = Backbone.View.extend({ 
    initialize: function() { 
     $(window).on("resize", this.updateCSS); 
    }, 

    updateCSS: function() { 
     this.$el.css(this.makeCSS()); 
    }, 

    remove: function() { 
     $(window).off("resize", this.updateCSS); 
     Backbone.View.prototype.remove.apply(this, arguments); 
    } 
});

這就是說，我打賭你不需要使用JavaScript這在所有。任何爲什麼一個普通的舊CSS樣式都無法做到這一點的原因？是這樣的：

.dropdown-mask { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
}

來源

2013-07-26 14:04:43

我不知道，僅在那裏被固定在純CSS方式如果窗口是有一定的尺寸，然後把它滾動，改變內容的大小，以保持下一個最小當寬高比？ – FlavorScape

@FlavorScape你可能可以通過在CSS中使用媒體查詢來實現這一點，以根據屏幕大小更改屬性。查看[這個問題]的答案（http://stackoverflow.com/questions/13550541/media-min-width-max-width） –

骨幹視圖窗口大小調整事件

回答

相關問題