跨境电商
经验交流分享

jQuery获取浏览器大小并绑定事件

在一个自适应宽度布局的项目中,用到了jQuery监听浏览器大小的事件。项目中的一个需求是,当浏览器宽度大于1200px时,将.page的宽度设置为1200,当浏览器宽度小雨1000px的时候,将.page的宽度设置为1000px。看上去非常简单的一个需求,实际作用却非常大。

首先,jQuery监听浏览器大小变化使用resize()方法,代码如下所示。通过在$(window)行绑定resize,jQuery会随时获取浏览器的高度和宽度,通过这些数值的不断变化,分别做相应的操作。

[javascript]
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%’);
}
}
[/javascript]

完成上述代码之后,如果运行起来,会发现一个问题,在刚打开页面未促发浏览器resize事件之前,.page是不存在任何样式的,那么,我们需要DOM读取完毕之后,就立刻获取当前浏览器的宽度,并为.page赋值。代码如下。

[javascript]
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%’);
}
})
[/javascript]

实际上,这篇文章只是自适应布局的一个很小很小的技术应用,稍后会将Magento自适应布局的整体思路放出。

赞(0)
未经允许不得转载:锐想 » jQuery获取浏览器大小并绑定事件
分享到: 更多 (0)

评论 2

评论前必须登录!

 

  1. #1

    博主怎么还有一个http://www.ruiwant.com/wp-admin没有安装啊。
    还有会报500错误 啊。

    芬芬杨杨6年前 (2012-12-04)
    • 最近博客在升级VPS~~有些不太稳定~~非常感谢~~

      ruiwant6年前 (2012-12-04)

锐想电商 - 跨境电商经验交流分享

锐想无限