Компьютерапия

Bootstrap - Плагин Popover

Категория: Bootstrap 3
Просмотров: 2046

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

Содержание:

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

Применение Popover

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

  • Через атрибуты данных. Чтобы добавить popover, добавьте data-toggle = "popover" в тег привязки/кнопки. Заголовок якоря будет текстом popover. По умолчанию popover установлен в верхнюю часть плагина. 
    <a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>
  • Через JavaScript - Включить popover через JavaScript, используя следующий синтаксис - 
    $('#identifier').popover(options)

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

$(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>

Опции Popover

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

Название опции Тип/значение по умолчанию Имя атрибута данных Описание
animationboolean Значение по умолчанию - truedata-animationПрименяет переход постепенного перехода CSS к popover.
htmlboolean Значение по умолчанию - falsedata-htmlВставляет HTML в popover. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят атаки XSS.
placementstring | function По умолчанию - верхdata-placementУказывает, как позиционировать popover (т. Е. Top | bottom | left | right | auto). Когда указывается auto , он будет динамически переориентировать popover. Например, если место размещения «авто слева», положу будет отображаться слева, когда это возможно, иначе оно будет отображаться справа.
selectorstring Значение по умолчанию - falsedata-selectorЕсли предусмотрен селектор, объекты popover будут делегированы указанным целям.
titlestring | function По умолчанию - ""data-titleОпция title является значением названия по умолчанию, если атрибут title отсутствует.
triggerstring По умолчанию - 'hover focus'data-triggerОпределяет, как запускается popover - click | hover | focus | manual . Вы можете передавать несколько триггеров; отделите их пространством.
delaynumber | объект По умолчанию - 0data-delayЗадержки, показывающие и скрывающие popover в ms - не применяются к ручному типу триггера. Если задано число, задержка применяется как к экрану, так и к экрану. Структура объекта- delay: {show: 500, hide: 100}
containerstring | false Значение по умолчанию - falsedata-containerДобавляет popover к определенному элементу. Пример: container: 'body'

Методы Popover

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

Метод Описание Пример
Options - .popover (опции)Прикрепляет обработчик popover к коллекции элементов.
$().popover(options)
Toggle - .popover ('toggle')Переключает popover элемента.
$('#element').popover('toggle')
Show - .popover ('show')Отображает popover элемента.
$('#element').popover('show')
Hide - .popover ('hide')Скрывает popover элемента.
$('#element').popover('hide')
Destroy - .popover ('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>
           
   






  
   <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

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

Метод Описание Пример
show.bs.popoverЭто событие срабатывает сразу же после вызова метода show instance.
$('#mypopover').on('show.bs.popover', function () {
   // do something
})
shown.bs.popoverЭто событие запускается, когда 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Это событие запускается, когда 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>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok