弹出框（Popover）插件

弹出框（Popover）与提示工具（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用Bootstrap数据API（Bootstrap DATA API）来填充。该方法依赖于工具提示（Tooltip）。

如果想要单独引用该插件的功能，那么引用popover.js。

用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（Popover）放在他们的触发元素后面。可以有以下两种方式添加弹出框（Popover）：

  • 通过data属性：如需添加一个弹出框（Popover），只需向一个锚/按钮标签添加data-toggle=”popover”即可。锚的title即为弹出框（Popover）的文本。默认情况下，插件把弹出框（Popover）设置在顶部。
<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>
  • 通过JavaScript：通过JavaScript启用弹出框（Popover）：
$('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，必须使用jQuery激活它（读取JavaScript）。使用下面的脚本来启用页面中的所有的弹出框（Popover）：

$(function () { $("[data-toggle='popover']").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="左侧的 Popover 中的一些内容">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="top"
            data-content="顶部的 Popover 中的一些内容">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些内容">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning" title="Popover title"
            data-container="body" data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容">
        右侧的 Popover
    </button>
</div>

<script>
$(function (){
    $("[data-toggle='popover']").popover();
});
</script>
</div>

选项

选项名称 类型/默认值 Data属性名称 描述
animation boolean
默认值：true		 data-animation 向弹出框应用CSS褪色过渡效果。
html boolean
默认值：false		 data-html 向弹出框插入HTML。如果为false，jQuery的text方法将被用于向DOM插入内容。如果担心XSS攻击，请使用text。
placement string function
默认值：top		 data-placement | 规定如何定位弹出框（即top|bottom|left|right|auto）。
当指定为auto时，会动态调整弹出框。例如，如果placement是”auto left”，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string
默认值：false		 data-selector 如果提供了一个选择器弹出框对象呗委派到指定的目标。
title string function
默认值：”		 data-title | 如果未指定title属性，则title选项是默认的title值。
trigger string
默认值：’hover focus’		 data-trigger 定义如果触发弹出框：click|hover|focus|manual。
可以传递多个触发器，每个触发器之间用空格分隔。
delay number object
默认值：0		 data-delay | 延迟显示和隐藏弹出框的毫秒数，对manual手动触发类型不适合。如果提供的是一个数字，那么颜色将会应用于显示和隐藏。如果提供的是对象，结构如下：delay:{show:500, hide:100}
container string false
默认值：false		 data-container | 向指定元素追加弹出框。
实例：container:’body’

方法

方法 描述 实例
Options:.popover(options) 向元素集合附加弹出框句柄 $().popover(options)
Toggle:.popover(‘toggle’) 切换显示/隐藏元素的弹出框 $('#element').popover('toggle')
Show:.popover(‘show’) 显示元素的弹出框 $('#element').popover('show')
Hide:.popover(‘hide’) 隐藏元素的弹出框 $('#element').popover('hide')
Destroy:.popover(‘destroy’) 隐藏并销毁元素的弹出框 $('#element').popover('destroy')

实例

<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="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>
    <button type="button" class="btn btn-primary popover-hide"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="top"
            data-content="顶部的 Popover 中的一些内容 —— hide 方法">
        顶部的 Popover
    </button>
    <button type="button" class="btn btn-success popover-destroy"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="bottom"
            data-content="底部的 Popover 中的一些内容 —— destroy 方法">
        底部的 Popover
    </button>
    <button type="button" class="btn btn-warning popover-toggle"
            title="Popover title" data-container="body"
            data-toggle="popover" data-placement="right"
            data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
        右侧的 Popover
    </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>Popover 中的一些内容 —— options 方法</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>

事件

事件 描述
show.bs.popover 当调用show实例方法时立即触发该事件。
shown.bs.popover 当弹出框对用户可见时触发该事件（将等待CSS过渡效果完成）
hide.bs.popover 当调用hide实例方法时立即触发该事件
hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待CSS过渡效果完成）

实例

<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="左侧的 Popover 中的一些内容 —— show 方法">
        左侧的 Popover
    </button>

</div>
<script>
$(function () { $('.popover-show').popover('show');});
    $(function () { $('.popover-show').on('shown.bs.popover', function () {
        alert("当显示时警告消息");
    })
});
</script>
</div>
打赏
Post Views: 1,017