目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - Popover插件( Popover Plugin)

Bootstrap - Popover插件( Popover Plugin)

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

如果你想单独包含这个插件功能，那么你将需要popover.js并且它具有tooltip plugin的依赖性。 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js 。

用法 (Usage)

popover插件按需生成内容和标记，默认情况下会在其触发元素后面设置popover。 您可以通过以下两种方式添加popover -

  • Via data attributes - 要添加弹出窗口，请将data-toggle = "popover"到锚点/按钮标记。 锚点的标题将是弹出窗口的文本。 默认情况下，插件将popover设置为top。 

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

  • Via JavaScript - 使用以下语法通过JavaScript启用弹出窗口 - 

$('#identifier').popover(options)

Popover插件不仅仅是css插件，比如前面章节中讨论的下拉列表或其他插件。 要使用此插件，您必须使用jquery（读取javascript）激活它。 要启用页面上的所有弹出框，只需使用此脚本 - 

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

例子 (Example)

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

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      Popover on left
   </button>
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      Popover on top
   </button>
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      Popover on bottom
   </button>
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      Popover on right
   </button>
</div>
<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>
新页面打开

选项 (Options)

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

选项名称 类型/默认值 数据属性名称 描述
animation boolean Default − true data-animation 将CSS淡入淡出过渡应用于弹出窗口。
html boolean Default − false data-html 将HTML插入到弹出窗口中。 如果为false，则使用jQuery的文本方法将内容插入到dom中。 如果您担心XSS攻击，请使用文本。
placement string | function Default − top data-placement 指定如何定位弹出窗口（即top | bottom | left | right | auto）。

指定auto ，它将动态重定向弹出窗口。 例如，如果展示位置为“自动离开”，则弹出窗口将尽可能显示在左侧，否则它将显示为右侧。

selector string Default − false data-selector 如果提供了选择器，则会将弹出框对象委派给指定的目标。
title 字符串| 功能Default − " data-title 如果title属性不存在，则title选项是默认标题值。
trigger 字符串Default − 'hover focus' data-trigger 定义弹出窗口的触发方式 - click| hover | focus | manual click| hover | focus | manual click| hover | focus | manual 。 你可以传递多个触发器; 用空格隔开它们。
delay 号码| 对象Default − 0 data-delay

以毫秒显示和隐藏弹出窗口的延迟 - 不适用于手动触发类型。 如果提供了数字，则延迟将应用于隐藏/显示。 对象结构是 - 

delay: { show: 500, hide: 100 }
container 字符串| false Default − false data-container 将popover追加到特定元素。 示例:container:'body'

方法 (Methods)

以下是popover的一些有用方法 -

方法 描述 例

Options - .popover（选项）

将弹出处理程序附加到元素集合。 
$().popover(options)

Toggle - .popover（'切换'）

切换元素的弹出窗口。 
$('#element').popover('toggle')

Show - .popover（'show'）

显示元素的弹出窗口。 
$('#element').popover('show')

Hide - .popover（'隐藏'）

隐藏元素的弹出窗口。 
$('#element').popover('hide')

Destroy - .popover（'destroy'）

隐藏和摧毁元素的弹出窗口。 
$('#element').popover('destroy')

例子 (Example)

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

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      Popover on left
   </button>
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      Popover on top
   </button>
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      Popover on bottom
   </button>
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      Popover on right
   </button>
   <br><br><br><br><br><br>
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         Popover
      </a>
   </p>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
</div>
新页面打开

事件 (Events)

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

事件 描述 例
show.bs.popover 调用show实例方法时会立即触发此事件。 
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
shown.bs.popover 当弹出窗口对用户可见时将触发此事件（将等待CSS过渡完成）。 
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover 调用hide实例方法时会立即触发此事件。 
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popover 当弹出窗口完成对用户的隐藏时将触发此事件（将等待CSS转换完成）​​。 
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

例子 (Example)

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

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      Popover on left
   </button>
</div>
<script>
   $(function () { $('.popover-show').popover('show');});
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>
新页面打开
<上一篇.Bootstrap - 工具提示插件( Tooltip Plugin)
Bootstrap - 警报插件( Alert Plugin).下一篇>
↑回到顶部↑
WIKI教程 @2018