怎樣給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);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM