我需要倾听元素的相对位置.这对动态布局问题特别有用.没有选项可以监听偶数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")});