Последние учебники веб-разработки
 

Bootstrap JS Popover

❮ Предыдущий Следующий Ссылка ❯

JS Popover (popover.js)

Popover плагин похож на всплывающие подсказки; это всплывающее окно, которое появляется, когда пользователь нажимает на элемент. Разница заключается в том, что popover может содержать гораздо больше контента.

Плагин зависимость: Popovers требует подсказке плагин (tooltip.js) , которые будут включены в вашу версию Bootstrap .

Для учебника о Popovers , читайте наш Bootstrap Popover Учебник .

Via data-* Атрибуты

data-toggle="popover" активирует popover .

title атрибута определяет текст заголовка в popover .

data-content атрибут определяет текст , который должен отображаться внутри popover's теле.

пример

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Попробуй сам "

Через JavaScript

Popovers не являются CSS только плагины, и , следовательно , должны быть инициализированы с JQuery: выбрать указанный элемент и вызовите popover() метод.

пример

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
Попробуй сам "

Popover Опции

Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к data- , так как в data-placement="" .

имя Тип По умолчанию Описание Попробуй
animationbooleantrue

Указывает , следует ли добавить эффект перехода CSS к выцветанию при открытии и закрытии popover

  • правда - Добавить замирание
  • ложь - Не добавляйте затухающий эффект
Попробуй
containerstring, or the boolean falsefalse Присоединяет popover к конкретному элементу.
Пример: Контейнер: 'body' 		Попробуй
contentstring"" Определяет текст внутри popover's body Попробуй
delaynumber, or object0 Задает количество миллисекунд , которое потребуется , чтобы открыть и закрыть popover .

Чтобы задать задержку для открытия и еще один для закрытия, используйте структуру объекта:

delay: {show: 500, hide: 100} - который займет 500 мс , чтобы открыть popover , но только 100 мс , чтобы закрыть его 		Попробуй
htmlbooleanfalse Указывает , следует ли принимать HTML - теги в popover :
  • true - Принимать HTML - теги
  • false - Не принимайте HTML - теги
Примечание: HTML должен быть вставлен в атрибуте заголовка (или с помощью опции в заголовке).

Если установлено значение ложного ( по умолчанию), Jquery в text() будет использоваться метод. Используйте это, если вы беспокоитесь о нападениях XSS 		Попробуй
placementstring"right" Определяет popover позицию. Возможные значения:

  • "top" - Popover на вершине
  • "bottom" - Popover на дно
  • "left" - Popover на левой стороне
  • "right" - Popover справа
  • "auto" - Позволяет браузеру решить позицию popover . Например, если значение "auto left" , то popover будет отображаться на левой стороне , когда это возможно, в противном случае с правой стороны . Если значение "auto bottom" , то popover будет отображаться в нижней части, когда это возможно, в противном случае на вершине
Попробуй
selectorstring, or the boolean falsefalse Добавляет popover к определенному селектору Попробуй
templatestring  Базовый HTML, чтобы использовать при создании поповер.

В popover's заголовке будет введен в .popover-заголовка.

В popover's контент будет введен в .popover-контента.

.arrow станет popover's стрелка.

Наружный элемент обертки должен иметь .popover класс.
titlestring"" Задает текст заголовка в popover Попробуй
triggerstring"click" Определяет , как popover срабатывает. Возможные значения:

  • "click" - Триггер popover с щелчком
  • "hover" - Триггер popover на парении
  • "focus" - Триггер popover , когда он получает фокус (при обходе или нажав .eg)
  • "manual" - Триггер popover вручную
Совет: Чтобы передать несколько значений, разделив их пробелом 		Попробуй
viewportstring, or object{selector: "body", padding: 0} Сохраняет popover в пределах границ этого элемента.

Пример: viewport: '#viewport' или {selector: '#viewport', padding: 0}

Popover Методы

В следующей таблице перечислены все доступные popover методы.

метод Описание Попробуй
.popover( options ) Активизирует поповер с опцией. См варианты выше для допустимых значений Попробуй
.popover("show") Показывает popover Попробуй
.popover("hide") Скрывает popover Попробуй
.popover("toggle") Переключает поповер Попробуй
.popover("destroy") Скрывает и уничтожает поповер Попробуй

Popover События

В следующей таблице перечислены все доступные popover события.

Мероприятие Описание Попробуй
show.bs.popover Происходит , когда popover собирается показать Попробуй
shown.bs.popover Происходит , когда popover полностью показано (после того, как CSS переходы завершено) Попробуй
hide.bs.popover Происходит , когда popover собирается быть скрыты Попробуй
hidden.bs.popover Происходит , когда popover полностью скрыт (после того, как CSS переходы завершено) Попробуй
Примеры

Примеры

Пользовательские Popover Design

Используйте CSS , чтобы настроить внешний вид popover :

пример

 /* 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;
}
Попробуй сам "

❮ Предыдущий Следующий Ссылка ❯