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;
}