【div Resize】Javascript中 非Window的DOM的onresize事件解决方案
转自:http://blog.csdn.net/cockroach02/article/details/49096999
Javascript 中onresize事件我们会在窗口大小发生改变的时候需要自适应的时候应用上,但是如果是这样的场景呢,那就需要想想其他的解决办法了:
场景1:先上图
页面是上下布局的,通过【上箭头】和【下箭头】控制下部div的大小,需求是:下面的图表需要实现根据DIV来实现图表重绘!
在这种情况下,仅仅有window.onresize的话是不够的,我们需要对监听此DIV的resize从而达到图表的重新绘制功能,贴代码吧:
NormalText Code
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
this is a Jquery plugin function that fire an event when the size of an element changed
//usage $().sizeChanged(function(){}) (function ($) { $.fn.sizeChanged = function (handleFunction) { var element = this; var lastWidth = element.width(); var lastHeight = element.height(); setInterval(function () { if (lastWidth === element.width()&&lastHeight === element.height()) return; if (typeof (handleFunction) == 'function') { handleFunction({ width: lastWidth, height: lastHeight }, { width: element.width(), height: element.height() }); lastWidth = element.width(); |