使用jQuery .resize()操作DOM
使用jQuery .resize()操作DOM
提问于 2015-02-24 01:48:54
我想根据不同的浏览器大小更改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变量中，以便仅在窗口进入下一个断点时触发函数。
回答 4
Stack Overflow用户
发布于 2015-02-24 02:12:38
媒体查询通常是优选的。但是，如果我处于运行时有大量操作的单页面应用程序中，我将使用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，例如下面由Paul爱尔兰提供的，它可以防止在浏览器窗口中重复触发调整大小事件：
(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...
});因此，在你的resize函数中加入一个去保留器，你应该是金色的。
Stack Overflow用户
发布于 2015-02-24 01:58:11
在实践中最好使用媒体查询
Stack Overflow用户
发布于 2015-02-24 03:41:29
试试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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28680058
复制相关文章
相似问题
腾讯云开发者
