Bootstrap Popover 组件简介
在 第十一章 中,我向你介绍了可便捷地创建精美网页的 Bootstrap 框架。 到目前为止,我只使用了这个框架的一小部分。 Bootstrap 捆绑了许多常见的 UI 元素,所有这些元素都在地址为 https://getbootstrap.com 的 Bootstrap 文档中有 demo 和示例。 其中一个组件是 Popover (弹窗),在文档中将其描述为“用于容纳辅助信息的小的覆盖窗口”。 这正是我需要的!
大多数 bootstrap 组件都是通过 HTML 标记定义的,该标记引用 Bootstrap CSS 的定义内容来添加漂亮的样式。 一些高级的组件还需要 JavaScript。 应用程序在网页中包含这些组件的标准方式是在适当的位置添加 HTML,然后为需要脚本支持的组件调用 JavaScript 函数,以便初始化或激活它。 popover 组件确实需要 JavaScript 的支持。
要做弹窗的 HTML 部分非常简单,你只需要定义将触发弹窗的元素。 就我而言,就是处理每条用户动态中出现的可点击的用户名。 app/templates/_post.html 子模板具有已定义的用户名:
<a href="{{ url_for('main.user', username=post.author.username) }}">
{{ post.author.username }}
</a>
现在根据 popover 文档,我需要调用每个链接上的 popover()
JavaScript 函数,就像上面出现在页面上的链接一样,这才能初始化弹出窗口。 初始化调用接受许多配置弹出窗口的选项,包括传递想要在弹出窗口中显示的内容,以及使用什么方法触发弹出窗口出现或消失(单击,悬停在元素上等),如果内容是纯文本或 HTML,那么在文档中可以找到更多的选项。不幸的是,在阅读完这些信息之后,我的疑惑更多了,因为这个组件看起来并没有按照我需要的方式工作。 以下是我实现此功能需要解决的问题列表:
- 在页面中会有很多用户名链接,每条用户动态都会显示一个。我需要有一种方法可以在页面渲染后用 JavaScript 中找到所有这些链接,以便我可以将它们初始化为弹出窗口。
- Bootstrap 文档中的 popover 示例都将目标 HTML 元素的
data-content
属性设置为 popover 的内容,因此当触发悬停事件时,Bootstrap 需要做的只是显示弹出窗口。这对我来说要做的就不止这些了,因为我想对服务器进行 Ajax 调用以获取内容,并且只有当收到服务器的响应时,我才希望弹出窗口出现。 - 使用“悬停”模式时,只要你将鼠标指针放在目标元素中,弹出窗口就会保持可见状态。当你移开鼠标时,弹出窗口将消失。这具有糟糕的副作用,即如果用户想要将鼠标指针移动到弹出窗口中,弹出窗口将消失。我需要找出一种方法来将悬停行为扩展为包含弹出窗口,以便用户可以移动到弹出窗口中,例如,单击那里的链接。
在开发基于浏览器的应用程序时,事情变得越来越复杂的情况,实际上并不罕见。 你必须非常仔细地考虑 DOM 元素如何相互作用,并使其行为方式提供良好的用户体验。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论