Source

Папаўеры

Дакументацыя і прыклады дадання ўсплывальных вобразаў 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.

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

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

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

Адзін са спосабаў ініцыялізаваць усе ўсплывальныя вокны на старонцы - выбраць іх па 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>тэг, а не тэг <button>, і вы таксама павінны ўключыць tabindexатрыбут.

<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="".

Імя Тып Па змаўчанні Апісанне
анімацыя лагічны праўда Прымяніце пераход знікнення CSS да ўсплываючага акна
кантэйнер радок | элемент | ілжывы ілжывы

Дадае ўсплывальнае акно да пэўнага элемента. Прыклад: container: 'body'. Гэтая опцыя асабліва карысная ў тым плане, што яна дазваляе размясціць усплывальнае акно ў патоку дакумента побач з запускаючым элементам, што прадухіліць адплыванне ўсплываючага акна ад запускаючага элемента падчас змены памеру акна.

змест радок | элемент | функцыя ''

Значэнне змесціва па змаўчанні, калі data-contentатрыбут адсутнічае.

Калі функцыя зададзена, яна будзе выкліканая са thisспасылкай на элемент, да якога далучана ўсплывальнае акно.

затрымка нумар | аб'ект 0

Затрымка паказу і схавання ўсплываючага акна (мс) - не прымяняецца да ручнога тыпу запуску

Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу

Структура аб'екта:delay: { "show": 500, "hide": 100 }

html лагічны ілжывы Устаўце HTML ва ўсплывальнае акно. Калі false, textдля ўстаўкі кантэнту ў DOM будзе выкарыстоўвацца метад jQuery. Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS.
размяшчэнне радок | функцыя "права"

Як размясціць повер - аўто | уверх | унізе | злева | справа.
Калі autoпазначана, гэта будзе дынамічна пераарыентаваць усплывальнае вобраз.

Калі функцыя выкарыстоўваецца для вызначэння размяшчэння, яна выклікаецца з усплывальным вузлом DOM у якасці першага аргумента і запускаючым элементам вузла DOM у якасці другога. Кантэкст thisусталяваны для ўсплывальнага асобніка.

селектар радок | ілжывы ілжывы Калі прадастаўляецца селектар, усплывальныя аб'екты будуць дэлегаваны ўказаным мэтам. На практыцы гэта выкарыстоўваецца для таго, каб у дынамічны HTML-кантэнт дадаваліся ўсплывальныя вобразы. Глядзіце гэта і інфарматыўны прыклад .
шаблон радок '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Базавы HTML для выкарыстання пры стварэнні ўсплывальнага акна.

Поповер titleбудзе ўведзены ў .popover-header.

Поповер contentбудзе ўведзены ў .popover-body.

.arrowстане стралой паповера.

Самы знешні элемент-абгортка павінен мець .popoverклас.

назва радок | элемент | функцыя ''

Значэнне назвы па змаўчанні, калі titleатрыбут адсутнічае.

Калі функцыя зададзена, яна будзе выкліканая са thisспасылкай на элемент, да якога далучана ўсплывальнае акно.

трыгер радок "клік" Як спрацоўвае ўсплывальнае акно - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manualнельга спалучаць з любым іншым трыгерам.
зрушэнне нумар | радок 0 Зрушэнне ўсплывальнага экрана адносна яго мэты. Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Popper.js .
рэзервовае размяшчэнне радок | масіў "перавярнуць" Дазваляюць вызначыць, якую пазіцыю Попер будзе выкарыстоўваць пры адключэнні. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі паводзін Popper.js
мяжа радок | элемент 'scrollParent' Мяжа абмежавання перапаўнення ўсплываючага акна. Прымае значэнні 'viewport', 'window', 'scrollParent'або спасылку HTMLElement (толькі JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да Popper.js's preventOverflow docs .

Атрыбуты даных для асобных усплываючых акцый

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

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

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

Падзеі

Тып падзеі Апісанне
show.bs.popover Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
паказаны.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.popover Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
hidden.bs.popover Гэта падзея запускаецца, калі ўсплывальнае акно перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
устаўлена.bs.popover Гэта падзея запускаецца пасля show.bs.popoverпадзеі, калі ўсплывальны шаблон быў дададзены ў DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})