欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery之關(guān)于resize()方法的使用

 更新時間：2023年07月04日 10:44:32   作者：舉個不聽話的栗子  
這篇文章主要介紹了jQuery之關(guān)于resize()方法的使用，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

jQuery resize() 方法使用

$(window).resize(function(){ 
    $('span').text(x+=1);
 })

定義和用法

當(dāng)調(diào)整瀏覽器窗口大小時，發(fā)生resize 事件。

resize() 方法觸發(fā) resize 事件，或規(guī)定當(dāng)發(fā)生 focus 事件時運(yùn)行的函數(shù);

jQuery的resize方法擴(kuò)展，支持window對象以外的dom元素

現(xiàn)在有一個需求，當(dāng)窗口或者容器高度發(fā)生變化時，更新滾動條，滾動條插件使用的是 jQuery.NiceScroll，需要同時監(jiān)聽 window 對象 和 div 容器的 resize 事件。

事實(shí)上，jQuery 官方是有 $(window).resize() 事件的，只不過只能監(jiān)聽 window 對象，下面是方法代碼，請?jiān)谝?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();
})

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論