如何用jquery检测位置的变化?
我正在尝试开发一个小部件,即选择表单元素替换。它是一个块元素,因此它可能是其容器的 100%。像这样:
<element style="width: 100%">Please choose</element>
<options style="display: none">
<option>Option 1</option>
</options>
它有一个选项列表,单击时打开,并调整大小和位置以与触发元素对齐。
现在,每当我调整窗口大小或布局中的某些内容发生变化时,我都需要重新定位选项列表。我认为我可以轻松绑定到 window.resize()
来进行 options.width()
更改。唯一的问题是如何检测元素位置的变化以重新定位选项。
是否有任何事件可以绑定到位置或偏移的变化?
谢谢。 德米特里.
I'm trying to develop a widget, that is a select form element replacement. It's a block element so it may be 100% of its container. Something like this:
<element style="width: 100%">Please choose</element>
<options style="display: none">
<option>Option 1</option>
</options>
It has an options list that opens on click and is resized and position to align it with the trigger element.
Now whenever I resize the window or something in my layout changes I need to reposition the options list. I figured that I can easily bind to window.resize()
for options.width()
changes. The only one problem is how to detect changes in element position to reposition the options.
Is there any event to bind to changes in position or offset?
Thank you.
Dmitry.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
从语义上讲,选项应该是“选择元素”的子元素。就像传统的
select
一样。这样,您就可以使用绝对定位来始终将
options
定位到相对于其父项的正确位置。为此,您只需在element
上指定position:relative
(或者实际上除static
之外的任何其他position
值) )。您可能只是将 HTML 作为一个简单的示例,但您最好使用标准 HTML 标记(例如
div
、ul
,以最适合您的情况为准) )并附有一个特殊的类。Semantically the options should be a child of the "select element". Like, you know, with the traditional
select
.This way, you can use absolute positioning to always position
options
to the right place, relative to its parent. For this, you only have to specifyposition: relative
onelement
(or actually any otherposition
value thanstatic
).It's possible that you only meant your HTML as a quick example, but you'd be better off using a standard HTML tag (like
div
,ul
, whichever fits your case most) with a special class attached to it.