Папаўеры

Дакументацыя і прыклады дадання ўсплывальных вобразаў Bootstrap, такіх як тыя, што ёсць у iOS, да любога элемента вашага сайта.

Агляд

Што трэба ведаць пры выкарыстанні плагіна Popover:

• Popovers абапіраюцца на староннюю бібліятэку Popper.js для пазіцыянавання. Вы павінны ўключыць popper.min.js перад bootstrap.js або выкарыстаць bootstrap.bundle.min.js/ bootstrap.bundle.js, які змяшчае Popper.js, каб усплывальныя паказальнікі працавалі!
• Для ўсплывальных праграм у якасці залежнасці патрабуецца ўбудова падказкі .
• Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js .
• Усплывальныя паказанні з'яўляюцца выбарнымі з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
• Нулявая даўжыня titleі contentзначэнні ніколі не пакажуць усплывальнае значэнне.
• Укажыце container: 'body', каб пазбегнуць праблем з візуалізацыяй больш складаных кампанентаў (напрыклад, нашых груп уводу, груп кнопак і г.д.).
• Запуск усплываючых вокнаў на схаваных элементах не будзе працаваць.
• Усплывальныя вокны для элементаў .disabledабо disabledпавінны запускацца на элеменце-абгортцы.
• Пры запуску з прывязак, якія пераходзяць на некалькі ліній, усплывальныя вокны будуць размяшчацца па цэнтры агульнай шырыні прывязак. Выкарыстоўвайце .text-nowrapна вашым <a>s, каб пазбегнуць такіх паводзін.
• Усплывальныя вокны павінны быць схаваныя, перш чым адпаведныя элементы будуць выдалены з DOM.
• Усплывальныя паказы могуць быць выкліканыя дзякуючы элементу ўнутры ценявога DOM.

Працягвайце чытаць, каб даведацца, як працуюць усплывальныя вобразы з некаторымі прыкладамі.

Прыклад: уключыце ўсплывальныя вокны ўсюды

Адзін са спосабаў ініцыялізаваць усе ўсплывальныя вокны на старонцы - выбраць іх па data-toggleатрыбутах:

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

Прыклад: выкарыстанне containerопцыі

Калі ў вас ёсць некаторыя стылі на бацькоўскім элеменце, якія перашкаджаюць усплываючаму паказу, вы захочаце ўказаць карыстальніцкі container, каб HTML-код усплывальнага элемента з'яўляўся ў гэтым элеменце.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Прыклад

<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 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'
})

Адключаныя элементы

Элементы з disabledатрыбутам не з'яўляюцца інтэрактыўнымі, што азначае, што карыстальнікі не могуць наводзіць курсор мышы або націскаць на іх, каб выклікаць усплывальнае акно (або падказку). У якасці абыходнага шляху вы захочаце запусціць усплывальнае акно з абалонкі <div>або <span>перавызначыць pointer-eventsэлемент адключанага элемента.

Для адключаных усплывальных трыгераў вы таксама можаце аддаць перавагу data-trigger="hover", каб усплывальнае акно з'яўлялася як неадкладная візуальная зваротная сувязь для вашых карыстальнікаў, паколькі яны могуць не спадзявацца націснуць на адключаны элемент.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Выкарыстанне

Уключыць усплывальныя вокны праз JavaScript:

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

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-, як у data-animation="".

Метады

$().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')

.popover('enable')

Дае магчымасць паказу ўсплывальнага вокны элемента. Усплывальныя вокны ўключаны па змаўчанні.

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

.popover('disable')

Выдаляе магчымасць паказу ўсплывальнага вокны элемента. Усплывальнае акно можна будзе паказаць, толькі калі яно будзе зноў уключана.

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

.popover('toggleEnabled')

Уключае магчымасць паказу або схавання ўсплывальнага вокны элемента.

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

.popover('update')

Абнаўляе пазіцыю ўсплывальнага экрана элемента.

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

Падзеі

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