Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

提示框

添加一小块叠层内容,就像iOS中常见的那样,给一些元素放置次要信息。

内容

概述

在使用提示框插件的时候你需要知道这些:

  • 提示框依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示框起作用。
  • 提示框需要依赖提示冒泡插件
  • 出于性能的原因,提示框是选择性加入的,所以你必须自己初始化它们
  • 标题零长度的提示框不会显示出来。
  • 指定container: 'body'以避免复杂组件(比如说输入框组,按钮组,等等)中的渲染问题。
  • 在隐藏的元素上触发的提示框不会起作用。
  • 如果从一个跨多行的链接上触发提示框,提示框将居中。在<a>上使用white-space:nowrap;可以避免这种情况。

都记住了?好极了。让我们用一些例子看看它们是如何运作的。

示例:在任何地方启用提示框

在网页上初始化所有的提示框的一个途径是用data-toggle属性选中它们:

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

示例:使用container选项

如果你在一个父元素上有一些样式与提示框产生干扰,你可以指定一个自定义的container,这样提示框的HTML将出现在这个元素内部了。

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

静态提示框

可以使用四个选项:顶部对齐、右对齐、底部对齐、左对齐。

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

现场演示

<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

四个方向

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

在下一次点击时撤回

使用focus触发器,会在用户下一次点击时抹除提示框。

dismiss-on-next-click明确标记

为了适当的跨浏览器和跨平台表现,你必须使用<a>标记。不能是<button>标记,而且<a>还必须包含一个tabindex属性。

<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

用法

利用JavaScript启用提示框:

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

选项

可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-后面,比如说写成data-animation=""

单个提示框的数据属性

单个提示框的选项可以通过使用data属性来替补指定。上面已经解释了。

### 方法 #### $().popover(options) 为一个元素集合初始化提示框。 #### .popover('show') 显示一个元素的提示框。**在提示框真正显示之前返回给调用者**(也就是,在`shown.bs.popover`事件发生之前)。这被视为提示冒泡的一次“人为”触发。零长度标题零长度内容的提示框不会显示。
$('#element').popover('show')
#### .popover('hide') 隐藏一个元素的提示框。**在提示框真正隐藏之前返回给调用者**(也就是,在`hidden.bs.popover`事件发生之前)。这被视为提示框的一次“人为”触发。
$('#element').popover('hide')
#### .popover('toggle') 切换一个元素的提示框。**在提示框真正显示或隐藏之前返回给调用者**(也就是,在 `shown.bs.popover`或`hidden.bs.popover`事件发生之前)。这被视为提示框的一次“人为”触发。
$('#element').popover('toggle')
#### .popover('destroy') 隐藏并销毁一个元素的提示框。使用委派的提示框(创建时使用了[`selector`选项](#options))不能在后代触发元素上被单独销毁。
$('#element').popover('destroy')
### 事件
名称 类型 默认值 描述
animation boolean true 对提示框应用一个CSS褪色过渡
container string | false false

向一个特定元素追加提示框。示例:container: 'body'。这个选项在某些时候特别有用,比如说它允许你在文档流中在触发元素附近定位提示框--这将防止在窗口调整大小的时候,提示框飘到远离触发元素的位置。

content string | function ''

如果data-content属性不存在,提供默认的content值。

如果提供了一个函数,调用这个函数时,函数的this引用被设置为附加提示框的元素。

delay number | object 0

延迟显示或延迟隐藏提示框(以毫秒计)——它不会应用到人为触发类型。

如果向这个选项提供一个数字,显示和隐藏都会应用这个延迟。

对象结构是delay: { "show": 500, "hide": 100 }

html boolean false 向提示框插入HTML。如果值为false,将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话,请使用text。
placement string | function 'right'

如何定位提示框:`top`、 `bottom`、`left`、`right`、`auto`。
如果指定了`auto`,它会动态地调整提示框的位置。举个例子,如果placement是`auto left`,提示框将尽可能地显示在左侧,否则显示在右侧。

如果用一个函数来决定placement,会调用提示框的DOM节点作为第一个参数,然后触发元素的DOM节点是第二个参数。this的上下文设置为提示框的实例。

selector string false 如果提供了一个选择器,提示框将被委派给指定的目标。在实践中,它让动态添加的HTML内容也能附加提示框。看这里一个翔实的例子
template string '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

在创建提示框时使用HTML。

提示框的title将注入到.popover-title里面。

提示框的content将注入到.popover-content里面。

.popover-arrow将变成提示框的箭头

最外层的包裹元素必须拥有.popover类。

title string | function ''

如果title属性不存在,提供默认的title值。

如果提供了一个函数,调用这个函数时,函数的this引用被设置为附加提示框的元素。

trigger string 'click' 如何触发提示框——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器,用空格隔开它们。但是`manual`不能用别的触发器结合使用。
constraints Array 'hover focus' 一个约束数组,传递给Tether。欲知更多请查询Tether的约束文档
offsets string '0 0' 提示框相对于目标的偏移,欲知更多请查询Tether的偏移文档
事件类型 描述
show.bs.popover 当调用show实例方法时,会立即触发该事件。
shown.bs.popover 当提示框对用户来说可见时(需要等待CSS过渡完成),会触发该事件。
hide.bs.popover 当调用hide实例方法时,会立即触发该事件。
hidden.bs.popover 当提示框对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})