Bootstrap 4 - 自动弹出框重新定位如何工作? [英] Bootstrap 4 - how does automatic Popover re-positioning work?
问题描述
我喜欢让我的弹出框保持打开状态，直到用户明确关闭它们.
新的 Bootstrap Popovers 的一个很好的功能是，当用户改变设备方向、滚动或调整窗口大小时，它们会自动重新定位.他们甚至会随着内容重新流动而跟进 - 例如当您调整窗口大小时，段落被换行并且元素的长度增加或缩小 - 屏幕上的所有弹出窗口将继续重新定位以接近其目标.
Popover 插件如何知道页面正在重新流动，从而触发 popover 重新定位?
我的 web 应用程序是动态的，用户操作会导致元素增长/收缩、打开/关闭等.目前，当我通过代码更改页面时，弹出框被抛在后面 - 它们不会重新定位接近他们的目标.
作为用户，解决此问题的一种方法是稍微滚动屏幕，Bootstrap 将重新定位弹出窗口，一切又看起来正常了.
当我通过代码更改页面布局时，我试图找出一种重新定位弹出框的方法.
因此问题是:Popover 重新定位是如何工作的(我是否可以钩住它以便我可以自动触发它).
编辑:我刚刚注意到，如果动态"内容恰好是 Bootstrap navbar 由于以下原因折叠/展开，则弹出框会重新定位轻按 navbar-toggler.
这个问题有两个部分.
- popper.js 如何知道何时更新弹出框?
- popover 如何改变位置?
反过来回答:
2:popover如何改变位置?
你需要popover的update方法:
$('#element').popover('update')我在这里做了一个快速演示:
https://jsfiddle.net/pktyptyp/
首先，点击绿色按钮打开弹出框.然后使用按钮 2 移动弹出框切换.现在切换和弹出框不再对齐.所以最后使用按钮 3 通过其切换重新定位弹出框.
此文档位于此处的 popover 方法部分下:
http://getbootstrap.com/docs/4.0/components/popovers/#方法
如果您想更新页面上的每个弹出框，而不仅仅是某个特定的弹出框，那么您可以这样做:
$('[data-toggle="popover"]').popover('update')popper.js 如何知道何时更新弹出框?
Popper 将订阅像 window.scroll 和 window.resize 这样的事件.你可以在他们的一些源代码中看到这一点:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
在该事件处理程序中不会立即调用 update 方法 - 会有一些东西被传递回 Boostrap 小部件，后者将调用 popover update 方法.>
我很确定波普尔 &Popover 小部件不会查看单个切换的位置.这部分是因为除非定位开关，否则它们的左/顶属性将始终为自动"，因此很难确定它们是否正在移动.或者换句话说，当窗口滚动时，切换没有在文档内移动，但弹出窗口(绝对定位)需要更新.所以这有点笼统——他们正在寻找整个窗口的变化，假设弹出框不在位置，然后触发更多事件来更新它们.
如果有人对此有更多了解，请在评论中告诉我！
您有一点优势，因为您知道何时更改 UI，因此您可以随意对所有 Popover 调用更新".在我看来，这似乎是理想的方法.
但是，如果您的开关是绝对定位的，您可以通过观察它们的位置来更自动地执行此操作.这是一个使用绝对定位切换的示例，在此示例中，弹出框无需第三次单击按钮即可自动移动.
https://jsfiddle.net/pktyptyp/1/
I like letting my popovers stay open until the user explicitly closes them.
One of the nice features of the new Bootstrap Popovers is that they automatically re-position when the user changes device orientation, scroll or resize the window. They even follow along as the content re-flows - e.g. as a paragraph is wrapped and the element grows or shrinks in length while you resize the window - all the popovers on the screen will keep re-positioning to be near their target.
How does the Popover plugin know that the page is being re-flowed so that it triggers the popover re-positioning?
My webapp is dynamic, user actions cause elements to grow/shrink, toggle on/off, etc. At the moment, when I change the page via code, the popovers get left behind - they don't get re-positioned near their target.
One workaround to this, as a user, is to just scroll the screen a little bit and Bootstrap will re-position the popovers and everything looks right again.
I'm trying to figure out a way to re-position the popovers when I change the page layout via code.
Hence the question: how does Popover re-positioning work (and can I hook into it so I can trigger it automatically).
EDIT: I've just noticed that the popovers will re-position just fine if the "dynamic" content happens to be the Bootstrap navbar collapsing/expanding because of a tap on the navbar-toggler.
There's two parts to this question.
- How does popper.js know when to update the popovers?
- How does the popover change position?
Answering these backwards:
2: How does the popover change position?
You need the update method of the popover:
$('#element').popover('update')
I've done a quick demo here:
https://jsfiddle.net/pktyptyp/
First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.
The docs for this are tucked under the popover methods section here:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
If you wanted to update every popover on your page and not just a specific one, then you could do:
$('[data-toggle="popover"]').popover('update')
How does popper.js know when to update the popovers?
Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.
I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.
If anyone knows more about this, though, please tell me in the comments!
You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.
However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.
https://jsfiddle.net/pktyptyp/1/
这篇关于Bootstrap 4 - 自动弹出框重新定位如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
