注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Computer Science

I Pressed My Words Here. Will You Read ?

 
 
 

日志

 
 

DOM resize event  

2012-09-06 17:50:22|  分类: My Projects |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
参考代码来源:
Monitoring-DOM-Properties_James.Padolsey http://james.padolsey.com/javascript/monitoring-dom-properties/

根据其代码修改后,得到基于JQuery的监控页面元素尺寸变化的代码:
通用监控代码:
 1 void function() {
 2         jQuery.fn.watchcss = function(propertyNameAry, fn) {
 3                 if(typeof propertyNameAry === 'string'){
 4                     propertyNameAry = [propertyNameAry];
 5                 }
 6                 return this.each(function() {
 7                         var self = this;
 8                         var $self = $(self);
 9                         var oldValObj= {};
10                         var propertyNameAryLength = propertyNameAry.length;
11                         while(propertyNameAryLength-->0){
12                             var propertyName = propertyNameAry[propertyNameAryLength];
13                              oldValObj[propertyName] = $self.css(propertyName);
14                         }
15                         $self.data('watch_css__' + propertyNameAry.join('_') + '__timer', setInterval(function() {
16                                 var propertyNameAryLength = propertyNameAry.length;
17                                 var changedFlag = false;
18                                 var changedCSSPropObj = {};
19                                 while(propertyNameAryLength-->0){
20                                     var propertyName = propertyNameAry[propertyNameAryLength];
21                                     if (oldValObj[propertyName] !== $self.css(propertyName)) {
22                                             changedFlag = true;
23                                             changedCSSPropObj[propertyName] = $self.css(propertyName);
24                                     }
25                                 }
26                                 if(changedFlag===true){
27                                     fn.call(self, propertyNameAry, oldValObj, changedCSSPropObj);
28                                     $.extend(oldValObj,changedCSSPropObj);
29                                 }
30                         }, 500));
31                 });
32                 return self;
33         };
34         jQuery.fn.unwatchcss = function(propertyNameAry) {
35                 return this.each(function() {
36                         clearInterval($(this).data('watch_css__' + propertyNameAry.join('_') + '__timer'));
37                 });
38         };
39         jQuery.fn.sizechange = jQuery.fn.sizeChange = function(fn) {
40                 return this.on('sizechange', fn);
41         };
42         jQuery.event.special.sizechange = {
43                 setup: function() {
44                         jQuery(this).watchcss(['width','height'], function() {
45                                 jQuery.event.handle.call(this, {
46                                         type: 'sizechange'
47                                 });
48                         });
49                 }
50                 ,teardown: function() {
51                         jQuery(this).unwatchcss(['width','height']);
52                 }
53         };
54 }();
接下来在代码中这样使用:
1 $('#myDIV').on('sizechange',function(){alert('Hello');});
或者
2 $('#myDIV').sizeChange(function(){alert('Hello Again');});
便可以了。
computerScience推荐阅读:
  评论这张
 
阅读(763)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017