Bootstrap всплывающее окно (поповер) виджета
Всплывающее окно (поповер) подсказке (Tooltip) Аналогичным образом, предусмотрен расширенный вид. Для того, чтобы активировать всплывающее окно, пользователи просто наведите курсор мыши на элемент может быть. Содержимое коробки всплывающего может быть полностью заполнена с использованием API Bootstrap данных (API Bootstrap данных). Метод основан на всплывающей подсказке (подсказка).
Если вы хотите обратиться к отдельным подключаемых функций, вам нужно ссылаться наpopover.js, это зависит от режущей кромки инструмента (Tooltip) штекера .Или, как Bootstrap плагин Обзор упоминается в главе, вы можете обратиться кbootstrap.jsили сжатой версииbootstrap.min.js.
использование
Всплывающее окно (поповер) плагин контент и теги, по требованию, поп-вверх окно по умолчанию (поповер) за их активными элементами. Есть два способа, которые можно добавить всплывающее окно (поповер):
- Спомощью атрибутов данных: Для добавления всплывающего окна (поповер), просто добавьте данных тумблер = "поповер", чтобы быть якорем кнопки / метки. Название является якорем всплывающее окно (поповер) текст. По умолчанию всплывающее окно плагина (поповер) устанавливается в верхней части.
<a href="#" data-toggle="popover" title="Example popover"> Пожалуйста, наведите курсор мыши выше меня </a>
- По JavaScript: Включить всплывающие окна (поповер) с помощью JavaScript:
$ ( '# Идентификатор'). Поповер (варианты)
Всплывающее окно (поповер) штекер в отличие от предыдущих выпадающих меню и других плагинов, описанных выше, это не чистый CSS плагин. Для того, чтобы использовать этот плагин, необходимо активировать его с помощью JQuery (читай JavaScript). Используйте следующий сценарий для включения всех страниц всплывающего окна (поповер):
$ (Function () {$ ( "[Data-тумблер = 'поповер']") поповер ();.});
примеров
Следующий пример демонстрирует использование всплывающего окна (поповер) виджета по данным использования атрибутов.
примеров
Попробуйте »
Результаты следующие:
опции
Есть несколько вариантов, через API Bootstrap Data (Bootstrap Data API) или путем добавления вызова JavaScript. В следующей таблице перечислены следующие параметры:
| 选项名称 | 类型/默认值 | 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')
|
примеров
Следующий пример демонстрирует всплывающее окно (поповер) плагин подход:
примеров
Попробуйте »
Результаты следующие:
событие
В следующей таблице перечислены всплывающее окно (поповер) плагин, который будет использоваться в случае. Эти события могут быть использованы, когда функция перехвата.
| 事件 | 描述 | 实例 |
|---|---|---|
| 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 () {
// 执行一些动作...
})
|
примеров
Следующий пример демонстрирует всплывающее окно (поповер) виджет события:
примеров
Попробуйте »
Результаты следующие:
