使用jQuery調整DOM .resize（）

我想根據不同的瀏覽器大小更改DOM中元素的順序。使用jQuery調整DOM .resize（）

我已經研究過使用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變量中的當前佈局，以便只在窗口進入下一個斷點時觸發這些函數。

來源

2015-02-23 pavsid

CSS媒體查詢似乎是一個更好的選擇，這取決於你實際上在做什麼？ – adeneo 2015-02-23 17:50:31

我基本上是在移動設備上的主要內容之後移動左邊欄，所以它出現在屏幕的底部而不是頂部。不確定這可以通過單獨的媒體查詢來實現嗎？ – pavsid 2015-02-23 17:55:25

我同意adeneo，我認爲你應該使用媒體查詢 – 2015-02-23 17:58:24

在實踐中最好使用媒體查詢

來源

2015-02-23 17:58:10 DarkteK

有時，如果您在運行時更改媒體查詢，使用javascript是一個更好的主意。 – Conor 2015-02-23 17:59:48

如何使用媒體查詢來移動DOM上的元素？假設在桌面上出現在DOM中的主要內容之前的左邊欄出現在移動設備上的主要內容之後？ – pavsid 2015-02-23 18:09:58

@pavsid你只是改變CSS顯示和邊欄及其鄰居的位置。把時間花在制訂html和css結構上，你不會有這個問題。 – Drops 2015-02-23 18:12:35

媒體查詢通常較好。但是，如果我處於運行時有很多操作的單頁應用程序中，我將使用onresize（）來代替。 Javascript爲您提供了更多的動態設置斷點的自由（特別是如果您正在使用append（）等東西移動DOM樹內的元素時）。您有安裝是非常接近我使用的一個：

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，如保羅·愛爾蘭下面提供的一個，這可防止重複resize事件的瀏覽器窗口中燒：

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

所以結合了去抖到您的調整大小功能，你應該是金色的。

來源

2015-02-23 18:12:38 Conor

感謝@Conor，這真的很有幫助。雖然我目前正在使用flexbox模型測試一個僅使用CSS的方法。將回報！ – pavsid 2015-02-23 18:21:19

嘗試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。

來源

2015-02-23 19:41:29 Drops

好吧，我原來的問題的原因是因爲我找不到移動左側邊欄（首先出現在HTML中）出現後手機上的內容的方式。

儘管有這些意見，但我仍然無法看到如何單獨使用媒體查詢和單獨的position或display可靠地解決問題（也許有人可以舉個例子？）。

但是，它確實導致我調查flexbox模型 - display: flex，所以我最終使用了該功能，特別是flex的order屬性來重新排列側邊欄和內容區域的順序。

在這裏很好的指導 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2015-03-05 13:30:14 pavsid

使用jQuery調整DOM .resize（）

回答

相關問題