📜  Bootstrap-Popover插件

📅  最后修改于: 2020-10-27 06:23:10             🧑  作者: Mango


 

弹出窗口类似于工具提示,提供带有标题的扩展视图。为了激活弹出框,用户只需将光标悬停在元素上。可以使用Bootstrap Data API完全填充弹出窗口的内容。此方法需要工具提示。

如果要单独包含此插件功能,则将需要popover.js且它具有tooltip plugin的依赖项。另外,如“ Bootstrap插件概述”一章所述,您可以包含bootstrap.js或缩小的bootstrap.min.js

用法

popover插件根据需要生成内容和标记,默认情况下将popover放置在其触发元素之后。您可以通过以下两种方式添加弹出窗口-

  • 通过数据属性-要添加弹出窗口,请将data-toggle =“ popover”添加到锚点/按钮标签。锚点的标题将是弹出框的文本。默认情况下,插件会将popover设置为top。
  • 通过JavaScript -使用下面的语法允许通过JavaScript popovers –
$('#identifier').popover(options)

Popover插件不仅是下拉菜单之类的CSS插件,也不是前面章节中讨论的其他插件。要使用此插件,您必须使用jquery激活它(阅读javascript)。要启用页面上的所有弹出窗口,只需使用此脚本-

$(function () { $("[data-toggle = 'popover']").popover(); });

以下示例通过数据属性演示了popover插件的使用。

选件

有某些选项可以通过Bootstrap Data API添加或通过JavaScript调用。下表列出了选项-

Option Name Type/Default Value Data attribute name Description
animation boolean Default − true data-animation Applies a CSS fade transition to the popover.
html boolean Default − false data-html Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement string|function Default − top data-placement Specifies how to position the popover (i.e., top|bottom|left|right|auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is “auto left”, the popover will display to the left when possible, otherwise it will display right.
selector string Default − false data-selector If a selector is provided, popover objects will be delegated to the specified targets.
title string | function Default − “ data-title The title option is the default title value if the title attribute isn’t present.
trigger string Default − ‘hover focus’ data-trigger Defines how the popover is triggered − click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay number | object Default − 0 data-delay Delays showing and hiding the popover in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is −
delay: { show: 500, hide: 100 }
container string | false Default − false data-container Appends the popover to a specific element. Example: container: ‘body’

方法

以下是一些有用的弹出窗口方法-

Method Description Example
Options − .popover(options) Attaches a popover handler to an element collection.
$().popover(options)
Toggle − .popover(‘toggle’) Toggles an element’s popover.
$('#element').popover('toggle')
Show − .popover(‘show’) Reveals an element’s popover.
$('#element').popover('show')
Hide − .popover(‘hide’) Hides an element’s popover.
$('#element').popover('hide')
Destroy − .popover(‘destroy’) Hides and destroys an element’s popover.
$('#element').popover('destroy')

以下示例演示了popover插件方法-







Popover

大事记

下表列出了可用于popover插件的事件。此事件可用于挂接到函数。

Event Description Example
show.bs.popover This event fires immediately when the show instance method is called.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover This event is fired immediately when the hide instance method has been called.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

以下示例演示了Popover插件事件-