Պոպովերներ

Փաստաթղթեր և օրինակներ՝ Bootstrap popover-ներ, ինչպիսիք են iOS-ում հայտնաբերվածները, ձեր կայքի ցանկացած տարրին ավելացնելու համար:

Ընդհանուր ակնարկ

Բաներ, որոնք պետք է իմանալ popover plugin-ն օգտագործելիս.

Պոպովերը ապավինում են երրորդ կողմի Popper գրադարանին դիրքավորման համար: Դուք պետք է ներառեք popper.min.js-ը bootstrap.js-ից առաջ կամ օգտագործեք bootstrap.bundle.min.js/ bootstrap.bundle.jsորը պարունակում է Popper, որպեսզի popover-ները աշխատեն:
Popover-ները պահանջում են գործիքի հուշում հավելվածը որպես կախվածություն:
Եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :
Popover-ները միանում են կատարողականի նկատառումներով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
Զրոյական երկարությունը titleև contentարժեքները երբեք չեն ցուցադրի պոպովեր:
Նշեք container: 'body'՝ ավելի բարդ բաղադրիչներում խնդիրներ չարտադրելու համար (օրինակ՝ մեր մուտքային խմբերը, կոճակների խմբերը և այլն):
Թաքնված տարրերի վրա popover-ների գործարկումը չի աշխատի:
Պոպովերը .disabledկամ disabledտարրերը պետք է գործարկվեն փաթաթման տարրի վրա:
Երբ գործարկվում են խարիսխներից, որոնք փաթաթվում են մի քանի գծերի վրայով, պոպովերը կկենտրոնացվեն խարիսխների ընդհանուր լայնության միջև: Օգտագործեք .text-nowrapձեր <a>s-ի վրա՝ այս պահվածքից խուսափելու համար:
Popover-ները պետք է թաքցվեն նախքան դրանց համապատասխան տարրերը DOM-ից հեռացնելը:
Popover-ները կարող են գործարկվել ստվերային DOM-ի ներսում գտնվող տարրի շնորհիվ:

Լռելյայնորեն, այս բաղադրիչն օգտագործում է ներկառուցված բովանդակության մաքրող միջոց, որը հեռացնում է HTML-ի բոլոր տարրերը, որոնք բացահայտորեն թույլատրված չեն: Լրացուցիչ մանրամասների համար տե՛ս ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում :

Այս բաղադրիչի անիմացիոն էֆեկտը կախված է prefers-reduced-motionլրատվամիջոցների հարցումից: Տեսեք մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :

Շարունակեք կարդալ՝ որոշ օրինակներով տեսնելու համար, թե ինչպես են աշխատում popover-ները:

Օրինակ. Միացնել popovers ամենուր

Էջի բոլոր popover-ները սկզբնավորելու եղանակներից մեկը կլինի դրանք ընտրելն իրենց data-toggleհատկանիշով.

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

Օրինակ. Օգտագործելով `container`տարբերակը

Երբ դուք ունեք որոշ ոճեր ծնող տարրի վրա, որոնք խանգարում են popover-ին, դուք պետք է նշեք սովորական containerտարբերակ, որպեսզի դրա փոխարեն popover-ի 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ձգանը՝ անջատելու տարրից տարբերվող տարրի օգտատիրոջ հաջորդ կտտոցով popover-ները հեռացնելու համար:

Հերթական սեղմումով անջատելու համար պահանջվում է հատուկ նշում

Բրաուզերի և միջպլատֆորմների պատշաճ վարքի համար դուք պետք է օգտագործեք <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ինտերակտիվ չեն, ինչը նշանակում է, որ օգտատերերը չեն կարող սավառնել կամ սեղմել դրանց վրա՝ բաց թողնելու համար (կամ գործիքի հուշում): Որպես լուծում, դուք պետք է գործարկեք «popover»-ը փաթաթվածից <div>կամ <span>անտեսեք pointer-eventsանջատված տարրը:

Անջատված popover գործարկիչների դեպքում դուք կարող եք նաև նախընտրել data-trigger="hover", որպեսզի popover-ը հայտնվի որպես անմիջական տեսողական արձագանք ձեր օգտատերերին, քանի որ նրանք չեն ակնկալում սեղմել անջատված տարրի վրա:

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

