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 < 700 ,但发现分辨率变大后点击菜单还是会自动隐藏,暂时查不到原因所以只能拿出来另作判断了。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4491.html