Source

Պոպովերներ

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

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

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

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

Այս բաղադրիչի անիմացիոն էֆեկտը կախված է 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="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ձգանը՝ անջատելու տարրից տարբերվող տարրի օգտատիրոջ հաջորդ կտտոցով 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)

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

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

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

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

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ 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.js-ի օֆսեթ փաստաթղթերը :
հետադարձ Տեղադրում լարային | զանգված «շրջել» Թույլ տվեք նշել, թե որ դիրքը կօգտագործի Popper-ը հետադարձի ժամանակ: Լրացուցիչ տեղեկությունների համար տես Popper.js-ի վարքագծի փաստաթղթերը
սահման լարային | տարր «scrollParent» Պոպովերի արտահոսքի սահմանափակման սահմանը: Ընդունում է 'viewport', 'window', 'scrollParent', կամ HTMLElement հղումի արժեքները (միայն JavaScript): Լրացուցիչ տեղեկությունների համար տես Popper.js-ի preventOverflow փաստաթղթերը :
ախտահանել բուլյան ճիշտ Միացնել կամ անջատել ախտահանումը: Եթե ​​ակտիվացվի 'template', 'content'և 'title'ընտրանքները կախտահանվեն:
սպիտակ ցուցակ օբյեկտ Կանխադրված արժեք Օբյեկտ, որը պարունակում է թույլատրելի ատրիբուտներ և պիտակներ
sanitizeFn զրոյական | ֆունկցիան դատարկ Այստեղ դուք կարող եք ապահովել ձեր սեփական ախտահանման գործառույթը: Սա կարող է օգտակար լինել, եթե նախընտրում եք օգտագործել հատուկ գրադարան՝ սանիտարական մաքրման համար:
popperConfig զրոյական | օբյեկտ դատարկ Bootstrap-ի լռելյայն Popper.js կոնֆիգուրացիան փոխելու համար տե՛ս Popper.js-ի կոնֆիգուրացիան

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

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

Մեթոդներ

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

Բոլոր 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...
})