本文转载自: 锐想Magento » jQuery获取浏览器大小并绑定事件
在一个自适应宽度布局的项目中,用到了jQuery监听浏览器大小的事件。项目中的一个需求是,当浏览器宽度大于1200px时,将.page的宽度设置为1200,当浏览器宽度小雨1000px的时候,将.page的宽度设置为1000px。看上去非常简单的一个需求,实际作用却非常大。
首先,jQuery监听浏览器大小变化使用resize()方法,代码如下所示。通过在$(window)行绑定resize,jQuery会随时获取浏览器的高度和宽度,通过这些数值的不断变化,分别做相应的操作。
jQuery(window).bind("resize", changeLayout);
function changeLayout( e ) {
var winHeight = jQuery(window).height();
var winWidth = jQuery(window).width();
if( winWidth > 1200) {
jQuery('.page').css('width', '1200px');
jQuery('.col1-layout .product-view .product-shop').css('width', '49%');
} else {
jQuery('.page').css('width', '1000px');
jQuery('.col1-layout .product-view .product-shop').css('width', '39%');
}
}
完成上述代码之后,如果运行起来,会发现一个问题,在刚打开页面未促发浏览器resize事件之前,.page是不存在任何样式的,那么,我们需要DOM读取完毕之后,就立刻获取当前浏览器的宽度,并为.page赋值。代码如下。
jQuery(document).ready(function(){
var winWidth = jQuery(window).width();
if( winWidth > 1200) {
jQuery('.page').css('width', '1200px');
jQuery('.col1-layout .product-view .product-shop').css('width', '49%');
} else {
jQuery('.page').css('width', '1000px');
jQuery('.col1-layout .product-view .product-shop').css('width', '39%');
}
})
实际上,这篇文章只是自适应布局的一个很小很小的技术应用,稍后会将Magento自适应布局的整体思路放出。