[jQuery]resize事件控制响应式

INLOSIM主题基本完工记录一下

有比较多细碎的位置要用到resize()方法。当调整浏览器窗口的大小时,发生 resize 事件。所以响应式改变页面/窗口分辨率大小时可以用它来执行某些函数/动作,当然使用js来去做这些效率不及css来得快,而要涉及到事件的执行就只能用js了。


主题刚完成左侧导航和播放器时有许多的问题,比如:

  • 播放器在低分辨率下原来用css是display:none的,不过仅仅是隐藏,并没有关闭,需要用hide()移除掉;
  • 在分辨率由小变大后若是js控制了导航菜单隐藏那么就不会自动显示;
  • 低分辨率下点击显示菜单后再点击a标签或者空白处菜单不会自动隐藏;
  • 切换到高分辨率则不需要这个功能 ,等等。

很多要用resize下的分辨率窗口宽度判断来完成。下面是细节:

// 点击侧栏菜单后菜单自动隐藏
function autohide_nav(){
$("#nav ul a,#main").click( // 点击菜单a标签或者#main 则执行
    function(){
    if ($(window).width() < 700) {
        $("#nav").hide().animate({"left" : "-215px"},20);
        $("#main").animate({ marginLeft: 0, marginRight: 0}, 20);
    }
    });
}
// 响应式局部控制 
function setLayout() {
    var windowWidth = $(window).width();
    if (windowWidth < 700) { // 窗口宽度小于700时
        $("#html5player").remove();  // 移除播放器
        $("#nav .navbar-brand").hide();  // 隐藏导航上的网站名
    } else {
        $("#nav .navbar-brand").show();  // 显示导航上的网站名
        if( $("#main").css('margin-right') == '-215px' ){ $("#main").css('margin-right','0'); } // 解决分辨率变大时#main因为导航右推而溢出容器的bug
        if( $("#nav").css('left') == '-215px' ){ $("#nav").show().css('left','auto');$("#main").css('margin-left','210px'); } // 解决分辨率变大时#nav不出现的bug
    }
}
// 窗口分辨率动态改变的同时执行函数
$(window).bind('resize',
function() {
    autohide_nav(); // 点击侧栏菜单后菜单自动隐藏
    setLayout(); // 执行窗口变化函数
});

原本autohide_nav()函数并没有用到条件判断去执行内部动作,而是整个放在了setLayout()里面的windowWidth

赞(0)