怎样给div增加resize事件
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
怎样给div增加resize事件
当浏览器窗⼝被调整到⼀个新的⾼度或宽度时,就会触发resize事件,这个事件在window上⾯触发,那么如何给div元素增加resize事件,监听div的⾼度或宽度的改变呢?
先来回答另⼀个问题,监听div的⾼度变化⼜有什么⽤呢?⼀般⽽⾔div的⾼度是随着内容的增加⽽⾃适应的,对于ajax请求的数据还没有加载时,此时div的内容为空,在ajax数据返回后,div的⾼度就⾃然会⾃适应内容⽽增⾼了,监听这个变化也就等同于知道ajax请求类的promise什么时候返回数据,就可以不在ajax数据服务回调中处理其它⾮数据服务相关的逻辑了,也在⼀定程度上降低了数据服务和其它业务的耦合性。
某位⼤神⽤jquery实现的⽅法,这样就可以 $('div').resize(function(){ .. })直接使⽤了;
(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);。