重写resize方法,监听html标签大小的改变

来源:互联网 发布:加工中心编程100例图 编辑:程序博客网 时间:2024/05/16 11:53
jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了。怎么办呢,这里给大家推荐一个jquery的小插件,相当于是对默认的resize事件的增强版本jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了。怎么办呢,这里给大家推荐一个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元素的尺寸改变时做相应的逻辑处理。
0 0
原创粉丝点击