Bootstrap JS Popover
JS-Попов (Попов. js)
Плагин Попов похож на подсказки; Это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что в нем может содержаться гораздо больше контента.
Зависимость от подключаемых модулей: для включения в вашу версию Bootstrap требуется подключаемый модуль подсказки (ToolTip. js).
Для учебника о Попов, прочитайте наш Bootstrap Попов учебник.
Через Data-* атрибуты
data-toggle="popover" активирует Попов.
title атрибут задает текст заголовка всплывающего окна.
data-content атрибут указывает текст, который должен отображаться внутри тела.
Пример
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Через JavaScript
Всплывающие модули не являются подключаемыми модулями CSS и поэтому должны быть инициализированы с помощью jQuery: выберите указанный элемент и вызовите
popover() метод.
Пример
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Параметры всплывающего меню
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как при размещении данных = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| animation | boolean | true |
Признак добавления эффекта затухания CSS при открытии и закрытии всплывающего
|
|
| container | string, or the boolean false | false | Добавляет Попов к определенному элементу. Пример: контейнер: ' Body ' |
|
| content | string | "" | Задает текст внутри тела | |
| delay | number, or object | 0 | Указывает количество миллисекунд, которое потребуется для открытия и закрытия всплывающего окно. Чтобы указать задержку открытия и другую для закрытия, используйте структуру объекта: Задержка: {Показать: 500, скрыть: 100}-который будет принимать 500 MS, чтобы открыть Попов, но только 100 MS, чтобы закрыть его |
|
| html | boolean | false | Указывает, следует ли принимать HTML-теги в Попов:
Если задано значение false (по умолчанию), будет использоваться метод Text () jQuery. Используйте это, если вы беспокоитесь о XSS-атаках |
|
| placement | string | "right" | Задает положение всплывающего. Возможные значения:
|
|
| selector | string, or the boolean false | false | Добавление всплывающего переключателя в указанный селектор | |
| template | string | Базовый HTML-код для использования при создании всплывающего файла. Название Попова будет введено в. Попович-название. Содержимое всплывающего компонента будет введено в. Попович-контент. . стрелка станет стрелкой Попова. Внешний элемент оболочки должен иметь класс. Поповича. |
||
| title | string | "" | Задает текст заголовка всплывающего окна | |
| trigger | string | "click" | Указывает способ срабатывания всплывающего триггера. Возможные значения:
|
|
| viewport | string, or object | {selector: "body", padding: 0} | Удерживает всплывающий элемент в пределах границ этого элемента. Пример: видовой экран: ' #viewport ' или {Selector: ' #viewport ', заполнение: 0} |
Методы Попов
В следующей таблице перечислены все доступные методы Попов.
| Метод | Описание | |
|---|---|---|
| .popover(options) | Активирует всплывающее меню с опцией. Приведенные выше параметры для допустимых значений | |
| .popover("show") | Показывает Попов | |
| .popover("hide") | Скрывается Попов | |
| .popover("toggle") | Переключает всплывающее | |
| .popover("destroy") | Скрывает и разрушает Попов |
События Попов
В следующей таблице перечислены все доступные события.
| Событие | Описание | |
|---|---|---|
| show.bs.popover | Происходит при отображении всплывающего | |
| shown.bs.popover | Происходит при полном отображении всплывающего свидетельства (после завершения CSS-переходов) | |
| hide.bs.popover | Происходит при скрытии всплывающего | |
| hidden.bs.popover | Происходит при полной скрытности всплывающего подпункта (после завершения CSS-переходов) |
Другие примеры
Пользовательский дизайн Попов
Используйте CSS для настройки внешнего вид всплывающего:
Пример
/* Popover */
.popover {
border: 2px dotted red;
}
/* Popover Header */
.popover-title {
background-color: #73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
}