Օգտագործումը

Միացնել popover-ները JavaScript-ի միջոցով.

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

GPU արագացում

Popover-ները երբեմն մշուշոտ են հայտնվում Windows 10 սարքերում՝ GPU-ի արագացման և փոփոխված համակարգի DPI-ի պատճառով: v4-ում դրա լուծումը GPU-ի արագացումն անջատելն է, ըստ անհրաժեշտության ձեր popover-ների վրա:

Առաջարկվող ուղղում.

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

Ստեղնաշարի և օժանդակ տեխնոլոգիաների օգտատերերի համար պոպովեր պատրաստելը

Որպեսզի ստեղնաշարի օգտատերերին թույլատրեք ակտիվացնել ձեր popover-ները, դուք պետք է դրանք ավելացնեք միայն HTML տարրերին, որոնք ավանդաբար կենտրոնացված են ստեղնաշարի վրա և ինտերակտիվ են (օրինակ՝ հղումները կամ ձևի կառավարումը): Թեև կամայական HTML տարրերը (օրինակ՝ <span>s) կարող են կենտրոնացվել՝ ավելացնելով tabindex="0"հատկանիշը, սա ստեղնաշարի օգտագործողների համար կավելացնի պոտենցիալ նյարդայնացնող և շփոթեցնող ներդիրներ ոչ ինտերակտիվ տարրերի վրա, և օժանդակ տեխնոլոգիաների մեծ մասը ներկայումս չի հայտարարում popover-ի բովանդակության մասին այս իրավիճակում: . Բացի այդ, մի ապավինեք բացառապես hoverորպես ձեր popover-ների գործարկիչին, քանի որ դա անհնարին կդարձնի դրանք գործարկել ստեղնաշարի օգտագործողների համար:

Թեև դուք կարող եք հարուստ, կառուցվածքային HTML-ը տեղադրել popover-ներում այս htmlտարբերակով, մենք խստորեն խորհուրդ ենք տալիս խուսափել չափազանց մեծ քանակությամբ բովանդակություն ավելացնելուց: Պոպովերի ներկայիս աշխատանքի եղանակն այն է, որ ցուցադրվելուց հետո դրանց բովանդակությունը կապված է aria-describedbyհատկանիշով ձգանման տարրի հետ: Արդյունքում, popover-ի բովանդակության ամբողջությունը կհայտարարվի օժանդակ տեխնոլոգիաների օգտվողներին որպես մեկ երկար, անխափան հոսք:

Բացի այդ, թեև հնարավոր է նաև ներառել ինտերակտիվ կառավարումներ (օրինակ՝ ձևի տարրեր կամ հղումներ) ձեր popover-ում (ավելացնելով այս տարրերը whiteListկամ թույլատրված ատրիբուտներին և պիտակներին), տեղյակ եղեք, որ ներկայումս popover-ը չի կառավարում ստեղնաշարի ֆոկուսի հերթականությունը: Երբ ստեղնաշարի օգտագործողը բացում է popover-ը, կենտրոնացումը մնում է գործարկող տարրի վրա, և քանի որ popover-ը սովորաբար անմիջապես չի հետևում փաստաթղթի կառուցվածքի ձգանին, երաշխիք չկա, որ առաջ շարժվելը/սեղմելըTABկտեղափոխի ստեղնաշարի օգտագործողին հենց popover-ի մեջ: Մի խոսքով, ինտերակտիվ հսկիչները պարզապես ավելացնելով popover-ին, ամենայն հավանականությամբ, այս հսկիչները անհասանելի/անօգտագործելի կդարձնեն ստեղնաշարից օգտվողների և օժանդակ տեխնոլոգիաների օգտագործողների համար, կամ առնվազն անտրամաբանական ընդհանուր ֆոկուսային կարգի կհանգեցնեն: Այս դեպքերում, փոխարենը մտածեք մոդալ երկխոսության օգտագործման մասին:

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Նկատի ունեցեք, որ անվտանգության նկատառումներից ելնելով sanitize, sanitizeFnև whiteListտարբերակները չեն կարող տրամադրվել տվյալների ատրիբուտների միջոցով:

