Պոպովերներ
Փաստաթղթեր և օրինակներ՝ 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-ի ներսում գտնվող տարրի շնորհիվ:
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-ը կոնկրետ տարրի վրա: Օրինակ՝ |
բովանդակությունը | լարային | տարր | ֆունկցիան | '' | Բովանդակության կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
ուշացում | համարը | օբյեկտ | 0 | Պոպովերի ցուցադրման և թաքցման հետաձգումը (ms) - չի տարածվում ձեռքով ձգանման տեսակի վրա Եթե համարը տրվում է, ապա ուշացումը կիրառվում է ինչպես թաքցնել/ցուցադրել Օբյեկտի կառուցվածքը հետևյալն է. |
html | բուլյան | կեղծ | Տեղադրեք HTML-ը popover-ի մեջ: Եթե կեղծ է, jQuery-ի text մեթոդը կօգտագործվի DOM-ում բովանդակություն մտցնելու համար: Օգտագործեք տեքստ, եթե ձեզ անհանգստացնում են XSS հարձակումները: |
տեղաբաշխում | լարային | ֆունկցիան | 'ճիշտ' | Ինչպես տեղադրել popover - auto | վերև | ստորին | ձախ | ճիշտ. Երբ ֆունկցիան օգտագործվում է տեղաբաշխումը որոշելու համար, այն կանչվում է՝ որպես առաջին արգումենտ popover DOM հանգույցը, իսկ երկրորդը՝ DOM հանգույցը՝ գործարկող տարրը: Համատեքստը |
ընտրիչ | լարային | կեղծ | կեղծ | Եթե ընտրիչ է տրամադրվում, 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- The popover-
Ամենաարտաքին փաթաթման տարրը պետք է ունենա |
կոչում | լարային | տարր | ֆունկցիան | '' | Վերնագրի կանխադրված արժեքը, եթե Եթե տրված է ֆունկցիա, այն կկանչվի իր |
ձգան | լար | 'սեղմել' | Ինչպես է առաջանում popover-ը - սեղմեք | սավառնել | կենտրոնացում | ձեռնարկ. Դուք կարող եք անցնել մի քանի ձգան; առանձնացրեք դրանք բացատով: manual չի կարող համակցվել որևէ այլ ձգանի հետ: |
օֆսեթ | համարը | լար | 0 | Պոպովերի օֆսեթ՝ իր թիրախի համեմատ: Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը : |
հետադարձ Տեղադրում | լարային | զանգված | «շրջել» | Թույլ տվեք նշել, թե որ դիրքը կօգտագործի Popper-ը հետադարձի ժամանակ: Լրացուցիչ տեղեկությունների համար տես Պոպերի վարքագծի փաստաթղթերը |
customClass | լարային | ֆունկցիան | '' | Ավելացրեք դասեր popover-ին, երբ այն ցուցադրվում է: Նկատի ունեցեք, որ այս դասերը կավելացվեն ի լրումն ձևանմուշում նշված ցանկացած դասի: Մի քանի դասեր ավելացնելու համար դրանք առանձնացրեք բացատներով՝ Կարող եք նաև փոխանցել գործառույթ, որը պետք է վերադարձնի մեկ տող, որը պարունակում է լրացուցիչ դասերի անուններ: |
սահման | լարային | տարր | «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...
})