(轉)jquery 監聽div大小變化函式|div resize事件
阿新 • • 發佈:2018-12-27
https://blog.csdn.net/mengzhengjie/article/details/72829828 (原文連結)
視窗有大小改變的監聽事件,卻不適用於div
window.onresize = function(){}
如下 是監聽div大小變化的jquery擴充套件,通過這個函式擴充套件jquery,使div也具有和視窗一樣的resize功能
//監聽div大小變化 (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);
呼叫方法:
$("#divID").resize(function(){
//當id為divID的div大小變化時的處理函式寫在這裡.....
//當然了#divID只不過是id選擇器,你也可以換成任何jquery的選擇器......
});
案例:專案需要echarts圖自適應外部div
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
myChart.resize();
//根據div的大小變動圖表 ---
$("#DIVxxxxID").resize(function(){
myChart.resize();
});
//根據視窗的大小變動圖表 ---
window.onresize = function(){
myChart.resize();
}