Անուն	Տիպ	Կանխադրված	Նկարագրություն
անիմացիա	բուլյան	ճիշտ	Կիրառեք CSS fade անցում դեպի popover
կոնտեյներ	լարային \| տարր \| կեղծ	կեղծ	Ավելացնում է popover-ը կոնկրետ տարրի վրա: Օրինակ՝ `container: 'body'`. Այս տարբերակը հատկապես օգտակար է նրանով, որ այն թույլ է տալիս փաստաթղթի հոսքի մեջ տեղադրել popover-ը գործարկող տարրի մոտ, ինչը թույլ չի տա, որ popover-ը հեռանա գործարկող տարրից պատուհանի չափափոխման ժամանակ:
բովանդակությունը	լարային \| տարր \| ֆունկցիան	''	Բովանդակության կանխադրված արժեքը, եթե `data-content`հատկանիշը չկա: Եթե տրված է ֆունկցիա, այն կկանչվի իր `this`հղումներով այն տարրին, որին կցված է popover-ը:
ուշացում	համարը \| օբյեկտ	0	Պոպովերի ցուցադրման և թաքցման հետաձգումը (ms) - չի տարածվում ձեռքով ձգանման տեսակի վրա Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է.`delay: { "show": 500, "hide": 100 }`
html	բուլյան	կեղծ	Տեղադրեք HTML-ը popover-ի մեջ: Եթե կեղծ է, jQuery-ի `text`մեթոդը կօգտագործվի DOM-ում բովանդակություն մտցնելու համար: Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները:
տեղաբաշխում	լարային \| ֆունկցիան	'ճիշտ'	Ինչպես տեղադրել popover - auto \| վերև \| ստորին \| ձախ \| ճիշտ. Երբ `auto`նշված է, այն դինամիկ կերպով կվերակողմնորոշի popover-ը: Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է՝ որպես առաջին արգումենտ popover DOM հանգույցը, իսկ երկրորդը՝ DOM հանգույցը՝ գործարկող տարրը: Համատեքստը `this`դրված է popover օրինակին:
ընտրիչ	լարային \| կեղծ	կեղծ	Եթե ընտրիչ է տրամադրվում, popover օբյեկտները կփոխանցվեն նշված թիրախներին: Գործնականում սա օգտագործվում է դինամիկ HTML բովանդակության համար, որպեսզի ավելացվեն popovers: Տեսեք սա և տեղեկատվական օրինակ :
կաղապար	լար	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Բազային HTML-ն օգտագործելու համար popover-ը ստեղծելիս: The popover- `title`ը ներարկվելու է `.popover-header`. The popover- `content`ը ներարկվելու է `.popover-body`. `.arrow`կդառնա պոպովերի նետը: Ամենաարտաքին փաթաթման տարրը պետք է ունենա `.popover`դասը:
կոչում	լարային \| տարր \| ֆունկցիան	''	Վերնագրի կանխադրված արժեքը, եթե `title`հատկանիշը չկա: Եթե տրված է ֆունկցիա, այն կկանչվի իր `this`հղումներով այն տարրին, որին կցված է popover-ը:
ձգան	լար	'սեղմել'	Ինչպես է առաջանում popover-ը - սեղմեք \| սավառնել \| կենտրոնացում \| ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով: `manual`չի կարող համակցվել որևէ այլ ձգանի հետ:
օֆսեթ	համարը \| լար	0	Պոպովերի օֆսեթ՝ իր թիրախի համեմատ: Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը :
հետադարձ Տեղադրում	լարային \| զանգված	«շրջել»	Թույլ տվեք նշել, թե որ դիրքը կօգտագործի Popper-ը հետադարձի ժամանակ: Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը
customClass	լարային \| ֆունկցիան	''	Ավելացրեք դասեր popover-ին, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ `'a b'`. Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ:
սահման	լարային \| տարր	«scrollParent»	Պոպովերի արտահոսքի սահմանափակման սահմանը: Ընդունում է `'viewport'`, `'window'`, `'scrollParent'`, կամ HTMLElement հղումի արժեքները (միայն JavaScript): Լրացուցիչ տեղեկությունների համար տես Popper-ի preventOverflow փաստաթղթերը :
ախտահանել	բուլյան	ճիշտ	Միացնել կամ անջատել ախտահանումը: Եթե ակտիվացվի `'template'`, `'content'`և `'title'`ընտրանքները կախտահանվեն: Տեսեք ախտահանիչի բաժինը մեր JavaScript փաստաթղթերում :
սպիտակ ցուցակ	օբյեկտ	Կանխադրված արժեք	Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ
sanitizeFn	զրոյական \| ֆունկցիան	դատարկ	Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար:
popperConfig	զրոյական \| օբյեկտ	դատարկ	Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան

