Папаўеры
Дакументацыя і прыклады дадання ўсплывальных вобразаў 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.
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 да ўсплываючага акна |
кантэйнер | радок | элемент | ілжывы | ілжывы | Дадае ўсплывальнае акно да пэўнага элемента. Прыклад: |
змест | радок | элемент | функцыя | '' | Значэнне змесціва па змаўчанні, калі Калі функцыя зададзена, яна будзе выкліканая са |
затрымка | нумар | аб'ект | 0 | Затрымка паказу і схавання ўсплываючага акна (мс) - не прымяняецца да ручнога тыпу запуску Калі ўказана лічба, затрымка прымяняецца як для схавання, так і для паказу Структура аб'екта: |
html | лагічны | ілжывы | Устаўце HTML ва ўсплывальнае акно. Калі false, text для ўстаўкі кантэнту ў DOM будзе выкарыстоўвацца метад jQuery. Выкарыстоўвайце тэкст, калі вы турбуецеся аб атаках XSS. |
размяшчэнне | радок | функцыя | "права" | Як размясціць повер - аўто | уверх | унізе | злева | справа. Калі функцыя выкарыстоўваецца для вызначэння размяшчэння, яна выклікаецца з усплывальным вузлом DOM у якасці першага аргумента і запускаючым элементам вузла DOM у якасці другога. Кантэкст |
селектар | радок | ілжывы | ілжывы | Калі прадастаўляецца селектар, усплывальныя аб'екты будуць дэлегаваны ўказаным мэтам. На практыцы гэта выкарыстоўваецца для таго, каб у дынамічны HTML-кантэнт дадаваліся ўсплывальныя вобразы. Глядзіце гэта і інфарматыўны прыклад . |
шаблон | радок | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Базавы HTML для выкарыстання пры стварэнні ўсплывальнага акна. Popover's Popover's
Самы знешні элемент-абгортка павінен мець |
назва | радок | элемент | функцыя | '' | Значэнне загалоўка па змаўчанні, калі Калі функцыя зададзена, яна будзе выкліканая са |
трыгер | радок | "клік" | Як спрацоўвае ўсплывальнае акно - націсніце | лунаць | фокус | кіраўніцтва. Вы можаце перадаць некалькі трыгераў; падзяліце іх прабелам. manual нельга спалучаць з любым іншым трыгерам. |
зрушэнне | нумар | радок | 0 | Зрушэнне ўсплывальнага экрана адносна яго мэты. Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера . |
рэзервовае размяшчэнне | радок | масіў | "перавярнуць" | Дазваляюць вызначыць, якую пазіцыю Попер будзе выкарыстоўваць пры адключэнні. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі паводзін Попера |
customClass | радок | функцыя | '' | Дадайце класы ва ўсплывальнае акно, калі яно паказана. Звярніце ўвагу, што гэтыя класы будуць дададзены ў дадатак да любых класаў, указаных у шаблоне. Каб дадаць некалькі класаў, падзяліце іх прабеламі: Вы таксама можаце перадаць функцыю, якая павінна вяртаць адзіны радок, які змяшчае дадатковыя імёны класаў. |
мяжа | радок | элемент | '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...
})