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();
})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

最新评论

?


http://www.vxiaotou.com