我需要倾听元素的相对位置.这对动态布局问题特别有用.没有选项可以监听偶数position()或offset()属性的CSS样式.
为什么：
如果兄弟在对话框或表单中更改其维度(重新布局),则相对位置可能会发生变化.因此,对于交互式表格,这可以帮助使用,即父母的最大可用高度或宽度或类似的东西.
解决方法
此自定义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")});
