jquery resize和onresize方法监听非window的DIV等dom元素的变化无效!解决办法

查了老半天,终于找到有解决方案!


转如下:


jquery 默认的resize只能监听到浏览器窗口大小的改变,window.onresize也一样!

但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize/onresize就无能为力了。

怎么办呢?

解决方法:

这里给大家推荐一个jquery的小插件,相当于是对默认的resize事件的增强版本。

它可以监听几乎所有标签的大小改变来做相应的处理。

 将以下代码复制到你的js文件中

(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);

在代码里面我们可以直接使用  $("#div").resize(function(){...});   来实现监听 id为div元素的尺寸改变时做相应的逻辑处理。


=========

试了一下,果然很有效!

不过,据说可能会和其它的JS库有冲突,

用后留个心眼,别满地找bug! ^_^



如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=51

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。