使用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（）

回答

相关问题