Bootstrap — Popover Плагин

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

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

использование

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

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

Через атрибуты данных — чтобы добавить поповер, добавьте data-toggle = «popover» к тегу привязки / кнопки. Название якоря будет текстом всплывающего окна. По умолчанию всплывающее окно установлено плагином наверх.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

• Через JavaScript — включить всплывающие окна через JavaScript, используя следующий синтаксис —

Через JavaScript — включить всплывающие окна через JavaScript, используя следующий синтаксис —

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

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

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

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

пример

В следующем примере демонстрируется использование плагина 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. В следующей таблице перечислены параметры —

delay: { show: 500, hide: 100 }

Если задано значение auto , оно динамически переориентирует всплывающее окно. Например, если для размещения выбрано «auto left», поповер будет отображаться слева, когда это возможно, в противном случае он будет отображаться справа.

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

методы

Ниже приведены некоторые полезные методы для popover —

$().popover(options)

$('#element').popover('toggle')

$('#element').popover('show')

$('#element').popover('hide')

$('#element').popover('destroy')

Опции — .popover (опции)

Toggle — .popover (‘toggle’)

Показать — .popover (‘показать’)

Скрыть — .popover («скрыть»)

Уничтожить — .popover (‘уничтожить’)

пример

В следующем примере демонстрируются методы плагина 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. Это событие может быть использовано для подключения к функции.

$('#mypopover').on('show.bs.popover', function () {
   // do something
})

$('#mypopover').on('shown.bs.popover', function () {
   // do something
})

$('#mypopover').on('hide.bs.popover', function () {
   // do something
})

$('#mypopover').on('hidden.bs.popover', function () {
   // do something
})

пример

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