Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Добавить небольшим содержанием наложения, как в iOS, к любому элементу на жилье вторичной информации.
container
опцияЧто нужно знать при использовании плагина пирог:
title
и content
значениями не будет показывать диалоговое окно.container: 'body'
чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших группы ввода, групп кнопки и т. д.)..disabled
или disabled
элементы должны быть вызваны на элемент оболочки.white-space: nowrap;
на <a>
, чтобы избежать этого поведения.Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.
Одним из способов инициализации все информеры на странице будет выбрать их data-toggle
атрибута:
$(function () {
$('[data-toggle="popover"]').popover()
})
container
опцияКогда у вас есть некоторые стили родительского элемента, которые мешают всплывающие виджеты, вы хотите, чтобы указать настраиваемый container
так что пирог по HTML, а появляется в этом элементе.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
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" 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
триггер чтобы закрыть информеры на следующий щелчок мышью, который пользователь делает.
Для правильного кросс-браузерной и кросс-платформенной поведение, вы должны использовать <a>
тег, not в <button>
тег, и Вы также должны включать в себя tabindex
атрибута.
<a tabindex="0" class="btn btn-lg btn-danger" 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)
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-
, а на data-animation=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
animation | boolean | true | Нанесите CSS исчезать переход к диалоговым окном |
container | string | false | false |
Прикрепляет пирог к определенному элементу. Пример: |
content | string | element | function | '' |
Значение по умолчанию содержания если атрибут Если дана функция, она будет вызвана с его |
delay | number | object | 0 |
Задержка отображение и скрытие диалогового окна (мс) - не применяется к ручной запуск Тип Если номер указан, задержка применяется как скрыть/показать Структура объекта: |
html | boolean | false | Вставить HTML-код в всплывающем окне. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак. |
placement | string | function | 'right' |
Как пирог - верх | низ | влево | вправо | авто. Когда функция используется для определения размещения, это называется с диалоговым окном DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В |
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 | string | element | function | '' |
По умолчанию название значение, если атрибут Если дана функция, она будет вызвана с его |
trigger | string | 'click' | Как пирог инициируется - нажмите кнопку | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. "вручную" не может сочетаться с любой другой триггер. |
constraints | Array | 'hover focus' | Множество препятствий - прошел на Tether. Дополнительные сведения см. в разделе Tether'ы ограничение документы. |
offset | string | '0 0' | Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether'ы смещение документы. |
Варианты индивидуальных подсказок также может быть задан с помощью атрибутов данных, как описано выше.
$().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('dispose')
Скрывает и уничтожает диалогового окна элемента. Информеры, которые используют делегации (которые создаются с помощью в selector
опция) не может быть индивидуально уничтожен потомок триггерных элементов.
$('#element').popover('dispose')
Тип События | Описание |
---|---|
show.bs.popover | Это событие возникает сразу же, когда show способ экземпляра называется. |
shown.bs.popover | Это событие запускается, когда пирог был сделан видимым для пользователя (будет ждать CSS переходы для завершения). |
hide.bs.popover | Это событие сразу же уволили, когда hide метод экземпляра называется. |
hidden.bs.popover | Это событие запускается, когда пирог закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения). |
$('#myPopover').on('hidden.bs.popover', function () {
// сделать что-то...
})