本网站只能被运行在支持JavaScript脚本的环境中

第8章 提示信息显示用组件

本节概述

本节介绍如何使用Bootstrap中提供的用于显示提示信息的组件,它们包括工具条提示组件、弹出框组件及警告框组件。

工具条提示组件

工具条提示组件是受Jason Frame写的jQuery.tipsy插件的启发。工具条提示组件对该插件做了很多改进,例如不需要依赖图像,而是改用CSS 实现提示信息的动画显示效果,以及使用data属性存储提示信息。

在使用该组件时,必须引用bootstrap.js脚本文件或压缩版的bootstrap.min.js脚本文件.

可以使用如下所示的两种方法使用工具条提示组件,在默认情况下,提示信息被显示在它的触发元素上方。

1.将一个a元素或按钮元素的data-toggle属性值指定为tooltip,使用该元素的title属性值指定提示信息。

<a href="#" data-toggle="tooltip" title="超链接提示信息">超链接</a>

2.通过 JavaScript:通过 JavaScript 触发工具提示(tooltip):

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

工具条提示组件与其他组件有些区别,它不是纯CSS组件。如需使用该组件,必须使用jquery代码进行激活,代码如下所示:

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

可以使用元素的data-placement属性来指定提示信息的显示位置,可指定值包括:top(显示在元素上方)、left(显示在元素左方)、right(显示在元素右方)、bottom(显示在元素下方).

<h4>工具提示(Tooltip)插件 - 锚</h4>
这是一个 
<a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">
    默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
    顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
    底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
    右侧的 Tooltip
</a>
<br>
<h4>工具提示(Tooltip)插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip">
    默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">
    左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">
    顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
    底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">
    右侧的 Tooltip
</button>
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

选项

可以在tooltip方法中或通过元素的属性指定的选项如下表所示:

选项名称 类型/默认值 Data属性名称 描述
animation boolean 默认值:true data-animation 是否为提示信息使用CSS动画显示效果
html boolean 默认值:false data-html 是否将提示信息指定为HTML代码片段。如果为 false,jQuery的text方法将被用于向dom插入内容。如果您担心XSS 攻击,请使用不要使用该选项或将选项值指定为false。
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。您可以传递多个触发器,每个触发器之间用空格分隔。
content string | function 默认值:'' data-content 如果未指定data-content属性,则使用默认的 content 值。
delay number | object 默认值:0 data-delay 延迟显示和隐藏工具提示的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:delay:{ show: 500, hide: 100 }
container string | false 默认值:false data-container 向指定元素追加工具提示。例如: container: 'body'

方法

工具条提示组件所具有的方法如下表所示:

方法 描述 代码示例
Options 指定工具条提示的选项 $().tooltip(options)
Toggle 切换显示/隐藏元素的提示信息 $('#element').tooltip('toggle')
Show 显示元素的提示信息 $('#element').tooltip('show')
Hide 隐藏元素的提示信息 $('#element').tooltip('hide')
Destroy 隐藏并销毁元素的提示信息 $('#element').tooltip('destroy')
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a>.
这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a>.
这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a>.
这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
    这是一个 
    <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options </a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { 
    $(".tooltip-options a").tooltip({html : true });
});
</script>

事件

工具条提示组件所可能触发的事件如下表所示。

