• 怎样给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);
  • 相关阅读:
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1159 Common Subsequence
    HDU 1003 Maxsum
    HDU 2604 Queuing
    HDU 2045 不容易系列之(3)—— LELE的RPG难题
    HDU 2501 Tiling_easy version
    HDU 2050 折线分割平面
    HDU 2018 母牛的故事
    HDU 2046 骨牌铺方格
    HDU 2044 一只小蜜蜂...
  • 原文地址:https://www.cnblogs.com/weboey/p/6014966.html
Copyright © 2020-2023  润新知