Манипулирование DOM с помощью jQuery .resize()

Question

Я хочу изменить порядок элементов в DOM на основе разных размеров браузера.

Я изучил использование intention.js, но считаю, что это может быть излишним для того, что мне нужно (это зависит от underscore.js).

Итак, я рассматриваю с помощью JQuery-х .resize(), но хочу знать, если вы думаете, что-то вроде следующего будет приемлемым, и в соответствии с лучшими практиками ...

var layout = 'desktop'; 
$(window).resize(function() { 
    var ww = $(window).width(); 
    if(ww<=767 && layout !== 'mobile'){ 
     layout = 'mobile'; 
     // Do something here 
    }else if((ww>767 && ww<=1023) && layout !== 'tablet'){ 
     layout = 'tablet'; 
     // Do something here 
    }else if(ww>1023 && layout !== 'desktop'){ 
     layout = 'desktop'; 
     // Do something here 
    } 
}).trigger('resize'); 

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

Answer 1

В практике лучше использовать медиазапросы

Answer 2

СМИ запросы, как правило, предпочтительными. Тем не менее, если я в ситуации, когда я нахожусь в одностраничном приложении, которое во время выполнения имеет много манипуляций, я буду использовать onresize(). Javascript дает вам немного больше свободы работать с динамически устанавливающими контрольные точки (особенно если вы перемещаете элементы внутри дерева DOM с помощью таких вещей, как append()). Установки у вас есть довольно близко к тому, который я использую:

function setWidthBreakpoints(windowWidth) { 
    if (windowWidth >= 1200) { 
     newWinWidth = 'lg'; 
    } else if (windowWidth >= 992) { 
     newWinWidth = 'md'; 
    } else if (windowWidth >= 768) { 
     newWinWidth = 'sm'; 
    } else { 
     newWinWidth = 'xs'; 
    } 
} 

window.onresize = function() { 

    setWidthBreakpoints($(this).width()); 

    if (newWinWidth !== winWidth) { 
     onSizeChange(); 
     winWidth = newWinWidth; 
    } 
}; 

function onSizeChange() { 
// do some size changing events here. 
} 

одна вещь, которую вы не включили, что считается лучшей практики является debouncing function, например, как один ниже представленной Полом ирландцев, который препятствует повторной стрельба события изменения размера в окне браузера:

(function($,sr){ 

    // debouncing function from John Hann 
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 

     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
       if (!execAsap) 
        func.apply(obj, args); 
       timeout = null; 
      }; 

      if (timeout) 
       clearTimeout(timeout); 
      else if (execAsap) 
       func.apply(obj, args); 

      timeout = setTimeout(delayed, threshold || 100); 
     }; 
    } 
    // smartresize 
    jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 

})(jQuery,'smartresize'); 


// usage: 
$(window).smartresize(function(){ 
    // code that takes it easy... 
}); 

Так включать debouncer в вашу функцию изменения размера, и вы должны быть золотыми.

Answer 3

Попробуйте this, я спешу и реорганизую позже.

SCSS:

body, html, .wrapper { width: 100%; height: 100% } 

.sidebar { width: 20%; height: 500px; float: left;  
    &.mobile { display: none } } 

.content { float: right; width: 80% } 

.red { background-color: red } 
.blue { background-color: blue } 
.green { background-color: green } 

@media all and (max-width: 700px) { 
    .content { width: 100%; float: left } 
    .sidebar { display: none 
    &.mobile { display: block; width: 100% } 
    } 
} 

HAML

.wrapper 
    .sidebar.blue 
    .content.red 
    .content.green 
    .sidebar.mobile.blue 

На 700 точках разрывов страниц, боковая панель исчезает и появляется мобильная врезка. Это может быть намного элегантнее, но вы получаете картину.

Единственный возможный недостаток этого подхода - дублирование боковой панели.

Вот и все, нет JS.

Answer 4

ОК, причина моего первоначального вопроса состояла в том, что я не мог найти способ переместить левую боковую панель (которая появляется вначале в HTML), чтобы появиться после содержание на мобильных телефонах.

Несмотря на комментарии, я до сих пор не вижу, как использование медиа-запросов и position или display само по себе позволит надежно решить проблему (может быть, кто-то может привести пример?).

Но, это действительно привело меня к исследованию модели flexbox - display: flex, и поэтому я в конечном итоге использовал это, а особенно свойство flex order, чтобы переупорядочить порядок боковых панелей и области содержимого.

Хороший путеводитель здесь - https://css-tricks.com/snippets/css/a-guide-to-flexbox/