jquery事件听取位置的变化

前端之家收集整理的这篇文章主要介绍了jquery事件听取位置的变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要倾听元素的相对位置.这对动态布局问题特别有用.没有选项可以监听偶数position()或offset()属性的CSS样式.

为什么:@H_301_3@如果兄弟在对话框或表单中更改其维度(重新布局),则相对位置可能会发生变化.因此,对于交互式表格,这可以帮助使用,即父母的最大可用高度或宽度或类似的东西.

解决方法

自定义jquery扩展通过计时器轮询侦听对象位置. I.m.o.没有计时器就没有办法解决这个问题,因为在没有调用jquery的情况下可以改变位置(即重新布局兄弟元素).此解决方案监视元素.position()和.offset()值.可以很容易地改进以观察.css()样式或jQuery事件未涵盖的其他内容.

jQuery扩展:

jQuery.fn.onPositionChanged = function (trigger,millis) {
    if (millis == null) millis = 100;
    var o = $(this[0]); // our jquery object
    if (o.length < 1) return o;

    var lastPos = null;
    var lastOff = null;
    setInterval(function () {
        if (o == null || o.length < 1) return o; // abort if element is non existend eny more
        if (lastPos == null) lastPos = o.position();
        if (lastOff == null) lastOff = o.offset();
        var newPos = o.position();
        var newOff = o.offset();
        if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
            $(this).trigger('onPositionChanged',{ lastPos: lastPos,newPos: newPos });
            if (typeof (trigger) == "function") trigger(lastPos,newPos);
            lastPos = o.position();
        }
        if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
            $(this).trigger('onOffsetChanged',{ lastOff: lastOff,newOff: newOff});
            if (typeof (trigger) == "function") trigger(lastOff,newOff);
            lastOff= o.offset();
        }
    },millis);

    return o;
};

叫它:

$("#<SOME_ID>").onPositionChanged(function(){alert("foobar")});

猜你在找的jQuery相关文章