Տվյալների ատրիբուտներ առանձին պոպովերի համար

Անհատական պոպովերի տարբերակները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով, ինչպես բացատրվեց վերևում:

Մեթոդներ

Ասինխրոն մեթոդներ և անցումներ

Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :

Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :

`$().popover(options)`

Նախաձեռնում է popovers տարրերի հավաքածուի համար:

`.popover('show')`

Բացահայտում է տարրի պոպովեր: Վերադառնում է զանգահարողին նախքան փոփերի փաստացի ցուցադրումը (այսինքն՝ նախքան shown.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում: Պոպովերը, որոնց անվանումը և բովանդակությունը երկուսն էլ զրոյական երկարություն ունեն, երբեք չեն ցուցադրվում:

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

`.popover('hide')`

Թաքցնում է տարրի պոպովերը: Վերադառնում է զանգահարողին նախքան popover-ը իրականում թաքցվել է (այսինքն՝ նախքան hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:

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

`.popover('toggle')`

Անջատում է տարրի popover-ը: Վերադառնում է զանգահարողին նախքան popover-ն իրականում ցուցադրվել կամ թաքցվել է (այսինքն՝ նախքան իրադարձությունը shown.bs.popoverկամ hidden.bs.popoverիրադարձությունը տեղի ունենալը): Սա համարվում է պոպովերի «մեխանիկական» հրահրում:

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

`.popover('dispose')`

Թաքցնում և ոչնչացնում է տարրի պոպովերը: Պոպովերը, որոնք օգտագործում են պատվիրակում (որոնք ստեղծվում են selectorտարբերակի միջոցով ) չեն կարող անհատապես ոչնչացվել հետնորդ ձգան տարրերի վրա:

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

`.popover('enable')`

Տարրի popover-ին ցուցադրվելու հնարավորություն է տալիս: Popover-ները լռելյայն միացված են:

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

`.popover('disable')`

Հեռացնում է տարրի popover-ի ցուցադրման հնարավորությունը: Popover-ը հնարավոր կլինի ցուցադրել միայն այն դեպքում, եթե այն նորից միացվի:

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

`.popover('toggleEnabled')`

Անջատում է տարրի popover-ի ցուցադրման կամ թաքցման հնարավորությունը:

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

`.popover('update')`

Թարմացնում է տարրի popover-ի դիրքը:

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

Իրադարձություններ

Միջոցառման տեսակը	Նկարագրություն
show.bs.popover	Այս իրադարձությունը գործարկվում է անմիջապես, երբ `show`կանչվում է օրինակի մեթոդը:
ցուցադրված.bs.popover	Այս իրադարձությունը գործարկվում է, երբ popover-ը տեսանելի է դառնում օգտատիրոջը (կսպասի CSS անցումների ավարտին):
hide.bs.popover	Այս իրադարձությունը գործարկվում է անմիջապես, երբ `hide`կանչվում է օրինակի մեթոդը:
թաքնված.bs.popover	Այս իրադարձությունը գործարկվում է, երբ popover-ն ավարտում է օգտագործողից թաքցնելը (կսպասի CSS անցումների ավարտին):
տեղադրված.bs.popover	Այս միջոցառումը գործարկվում է այն `show.bs.popover`իրադարձությունից հետո, երբ popover ձևանմուշը ավելացվի DOM-ում:

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