Skip to main content

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Информеры

Добавить небольшим содержанием наложения, как в iOS, к любому элементу на жилье вторичной информации.

Содержание

Обзор

Что нужно знать при использовании плагина пирог:

  • Информеры полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js чтобы информеры на работу!
  • Информеры требуют подсказка плагин как зависимость.
  • Информеры опт-по соображениям производительности, так вы должны инициализировать их самостоятельно.
  • Нулевой длины 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'
  })
})

Статические пирог

Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

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 атрибута.

Dismissible popover 
<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

Прикрепляет пирог к определенному элементу. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать диалоговое окно в потоке документа рядом с пусковым элементом, который предотвратит пирог уплывает с пусковым элементом при изменении размеров окна.
content string | element | function ''

Значение по умолчанию содержания если атрибут data-content Нет.

Если дана функция, она будет вызвана с его this ссылки на значение элемента, пирог прикреплен.
delay number | object 0

Задержка отображение и скрытие диалогового окна (мс) - не применяется к ручной запуск Тип

Если номер указан, задержка применяется как скрыть/показать

Структура объекта: delay: { "show": 500, "hide": 100 }
html boolean false Вставить HTML-код в всплывающем окне. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак.
placement string | function 'right'

Как пирог - верх | низ | влево | вправо | авто.
когда "авто" указано, оно будет динамически переориентировать пирог. Например, если размещение "авто слева", в всплывающем окне будет отображаться слева, когда это возможно, в противном случае будет отображаться правильно.

Когда функция используется для определения размещения, это называется с диалоговым окном DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В this контекст имеет значение экземпляра диалогового окна.
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 вводится в поток .popover-title.

Этот пирог по content вводится в поток .popover-content.

.popover-arrow станет стрелка пирог по.

Элемент внешней оболочки должен иметь .popover класс.
title string | element | function ''

По умолчанию название значение, если атрибут title Нет.

Если дана функция, она будет вызвана с его this ссылки на значение элемента, пирог прикреплен.
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 () {
  // сделать что-то...
})