jquery事件监听位置改变 [英] jquery event listen on position changed

问题描述

我需要听一个元素的相对位置。这对于动态布局问题特别有用。没有选项可以侦听even样式的position（）或offset（）属性。

I need to listen to an elements relative position. This is particular useful for dynamic layouting issues. There is no option to listen for CSS styles of even position() or offset() attributes.

为什么：
如果同级更改其在对话框或表单内的尺寸（重新布局），位置可以更改。因此，对于交互式表单，这可以帮助使用即父级的最大可用高度或宽度或类似的东西。

Why: The relative position can change if a sibling change its dimension inside dialogs or forms (re-layout). So for interactive forms this can help to use i.e. the maximum available height or width of the parent or something like that.

推荐答案

自定义jQuery扩展通过定时器轮询监听对象位置。伊莫没有办法解决这个没有定时器，因为位置可以改变，没有jquery被调用（即重新布局兄弟元素）。此解决方案监视元素.position（）和.offset（）值。

This custom jquery extension listens for object position by timer poll. I.m.o. there is no way to solve this without a timer, because position may be changed without jquery being invoked at all (i.e. re-layouting sibling elements). This solution watches the elements .position() and .offset() values. It can be easily improved to watch .css() styles or other stuff that is not covered by jQuery events.

jQuery扩展名：可以很容易地改进以观看.css（）样式或其他未被jQuery事件覆盖的内容。 p>

jQuery extension:

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事件监听位置改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！