jQuery之关于resize()方法的使用
更新时间:2023年07月04日 10:44:32 作者:举个不听话的栗子
这篇文章主要介绍了jQuery之关于resize()方法的使用,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
jQuery resize() 方法使用
$(window).resize(function(){ $('span').text(x+=1); })
定义和用法
当调整浏览器窗口大小时,发生resize 事件。
resize() 方法触发 resize 事件,或规定当发生 focus 事件时运行的函数;
jQuery的resize方法扩展,支持window对象以外的dom元素
现在有一个需求,当窗口或者容器高度发生变化时,更新滚动条,滚动条插件使用的是 jQuery.NiceScroll,需要同时监听 window 对象 和 div 容器的 resize 事件。
事实上,jQuery 官方是有 $(window).resize() 事件的,只不过只能监听 window 对象,下面是方法代码,请在引入 jQuery 之后使用!
代码示例
// 监听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() { ?? ?// 容器尺寸发生变化后执行的事件 ?? ?$('#scrollBox').getNiceScroll().resize(); })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
基于$.ajax()方法从服务器获取json数据的几种方式总结
下面小编就为大家分享一篇基于$.ajax()方法从服务器获取json数据的几种方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论