Bootstrap - плагин Popover

Всплывающее окно похоже на всплывающую подсказку, предлагая расширенный вид с заголовком. Чтобы всплывающее окно активировалось, пользователю просто нужно навести курсор на элемент. Содержимое всплывающего окна можно полностью заполнить с помощью API данных Bootstrap. Для этого метода требуется всплывающая подсказка.

Если вы хотите включить эту функциональность плагина индивидуально, вам понадобится popover.jsи он зависит от плагина всплывающей подсказки . В противном случае, как упоминалось в главе Обзор подключаемых модулей Bootstrap , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

Применение

Плагин popover генерирует контент и разметку по запросу и по умолчанию помещает всплывающее окно после их триггерного элемента. Вы можете добавить всплывающее окно двумя способами:

  • Via data attributes - Чтобы добавить всплывающее окно, добавьте data-toggle = "popover"к тегу привязки / кнопки. Заголовок якоря будет текстом всплывающего окна. По умолчанию плагин устанавливает всплывающее окно вверху.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Via JavaScript - Включите всплывающие окна через JavaScript, используя следующий синтаксис -

$('#identifier').popover(options)

Плагин Popover - это НЕ только плагины css, такие как dropdown или другие плагины, обсуждаемые в предыдущих главах. Чтобы использовать этот плагин, вы ДОЛЖНЫ активировать его с помощью jquery (читайте javascript). Чтобы включить все всплывающие окна на вашей странице, просто используйте этот скрипт -

$(function () { $("[data-toggle = 'popover']").popover(); });

пример

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

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

Параметры

Существуют определенные параметры, которые можно добавить через API данных Bootstrap или вызвать через JavaScript. В следующей таблице перечислены параметры -

Название опции Тип / значение по умолчанию Имя атрибута данных Описание
анимация логическое значение По умолчанию - true данные-анимация Применяет переход CSS постепенного изменения к всплывающему окну.
html логическое значение По умолчанию - false data-html Вставляет HTML в всплывающее окно. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят XSS-атаки.
размещение строка | функция По умолчанию - вверх размещение данных Определяет, как расположить всплывающее окно (т. Е. Вверху | внизу | слева | справа | автоматически). Когда указано auto , всплывающее окно будет динамически переориентировано. Например, если для размещения выбрано значение «auto left», всплывающее окно будет отображаться слева, когда это возможно, в противном случае оно будет отображаться справа.
селектор строка По умолчанию - false селектор данных Если предусмотрен селектор, объекты всплывающих окон будут делегированы указанным целям.
заглавие строка | функция По умолчанию - " заголовок данных Параметр заголовка является значением заголовка по умолчанию, если атрибут заголовка отсутствует.
спусковой крючок строка По умолчанию - 'hover focus' триггер данных Определяет, как запускается всплывающее окно - click| hover | focus | manual. Вы можете передать несколько триггеров; разделите их пробелом.
задержка номер | объект по умолчанию - 0 задержка данных

Задержки отображения и скрытия всплывающего окна в мс - не относится к ручному типу триггера. Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта -

delay: { show: 500, hide: 100 }
контейнер строка | false По умолчанию - false контейнер данных Добавляет всплывающее окно к определенному элементу. Пример: контейнер: 'тело'

Методы

Ниже приведены некоторые полезные методы для всплывающего окна:

Метод Описание пример

Options - .popover (параметры)

Присоединяет обработчик всплывающего окна к коллекции элементов.
$().popover(options)

Toggle - .popover ('переключатель')

Переключает всплывающее окно элемента.
$('#element').popover('toggle')

Show - .popover ('показать')

Показывает всплывающее окно элемента.
$('#element').popover('show')

Hide - .popover ('скрыть')

Скрывает всплывающее окно элемента.
$('#element').popover('hide')

Destroy - .popover ('уничтожить')

Скрывает и уничтожает всплывающее окно элемента.
$('#element').popover('destroy')

пример

В следующем примере демонстрируются методы подключаемого модуля popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

События

В следующей таблице перечислены события для работы с плагином popover. Это событие можно использовать для подключения к функции.

Событие Описание пример
show.bs.popover Это событие срабатывает сразу после вызова метода экземпляра шоу.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
показано.bs.popover Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ожидать завершения переходов CSS).
$('#mypopover').on('shown.bs.popover', function () {
   // do something
})
hide.bs.popover Это событие запускается сразу после вызова метода экземпляра hide.
$('#mypopover').on('hide.bs.popover', function () {
   // do something
})
hidden.bs.popover Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

пример

В следующем примере демонстрируются события плагина Popover -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>