jQuery之關(guān)于resize()方法的使用
jQuery resize() 方法使用
$(window).resize(function(){
$('span').text(x+=1);
})定義和用法
當(dāng)調(diào)整瀏覽器窗口大小時(shí),發(fā)生resize 事件。
resize() 方法觸發(fā) resize 事件,或規(guī)定當(dāng)發(fā)生 focus 事件時(shí)運(yùn)行的函數(shù);
jQuery的resize方法擴(kuò)展,支持window對(duì)象以外的dom元素
現(xiàn)在有一個(gè)需求,當(dāng)窗口或者容器高度發(fā)生變化時(shí),更新滾動(dòng)條,滾動(dòng)條插件使用的是 jQuery.NiceScroll,需要同時(shí)監(jiān)聽(tīng) window 對(duì)象 和 div 容器的 resize 事件。
事實(shí)上,jQuery 官方是有 $(window).resize() 事件的,只不過(guò)只能監(jiān)聽(tīng) window 對(duì)象,下面是方法代碼,請(qǐng)?jiān)谝?jQuery 之后使用!
代碼示例
// 監(jiān)聽(tīng)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();
})總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開(kāi)/折疊子節(jié)點(diǎn)
今天客戶提出要點(diǎn)擊菜單(TreeView實(shí)現(xiàn)的)的父級(jí)節(jié)點(diǎn)時(shí),展開(kāi)節(jié)點(diǎn),很多新手朋友可能對(duì)此會(huì)很陌生,接下來(lái)介紹解決方法,感興趣的朋友可以了解下2013-01-01
Jquery 獲取checkbox的checked問(wèn)題
這個(gè)郁悶了,今天寫(xiě)這個(gè)功能的時(shí)候發(fā)現(xiàn)了問(wèn)題,上網(wǎng)找了好多資料對(duì)照,更加糾結(jié)2011-11-11
jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多,但是這個(gè)輪子我還是繼續(xù)做一個(gè),因?yàn)檫@個(gè)表單驗(yàn)證插件是從我以前的個(gè)人JS框架移值過(guò)來(lái)的(我已慢慢投入jQuery的懷抱),并且它的驗(yàn)證規(guī)則書(shū)寫(xiě)方式也許會(huì)讓你眼前一亮。2009-12-12
jQuery元素屬性操作實(shí)例(設(shè)置、獲取及刪除元素屬性)
這篇文章主要介紹了jQuery元素屬性操作的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的設(shè)置、獲取及刪除等操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery input checked全選與反選1.3.2的版本
jquery 全選與反選1.3.2的版本2009-05-05
jQuery模仿ToDoList實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表
這篇文章主要介紹了jQuery模仿ToDoList實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
jQuery解析XML與傳統(tǒng)JavaScript方法的差別實(shí)例分析
這篇文章主要介紹了jQuery解析XML與傳統(tǒng)JavaScript方法的差別,實(shí)例分析了jQuery與javascript解析XML文件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery的顯示和隱藏方法與css隱藏的樣式對(duì)比
display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái),而jQuery的顯示和隱藏又有哪些方法,在本文將為大家詳細(xì)介紹下,感興趣的朋友不要錯(cuò)過(guò)2013-10-10

