Popovers
Dokumentacion dhe shembuj për shtimin e bootstrap popovers, si ato që gjenden në iOS, në çdo element në faqen tuaj.
Gjërat që duhet të dini kur përdorni shtojcën popover:
- Popoverët mbështeten në bibliotekën e palës së tretë Popper.js për pozicionimin. Duhet të përfshini popper.min.js përpara bootstrap.js ose përdorni
bootstrap.bundle.min.js/bootstrap.bundle.jsqë përmban Popper.js në mënyrë që popover-et të funksionojnë! - Popoverët kërkojnë shtojcën e këshillës së veglave si një varësi.
- Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkon
util.js. - Popover-et janë të zgjedhur për arsye të performancës, kështu që ju duhet t'i inicializoni ato vetë .
- Gjatësia zero
titledhecontentvlerat nuk do të tregojnë kurrë një popover. - Specifikoni
container: 'body'për të shmangur paraqitjen e problemeve në komponentë më kompleksë (si grupet tona të hyrjes, grupet e butonave, etj.). - Aktivizimi i popover-eve në elementë të fshehur nuk do të funksionojë.
- Popovers për
.disabledosedisabledelemente duhet të aktivizohen në një element mbështjellës. - Kur aktivizohen nga ankorat që mbështillen nëpër vija të shumta, popover-et do të përqendrohen midis gjerësisë së përgjithshme të ankorave. Përdorni
.text-nowrapnë tuaj<a>për të shmangur këtë sjellje. - Popover-et duhet të fshihen përpara se elementët e tyre përkatës të hiqen nga DOM.
Vazhdoni të lexoni për të parë se si funksionojnë popoverët me disa shembuj.
Një mënyrë për të inicializuar të gjitha popover-et në një faqe do të ishte përzgjedhja e tyre sipas data-toggleatributit të tyre:
$(function () {
$('[data-toggle="popover"]').popover()
})Kur keni disa stile në një element prind që ndërhyjnë me një popover, do të dëshironi të specifikoni një porosi në containermënyrë që HTML-ja e popover-it të shfaqet brenda atij elementi.
$(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>Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar.
<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>Përdorni focuskëmbëzën për të hequr popover-et në klikimin e ardhshëm të përdoruesit të një elementi të ndryshëm nga elementi i ndërrimit.
Kërkohet shënjimi specifik për heqjen në klikim tjetër
Për sjelljen e duhur të ndër-shfletuesit dhe ndër-platformës, duhet të përdorni <a>etiketën, jo etiketën <button>, dhe gjithashtu duhet të përfshini një tabindexatribut.
<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'
})Elementet me disabledatributin nuk janë ndërveprues, që do të thotë se përdoruesit nuk mund të rrinë pezull ose t'i klikojnë për të aktivizuar një popover (ose këshillë veglash). Si një zgjidhje, do të dëshironi të aktivizoni popover-in nga një mbështjellës <div>ose <span>dhe të anashkaloni pointer-eventselementin e çaktivizuar.
Për aktivizuesit e çaktivizuar të popover-it, mund të preferoni gjithashtu data-trigger="hover"që popover-i të shfaqet si reagim i menjëhershëm vizual për përdoruesit tuaj pasi ata mund të mos presin të klikojnë në një element të çaktivizuar.
<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>Aktivizo popover-et përmes JavaScript:
$('#example').popover(options)Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".
| Emri | Lloji | E paracaktuar | Përshkrim |
|---|---|---|---|
| animacion | logjike | e vërtetë | Aplikoni një tranzicion të zbehjes së CSS në popover |
| enë | varg | element | i rremë | i rremë | Shton popover-in në një element specifik. Shembull: |
| përmbajtjen | varg | element | funksionin | '' | Vlera e parazgjedhur e përmbajtjes nëse Nëse jepet një funksion, ai do të thirret me grupin e tij |
| vonesë | numri | Objekt | 0 | Vonesa e shfaqjes dhe fshehjes së popover-it (ms) - nuk vlen për llojin manual të këmbëzës Nëse jepet një numër, vonesa zbatohet për të dy fshehjen/shfaqjen Struktura e objektit është: |
| html | logjike | i rremë | Fut HTML në popover. Nëse është false, textmetoda e jQuery do të përdoret për të futur përmbajtje në DOM. Përdorni tekst nëse jeni të shqetësuar për sulmet XSS. |
| vendosja | varg | funksionin | 'e drejt' | Si të poziciononi popover - auto | krye | fund | majtas | drejtë. Kur një funksion përdoret për të përcaktuar vendosjen, ai thirret me nyjen DOM popover si argument të parë dhe elementin nxitës DOM nyjen si të dytën. Konteksti |
| përzgjedhës | varg | i rremë | i rremë | Nëse ofrohet një përzgjedhës, objektet popover do t'u delegohen objektivave të specifikuara. Në praktikë, kjo përdoret për të mundësuar që përmbajtja dinamike HTML të ketë shtuar popover. Shihni këtë dhe një shembull informues . |
| shabllon | varg | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Bazë HTML për t'u përdorur kur krijoni popover. Popover-i Popover-i
Elementi më i jashtëm i mbështjellësit duhet të ketë |
| titullin | varg | element | funksionin | '' | Vlera e parazgjedhur e titullit nëse Nëse jepet një funksion, ai do të thirret me grupin e tij |
| shkas | varg | 'kliko' | Si shkaktohet popover - klikoni | rri pezull | fokus | manual. Ju mund të kaloni disa shkaktarë; ndani ato me një hapësirë. manualnuk mund të kombinohet me asnjë shkas tjetër. |
| kompensuar | numri | varg | 0 | Kompensimi i popover-it në raport me objektivin e tij. Për më shumë informacion referojuni dokumenteve offset të Popper.js . |
| kthimi i vendosjes | varg | varg | 'rrokullisje' | Lejoni të specifikoni se cilin pozicion do të përdorë Popper në rikthim. Për më shumë informacion referojuni dokumenteve të sjelljes së Popper.js |
| kufiri | varg | element | 'scrollParent' | Kufiri i kufizimit të tejmbushjes së popover-it. Pranon vlerat e 'viewport', 'window', 'scrollParent', ose një referencë HTMLElement (vetëm JavaScript). Për më shumë informacion, referojuni dokumenteve të preventOverflow të Popper.js . |
Atributet e të dhënave për popoverët individualë
Opsionet për popover-et individuale mund të specifikohen në mënyrë alternative përmes përdorimit të atributeve të të dhënave, siç shpjegohet më sipër.
Metodat dhe tranzicionet asinkrone
Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .
Shikoni dokumentacionin tonë JavaScript për më shumë informacion.
Inicializon popover-et për një koleksion elementesh.
Zbulon popoverin e një elementi. Kthehet te thirrësi përpara se të shfaqet në të vërtetë popoveri (dmth. përpara se shown.bs.popoverngjarja të ndodhë). Kjo konsiderohet si një nxitje "manuale" e popoverit. Popover-et, titulli dhe përmbajtja e të cilëve janë me gjatësi zero, nuk shfaqen kurrë.
$('#element').popover('show')Fsheh popoverin e një elementi. Kthehet te thirrësi përpara se popover të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.popoverndodhë ngjarja). Kjo konsiderohet si një nxitje "manuale" e popoverit.
$('#element').popover('hide')Ndryshon popover-in e një elementi. Kthehet te thirrësi përpara se popover-i të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.popoverose ). hidden.bs.popoverKjo konsiderohet si një nxitje "manuale" e popoverit.
$('#element').popover('toggle')Fsheh dhe shkatërron popoverin e një elementi. Popoverët që përdorin delegimin (të cilat krijohen duke përdorur opsionin selector) nuk mund të shkatërrohen individualisht në elementët e aktivizimit pasardhës.
$('#element').popover('dispose')I jep popover-it të një elementi aftësinë për t'u shfaqur. Popover-et janë aktivizuar si parazgjedhje.
$('#element').popover('enable')Heq aftësinë për shfaqjen e popover-it të një elementi. Popover-i do të mund të shfaqet vetëm nëse riaktivizohet.
$('#element').popover('disable')Ndryshon aftësinë për shfaqjen ose fshehjen e popover-it të një elementi.
$('#element').popover('toggleEnabled')Përditëson pozicionin e popover-it të një elementi.
$('#element').popover('update')| Lloji i ngjarjes | Përshkrim |
|---|---|
| shfaq.bs.popover | Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit. |
| treguar.bs.popover | Kjo ngjarje aktivizohet kur popoveri është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë). |
| fsheh.bs.popover | Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit. |
| i fshehur.bs.popover | Kjo ngjarje aktivizohet kur popover-i ka përfunduar së fshehuri nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë). |
| futur.bs.popover | Kjo ngjarje aktivizohet pas show.bs.popoverngjarjes kur shablloni popover është shtuar në DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})