Bootstrap JS Popover
JS-Попов
Компонент "Попов" аналогичен всплывающим подсказкам; Это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что в нем может содержаться гораздо больше контента.
Для учебника о Popover, читайте наши Bootstrap Popover Учебник.
Включить через Data-* атрибуты
data-toggle="popover" активирует popover.
title атрибут задает текст заголовка popover.
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" | Указывает способ срабатывания всплывающего триггера. Возможные значения:
|
|
| offset | number or a string | 0 | Смещение Поповки относительно его цели | |
| fallbackPlacement | string or an aray | "flip" | Указывает, какую позицию использует Поппер в запасном варианте | |
| boundary | string or element | "scrollParent" | Граница ограничения переполнения. Принимает значения "видовой экран", "окно" или "скроллпарент", или HTML-элемент |
Popover Методы
В следующей таблице перечислены все доступные методы Попов.
| Метод | Описание | |
|---|---|---|
| .popover(options) | Активирует всплывающее меню с опцией. Приведенные выше параметры для допустимых значений | |
| .popover("show") | Показывает Попов | |
| .popover("hide") | Скрывается Попов | |
| .popover("toggle") | Переключает всплывающее | |
| .popover("dispose") | Скрывает и разрушает Попов | |
| .popover("enable") | Позволяет выдается возможность показать. Это значение по умолчанию | |
| .popover("disable") | Удаляет возможность отображения всплывающего подряда. Этот параметр можно показать только в том случае, если он вновь включен | |
| .popover("toggleEnabled") | Переключает возможность отображения или скрытия всплывающего | |
| .popover("update") | Обновляет положение всплывающего |
События Попов
В следующей таблице перечислены все доступные события.
| Событие | Описание | |
|---|---|---|
| show.bs.popover | Происходит при отображении всплывающего | |
| shown.bs.popover | Происходит при полном отображении всплывающего свидетельства (после завершения CSS-переходов) | |
| hide.bs.popover | Происходит при скрытии всплывающего | |
| hidden.bs.popover | Происходит при полной скрытности всплывающего подпункта (после завершения CSS-переходов) | |
| inserted.bs.popover | Происходит после события Show. BS. Поповича, когда шаблон "Попов" был добавлен в DOM |