2013-07-26 2 views
3

Я использую режим Backbone в javascript.событие изменения размера окна для получения позвоночника

Я создал представление магистрального следующим образом:

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

я хочу, чтобы захватить событие изменения размера окна внутри вида.

Проблема заключается в том, что когда окно полностью загружено, а вид маски создается из вышеуказанного базового представления. Теперь, когда я изменяю размер окна, маска покрывает только частичную область окна. Я хочу, чтобы каждый раз, когда окно перезагружается, маска также динамически изменяет свою область в соответствии с текущим размером окна.

Как достичь этого?

ответ

18

Магистраль полагается на 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; 
} 
+0

Я не знаю, есть ли чистый способ CSS, который можно исправить только в том случае, если окно имеет определенный размер, а затем прокручивать и изменять размер содержимого, чтобы поддерживать соотношение сторон при минимальном значении? – FlavorScape

+1

@FlavorScape Возможно, вы можете реализовать это, используя медиа-запросы в CSS, чтобы изменить свойства на основе размера экрана. См. Ответ для [этого вопроса] (http://stackoverflow.com/questions/13550541/media-min-width-max-width) –

Смежные вопросы