事件 描述 代码示例
show.bs.tooltip 当调用工具条提示组件的show方法时立即触发该事件。 $('#myTooltip').on('show.bs.tooltip', function () { // 执行一些动作... })
shown.bs.tooltip 当提示信息对用户可见时触发该事件(将等待CSS过渡效果完成) $('#myTooltip').on('shown.bs.tooltip', function () { // 执行一些动作... })
hide.bs.tooltip 当调用工具条提示组件的hide方法时立即触发该事件。 $('#myTooltip').on('hide.bs.tooltip', function () { // 执行一些动作... })
hidden.bs.tooltip 当提示信息对用户隐藏时触发该事件(将等待CSS过渡效果完成) $('#myTooltip').on('hidden.bs.tooltip', function () { // 执行一些动作... })
<h4>工具提示插件使用示例</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
   alert("提示信息被显示");
})});
</script>

弹出框组件

弹出框组件与工具条提示组件类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。

与工具条提示组件一样,在使用该组件时,必须引用bootstrap.js脚本文件或压缩版的bootstrap.min.js脚本文件。

可以使用如下所示的两种方法使用弹出框组件,在默认情况下,弹出框被显示在它的触发元素上方。

1.将一个a元素或按钮元素的data-toggle属性值指定为popover,使用该元素的title属性值指定提示信息。

<a href="#" data-toggle="popover" title="超链接提示信息">超链接</a>

2.通过 JavaScript:通过 JavaScript 触发弹出框(popover):

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

与工具条提示组件类似,弹出框组件也不是纯CSS组件。如需使用该组件,必须使用jquery代码进行激活,代码如下所示:

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

可以使用元素的data-placement属性来指定弹出框的显示位置,可指定值包括:top(显示在元素上方)、left(显示在元素左方)、right(显示在元素右方)、bottom(显示在元素下方).

<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 中的一些内容">
     左侧的弹出框
     </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>

选项

可以在popover方法中或通过元素的属性指定的选项如下表所示:

选项名称 类型/默认值 Data属性名称 描述
animation boolean 默认值:true data-animation 是否为弹出框使用CSS动画显示效果
html boolean 默认值:false data-html 是否将提示信息指定为HTML代码片段。如果为 false,jQuery的text方法将被用于向dom插入内容。如果您担心XSS 攻击,请使用不要使用该选项或将选项值指定为false。
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 指定弹出框的选项 $().tooltip(options)
Toggle 切换显示/隐藏元素的弹出框 $('#element').tooltip('toggle')
Show 显示元素的弹出框 $('#element').tooltip('show')
Hide 隐藏元素的弹出框 $('#element').tooltip('hide')
Destroy 隐藏并销毁元素的弹出框 $('#element').tooltip('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方法时立即触发该事件。 $('#mypopover').on('show.bs.popover', function () { // 执行一些动作... })
shown.bs.popover 当弹出框对用户可见时触发该事件(将等待CSS过渡效果完成) $('#mypopover').on('shown.bs.popover', function () { // 执行一些动作... })
hide.bs.popover 当调用弹出框组件的hide方法时立即触发该事件。 $('#mypopover').on('hide.bs.popover', function () { // 执行一些动作... })
hidden.bs.popover 当弹出框组件对用户隐藏时触发该事件(将等待CSS过渡效果完成) $('#mypopover').on('hidden.bs.popover', function () { // 执行一些动作... })
<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>

警告框组件

警告框组件用来向用户显示警告或确认信息。与工具条提示组件一样,在使用该组件时,必须引用bootstrap.js脚本文件或压缩版的bootstrap.min.js脚本文件。〈/p>

当使用警告框组件时,可以向警告信息添加可取消(dismiss)功能。〈/p>

可以使用以下两种方式启用警告框的可取消(dismissal)功能:

1.通过 data 属性:只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

2.通过 JavaScript:通过JavaScript添加可取消功能。

$(".alert").alert()

通过data属性使用警告框组件的一个示例如下所示。

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>警告!</strong>您的网络连接有问题。
</div>

事件

警告框组件所可能触发的事件如下表所示。

事件 描述 代码示例
closed.bs.alert 当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成)。 $('#myalert').bind('closed.bs.alert', function () { // 执行一些动作... })
<div id="myAlert" class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>成功!</strong>结果是成功的。
</div>
<script type="text/javascript">
$(function(){
    $("#myAlert").bind('closed.bs.alert', function () {
        alert("警告消息框被关闭。");
    });
});
</script>