in English

Папаўеры

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

Агляд

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

  • Для пазіцыянавання Popovers разлічваюць на староннію бібліятэку Popper . Вы павінны ўключыць popper.min.js перад bootstrap.js або выкарыстоўваць bootstrap.bundle.min.js/ bootstrap.bundle.js, які змяшчае Popper, каб усплывальныя ўсплывальныя ўказанні працавалі!
  • Для ўсплывальных праграм у якасці залежнасці патрабуецца ўбудова падказкі .
  • Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js .
  • Усплывальныя паказанні з'яўляюцца выбарнымі з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
  • Нулявая даўжыня titleі contentзначэнні ніколі не пакажуць усплывальнае значэнне.
  • Укажыце container: 'body', каб пазбегнуць праблем з візуалізацыяй больш складаных кампанентаў (напрыклад, нашых груп уводу, груп кнопак і г.д.).
  • Запуск усплываючых вокнаў на схаваных элементах не будзе працаваць.
  • Усплывальныя вокны для элементаў .disabledабо disabledпавінны запускацца на элеменце-абгортцы.
  • Пры запуску з прывязак, якія пераходзяць на некалькі ліній, усплывальныя вокны будуць размяшчацца па цэнтры агульнай шырыні прывязак. Выкарыстоўвайце .text-nowrapна вашым <a>s, каб пазбегнуць такіх паводзін.
  • Усплывальныя вокны павінны быць схаваныя, перш чым адпаведныя элементы будуць выдалены з DOM.
  • Усплывальныя паказы могуць быць выкліканыя дзякуючы элементу ўнутры ценявога DOM.
Па змаўчанні гэты кампанент выкарыстоўвае ўбудаваны сродак ачысткі змесціва, які выдаляе любыя элементы HTML, якія відавочна не дазволены. Больш падрабязную інфармацыю глядзіце ў раздзеле дэзінфікуючых сродкаў у нашай дакументацыі па JavaScript .
Анімацыйны эфект гэтага кампанента залежыць ад 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="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  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)
Паскарэнне GPU

Усплывальныя вокны часам выглядаюць размытымі на прыладах Windows 10 з-за паскарэння графічнага працэсара і мадыфікаванага DPI сістэмы. Абыходным шляхам у v4 з'яўляецца адключэнне паскарэння графічнага працэсара па меры неабходнасці на вашых усплывальных экранах.

Прапанаванае выпраўленне:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Стварэнне ўсплывальных вобразаў для карыстальнікаў клавіятуры і дапаможных тэхналогій

Каб дазволіць карыстальнікам клавіятуры актываваць вашы ўсплывальныя вобразы, вы павінны дадаваць іх толькі ў элементы HTML, якія традыцыйна з'яўляюцца інтэрактыўнымі і факусуюць з клавіятуры (напрыклад, спасылкі або элементы кіравання формамі). Нягледзячы на ​​​​тое, што адвольныя элементы HTML (напрыклад, <span>s) можна зрабіць фокуснымі, дадаўшы tabindex="0"атрыбут, гэта дадасць патэнцыйна раздражняльныя і заблытаныя прыпынкі табуляцыі на неінтэрактыўныя элементы для карыстальнікаў клавіятуры, і большасць дапаможных тэхналогій у цяперашні час не абвяшчаюць змесціва ўсплывальнага экрана ў гэтай сітуацыі . Акрамя таго, не спадзявайцеся толькі на hoverтое, што гэта будзе трыгер для вашых усплываючых вобразаў, бо гэта зробіць іх немагчымымі для карыстальнікаў клавіятуры.

Нягледзячы на ​​тое, што вы можаце ўставіць насычаны, структураваны HTML ва ўсплывальныя вокны з дапамогай гэтай htmlопцыі, мы настойліва рэкамендуем вам пазбягаць дадання празмернай колькасці змесціва. Тое, як усплывальныя вобразы працуюць у цяперашні час, заключаецца ў тым, што пасля адлюстравання іх змесціва прывязваецца да трыгернага элемента з aria-describedbyатрыбутам. У выніку ўвесь кантэнт popover будзе абвешчаны карыстальнікам дапаможных тэхналогій у выглядзе аднаго доўгага бесперапыннага патоку.

