Bootstrap 4 - 自动Popover重新定位如何工作?

时间:2017-10-19 01:22:17

标签: javascript html css twitter-bootstrap bootstrap-4

我喜欢让我的弹出窗口保持打开状态,直到用户明确关闭它们为止。

新Bootstrap Popovers的一个不错的功能是,当用户更改设备方向,滚动或调整窗口大小时,它们会自动重新定位。他们甚至在内容重新流动时跟随 - 例如当一个段落被包裹,并且当你调整窗口大小时元素的长度会增大或缩小 - 屏幕上的所有弹出窗口都将保持重新定位以接近目标。

Popover插件如何知道页面正在重新流动,以便触发弹出窗口重新定位?

我的网络应用是动态的,用户操作导致元素增长/缩小,切换开/关等等。目前,当我通过代码更改页面时,弹出窗口被遗忘 - 他们不会重新获得 - 在他们的目标附近定位。

作为一个用户,一个解决方法就是稍微滚动一下屏幕,Bootstrap将重新定位弹出框,一切看起来都是正确的。

当我通过代码更改页面布局时,我试图想出一种重新定位弹出窗口的方法。

因此问题是:Popover如何重新定位工作(我可以挂钩,以便我可以自动触发它)。

编辑:我刚刚注意到,如果"动态"那么它们将会重新定位。内容恰好是Bootstrap navbar折叠/展开,因为点击navbar-toggler

2 个答案:

答案 0 :(得分:2)

这个问题有两个部分。

  1. popper.js如何知道何时更新弹出窗口?
  2. 弹出窗口如何改变位置?
  3. 向后回答:

    2:弹出窗口如何改变位置?

    您需要popover的更新方法:

    $('#element').popover('update')
    

    我在这里做了一个快速演示:

    https://jsfiddle.net/pktyptyp/

    首先,单击绿色按钮以打开弹出窗口。然后使用按钮2移动弹出切换按钮。现在,切换和弹出窗口不再对齐。所以最后使用按钮3通过切换来重新定位弹出框。

    这里的文档隐藏在这里的popover方法部分:

    http://getbootstrap.com/docs/4.0/components/popovers/#methods

    如果您想要更新页面上的每个弹出窗口而不仅仅是特定的弹出窗口,那么您可以这样做:

    $('[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

    更新方法不会立即在该事件处理程序中调用 - 这将被传递回Boostrap小部件,而小部件又会调用popover update方法。 / p>

    我相当确定Popper& Popover小部件不会查看单个切换的位置。这部分是因为除非定位了肘节,否则它们的左/上属性将永远是“自动”。所以如果它们正在移动就很难解决。换句话说,当窗口滚动时,切换没有在文档中移动,但是弹出窗口(绝对定位)需要更新。所以这是一个广泛的刷子 - 他们正在寻找整个窗口的变化,假设弹出窗口不合适,然后触发更多事件来更新它们。

    如果有人对此有更多了解,请在评论中告诉我!

    您知道何时更改用户界面有一些优势,因此您可以拨打“更新”字样。所有的Popovers随意。这对我来说似乎是理想的方法。

    但是,如果您的切换位置绝对正确,您可以通过观察其位置来更自动地执行此操作。这是一个带有绝对定位切换的示例,在此示例中,弹出窗口会自动移动,而不会点击第三个按钮。

    https://jsfiddle.net/pktyptyp/1/

答案 1 :(得分:1)

我不知道逻辑是如何工作的,因为在Bootstrap上我们使用Popper.js来处理它,所以如果你想了解背后的逻辑,你可以浏览它:https://github.com/FezVrasta/popper.js