jQuery之關于resize()方法的使用
jQuery resize() 方法使用
$(window).resize(function(){ $('span').text(x+=1); })
定義和用法
當調(diào)整瀏覽器窗口大小時,發(fā)生resize 事件。
resize() 方法觸發(fā) resize 事件,或規(guī)定當發(fā)生 focus 事件時運行的函數(shù);
jQuery的resize方法擴展,支持window對象以外的dom元素
現(xiàn)在有一個需求,當窗口或者容器高度發(fā)生變化時,更新滾動條,滾動條插件使用的是 jQuery.NiceScroll,需要同時監(jiān)聽 window 對象 和 div 容器的 resize 事件。
事實上,jQuery 官方是有 $(window).resize() 事件的,只不過只能監(jiān)聽 window 對象,下面是方法代碼,請在引入 jQuery 之后使用!
代碼示例
// 監(jiān)聽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);
使用方法:
$('#scrollBox').niceScroll(); $('#scrollBox').resize(function() { ?? ?// 容器尺寸發(fā)生變化后執(zhí)行的事件 ?? ?$('#scrollBox').getNiceScroll().resize(); })
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jQuery設置聚焦并使光標位置在文字最后的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query設置聚焦并使光標位置在文字最后的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jQuery動態(tài)添加 input type=file的實現(xiàn)代碼
有時候需要在頁面上允許用戶上傳多個文件,個數(shù)由用戶自己決定,個數(shù)多了也可以刪除,使用jQuery可以很簡單的實現(xiàn)這個功能2012-06-06JQuery Ajax WebService傳遞參數(shù)的簡單實例
下面小編就為大家?guī)硪黄狫Query Ajax WebService傳遞參數(shù)的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery EasyUI tree增加搜索功能的實現(xiàn)方法
擴展jQuery EasyUI tree搜索樹節(jié)點的方法,使其支持節(jié)點名稱的模糊匹配,將不匹配的節(jié)點隱藏。下面通過本文給大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以參考下2017-04-04jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.2016-05-05