Акрамя таго, хоць можна таксама ўключаць інтэрактыўныя элементы кіравання (напрыклад, элементы формы або спасылкі) у ваша ўсплывальнае акно (шляхам дадання гэтых элементаў у whiteListабо дазволеныя атрыбуты і тэгі), майце на ўвазе, што ў цяперашні час ўсплывальнае акно не кіруе парадкам фокусу клавіятуры. Калі карыстальнік клавіятуры адкрывае ўсплывальнае акно, фокус застаецца на запускаючым элеменце, і паколькі ўсплывальнае акно звычайна не ідзе адразу пасля трыгера ў структуры дакумента, няма гарантыі, што перасоўванне наперад/націскTABперамясціць карыстальніка клавіятуры ў само ўсплывальнае акно. Карацей кажучы, простае даданне інтэрактыўных элементаў кіравання да ўсплываючага акна, хутчэй за ўсё, зробіць гэтыя элементы кіравання недаступнымі/непрыдатнымі для карыстальнікаў клавіятуры і дапаможных тэхналогій, або, як мінімум, створыць нелагічны агульны парадак фокусу. У такіх выпадках лепш выкарыстоўваць мадальнае дыялогавае акно.

Параметры

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

Звярніце ўвагу, што з меркаванняў бяспекі параметры sanitize, sanitizeFnі whiteListне могуць быць прадастаўлены з выкарыстаннем атрыбутаў даных.
Імя Тып Па змаўчанні Апісанне
анімацыя лагічны праўда Прымяніце пераход знікнення 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 для выкарыстання пры стварэнні ўсплывальнага акна.

Popover's titleбудзе ўведзены ў .popover-header.

Popover's contentбудзе ўведзены ў .popover-body.

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

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

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

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

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

трыгер радок "клік" Як спрацоўвае ўсплывальнае акно - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manualнельга спалучаць з любым іншым трыгерам.
зрушэнне нумар | радок 0 Зрушэнне ўсплывальнага экрана адносна яго мэты. Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера .
рэзервовае размяшчэнне радок | масіў "перавярнуць" Дазваляюць вызначыць, якую пазіцыю Попер будзе выкарыстоўваць пры адключэнні. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі паводзін Попера
customClass радок | функцыя ''

Дадайце класы ва ўсплывальнае акно, калі яно паказана. Звярніце ўвагу, што гэтыя класы будуць дададзены ў дадатак да любых класаў, указаных у шаблоне. Каб дадаць некалькі класаў, падзяліце іх прабеламі: 'a b'.

Вы таксама можаце перадаць функцыю, якая павінна вяртаць адзіны радок, які змяшчае дадатковыя імёны класаў.

мяжа радок | элемент 'scrollParent' Мяжа абмежавання перапаўнення ўсплываючага акна. Прымае значэнні 'viewport', 'window', 'scrollParent'або спасылку HTMLElement (толькі JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да Popper's preventOverflow дакументацыі .
дэзінфікаваць лагічны праўда Уключыце або выключыце дэзінфекцыю. Калі актывавана 'template', 'content'і 'title'параметры будуць ачышчаны. Глядзіце раздзел дэзінфікуючых сродкаў у нашай дакументацыі па JavaScript .
белы спіс аб'ект Значэнне па змаўчанні Аб'ект, які змяшчае дазволеныя атрыбуты і тэгі
дэзінфікавацьFn нуль | функцыя нуль Тут вы можаце паставіць сваю ўласную функцыю дэзінфекцыі. Гэта можа быць карысна, калі вы аддаеце перавагу выкарыстоўваць спецыяльную бібліятэку для правядзення дэзінфекцыі.
popperConfig нуль | аб'ект нуль Каб змяніць стандартную канфігурацыю Popper Bootstrap, глядзіце канфігурацыю Popper

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

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

Метады

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

Усе метады 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...
})