Popovers
Belgekirin û nimûneyên ji bo zêdekirina popoverên Bootstrap, mîna yên ku di iOS-ê de têne dîtin, li her hêmanek li ser malpera we.
Têgihiştinî
Tiştên ku divê hûn zanibin dema ku pêveka popover bikar tînin:
- Popover ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper . Divê hûn berî bootstrap.js -ê popper.min.js-ê têxin
bootstrap.bundle.min.js
nav xwe an jî /bootstrap.bundle.js
ya ku Popper-ê dihewîne bikar bînin da ku popover kar bikin! - Popover pêveka tooltip -ê wekî pêvedanê hewce dike.
- Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dike
util.js
. - Popover ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
- Zero-dirêj
title
ûcontent
nirx dê ti carî popoverek nîşan nedin. - Diyar
container: 'body'
bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin. - Vekirina popoverên li ser hêmanên veşartî dê nexebite.
- Pêdivî ye ku popoverên ji bo
.disabled
andisabled
hêmanan li ser hêmanek pêçandî werin derxistin. - Dema ku ji lengerên ku li gelek rêzan diqelibin werin avêtin, popover dê di navbera firehiya giştî ya lengeran de bibin navend.
.text-nowrap
Li ser s-ya xwe bikar bînin<a>
ku ji vê tevgerê dûr bixin. - Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê popover werin veşartin.
- Popover dikarin bi saya hêmanek di hundurê DOM-ê siya de werin dest pê kirin.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Xwendina xwe bidomînin da ku bibînin ka popover çawa bi hin mînakan re dixebitin.
Mînak: Li her derê popovers çalak bike
Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-toggle
hilbijêrin:
$(function () {
$('[data-toggle="popover"]').popover()
})
Mînak: Vebijêrk bikar container
tînin
Gava ku hûn li ser hêmanek dêûbav hin şêwazên ku mudaxeleyî popoverekê dikin hebin, hûn ê bixwazin ku xwerûyek diyar bikin container
da ku li şûna wê HTML-a popover di hundurê wê hêmanê de xuya bibe.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Mînak
<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>
Çar rê
Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.
<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>
Li ser klîkek paşîn veqetînin
Tetikê bikar focus
bînin da ku popoverên li ser klîkek paşîn a bikarhêner a ji hêmanek cûda ji hêmana veguheztinê dûr bixe.
Nîşanek taybetî ji bo rakirina-li-pa-clikê hewce ye
Ji bo behremendiya xaçerê û xaça-platformê ya rast, divê hûn tagê bikar bînin , <a>
ne tag<button>
, û her weha divê hûn tabindex
taybetmendiyek jî têxin nav xwe.
<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'
})
hêmanên astengdar
Hêmanên bi disabled
taybetmendiyê ne înteraktîf in, yanî bikarhêner nikanin li wan bizivirin an bikirtînin da ku popoverek (an şîretek amûrek) derxînin. Wekî çareseriyek, hûn ê bixwazin ku popoverê ji pêçekê vekêşin <div>
an <span>
û pointer-events
li ser hêmana neçalak bişopînin.
Ji bo pêlên popover ên neçalak, hûn dikarin her weha tercîh data-trigger="hover"
bikin da ku popover wekî bertekek dîtbarî ya tavilê ji bikarhênerên we re xuya bibe ji ber ku ew ne li bendê ne ku li ser hêmanek neçalak bikirtînin .
<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>
Bikaranîna
Bi JavaScriptê popovers çalak bikin:
$('#example').popover(options)
Leza GPU
Popover carinan li ser cîhazên Windows 10-ê ji ber lezkirina GPU û DPI-ya pergalê ya guhezbar nezelal xuya dikin. Rêbaza ji bo vê di v4 de ev e ku li ser popoverên we bilezkirina GPU-yê neçalak bike.
Çareserkirina pêşniyar:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Çêkirina popoveran ji bo bikarhênerên klavyeyê û teknolojiya arîkar dixebitin
Ji bo ku hûn destûrê bidin bikarhênerên klavyeyê ku popoverên we çalak bikin, divê hûn wan tenê li hêmanên HTML-ê yên ku bi kevneşopî li ser klavyeyê ve girêdayî ne û înteraktîf in zêde bikin (wek girêdan an kontrolên formê). Her çend hêmanên HTML-ê yên kêfî (wek <span>
s) dikarin bi lêzêdekirina tabindex="0"
taybetmendiyê bêne balkişandin, ev ê ji bo bikarhênerên klavyeyê li ser hêmanên ne-înteraktîf rawestgehên potansiyel acizker û tevlihev zêde bike, û piraniya teknolojiyên alîkar naha naveroka popoverê di vê rewşê de ragihînin. . Digel vê yekê, bi tenê hover
xwe nespêrin wekî teşqela popoverên xwe, ji ber ku ev ê nekaribe wan ji bikarhênerên klavyeyê re bişewitîne.
Dema ku hûn dikarin bi vebijarkê HTML-ya dewlemend û birêkûpêk têxin nav popoveran html
, em bi tundî pêşniyar dikin ku hûn ji zêdekirina naverokek zêde dûr bisekinin. Awayê ku popover naha dixebitin ev e ku, gava ku were xuyang kirin, naveroka wan bi hêmana tetikê bi aria-describedby
taybetmendiyê ve girêdayî ye. Wekî encamek, tevahiya naveroka popover-ê dê ji bikarhênerên teknolojiya arîkar re wekî yek dirêj, bênavber were ragihandin.
Wekî din, her çend gengaz e ku di popovera xwe de kontrolên înteraktîf (wekî hêmanên formê an girêdan) jî têxin nav xwe (bi lêzêdekirina van hêmanan li whiteList
taybetmendî û tagên destûr an jî destûrkirî), hay ji xwe hebin ku niha popover rêzika fokusê ya klavyeyê bi rê nakeve. Gava ku bikarhênerek klavyeyê popoverek vedike, balê dikişîne ser hêmana teşqelekirinê, û ji ber ku popover bi gelemperî tavilê di avahiya belgeyê de tavilê naşopîne, garantiyek tune ku bi pêş ve biçin / zext bikin.TABdê bikarhênerek klavyeyê biguheze nav popover bixwe. Bi kurtasî, bi tenê lêzêdekirina kontrolên înteraktîf li popoverek dibe ku van kontrolan ji bo bikarhênerên klavyeyê û bikarhênerên teknolojiyên arîkar negihiştî/nebikar bîne, an jî bi kêmanî fermanek giştî ya nemantiqî çêbike. Di van rewşan de, li şûna diyalogek modal bikar bînin.
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-animation=""
.
sanitize
,
sanitizeFn
û
whiteList
bi karanîna taybetmendiyên daneyê nayên peyda kirin.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
jayandarî | boolean | rast | Veguheztinek fade ya CSS-ê li popoverê bicîh bikin |
têrr | string | element | şaş | şaş | Popoverê li hêmanek taybetî vedike. Mînak |
dilşad | string | element | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
derengxistin | hejmar | tişt | 0 | Dereng xuyangkirin û veşartina popover (ms) - ji bo celebê destkêşana destan nayê sepandin Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin Struktura objektê ev e: |
html | boolean | şaş | HTML-ê têxe nav popover. Ger xelet be, text dê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin. |
danîn | string | karî | 'rast' | Meriv çawa popoverê bi cih dike - oto | top | binê | çep | rast. Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka DOM-a popover wekî argumana wê ya yekem û hêmana vekêşana girê DOM-ê wekî duyemîn tê gotin. Çarçove |
hilbijêr | string | şaş | şaş | Ger hilbijêrek were peyda kirin, dê tiştên popover ji armancên diyarkirî re werin veguheztin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-a dînamîkî bikar bîne da ku popoverên lê zêde bikin. Vê û mînakek agahdar bibînin . |
şablon | ben | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Bingeha HTML-ê ku dema afirandina popover bikar bînin bikar bînin. The popover's The popover's
Pêdivî ye ku hêmana pêçanê ya herî derveyî |
nav | string | element | karî | '' |
Ger fonksiyonek were dayîn, ew ê bi |
kişok | ben | 'bitikîne' | Popover çawa tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. manual nikare bi ti kêşek din re were hev kirin. |
offset | hejmar | ben | 0 | Tevlihevkirina popoverê li gorî armanca xwe. Ji bo bêtir agahdarî serî li belgeyên offset yên Popper bidin . |
fallbackPlacement | string | rêzî | 'flip' | Destûrê bide ku diyar bike ka Popper dê kîjan pozîsyonê di paşvekişînê de bikar bîne. Ji bo bêtir agahdarî serî li belgeyên tevgerê yên Popper bidin |
customClass | string | karî | '' | Dema ku ew tê xuyang kirin çînên li popoverê zêde bikin. Bala xwe bidinê ku ev ders dê ji bilî dersên ku di şablonê de hatine destnîşan kirin werin zêdekirin. Ji bo zêdekirina çînên pirjimar, wan bi cihan veqetînin Her weha hûn dikarin fonksiyonek derbas bikin ku divê rêzek yekane ya ku navên pola zêde vedihewîne vegerîne. |
tixûb | string | pêve | 'scrollParent' | Sînorê astengiya serhêl a popover. Nirxên 'viewport' , 'window' , 'scrollParent' , an referansek HTMLElement (tenê JavaScript) qebûl dike. Ji bo bêtir agahdarî serî li belgeyên preventOverflow yên Popper bidin . |
sanitize | boolean | rast | Paqijkirinê çalak bikin an neçalak bikin. Ger were çalak kirin 'template' , 'content' û 'title' vebijark dê bêne paqij kirin. Di belgeya meya JavaScriptê de beşa paqijkerê bibînin . |
whiteList | tişt | Nirxa standard | Tişta ku taybetmendî û tagên destûr dihewîne |
sanitizeFn | null | karî | null | Li vir hûn dikarin fonksiyona xweya paqijkirinê peyda bikin. Heke hûn tercîh dikin ku pirtûkxaneyek taybetî bikar bînin ku paqijkirinê bikin ev dikare kêrhatî be. |
popperConfig | null | tişt | null | Ji bo guherandina veavakirina Popperê ya xwerû ya Bootstrap, li veavakirina Popper binêre |
Taybetmendiyên daneyê ji bo popoverên kesane
Vebijarkên ji bo popoverên takekesî dikare wekî ku li jor hatî ravekirin bi karanîna taybetmendiyên daneyê ve were destnîşankirin.
Methods
Rêbaz û veguherînên asynchronous
Hemî rêbazên API-ê asînkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
$().popover(options)
Ji bo berhevokek hêmanan popoveran dide destpêkirin.
.popover('show')
Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popover
bûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku sernav û naveroka wan herdu jî sifir-dirêj in qet nayên xuyang kirin.
$('#element').popover('show')
.popover('hide')
Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popover
bûyer çêbibe) vedigere bangkerê. Ev wekî destpêkirina "destanî" ya popover tê hesibandin.
$('#element').popover('hide')
.popover('toggle')
Popovera hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popover
an hidden.bs.popover
bûyer çêbibe) vedigere bangkerê. Ev wekî destpêkirina "destanî" ya popover tê hesibandin.
$('#element').popover('toggle')
.popover('dispose')
Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selector
têne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.
$('#element').popover('dispose')
.popover('enable')
Kapasîteya nîşankirinê dide popovera hêmanan. Popover ji hêla xwerû ve têne çalak kirin.
$('#element').popover('enable')
.popover('disable')
Kapasîteya xuyangkirina popovera hêmanekê jê dike. Popover tenê heke ji nû ve were çalak kirin dê bikaribe were xuyang kirin.
$('#element').popover('disable')
.popover('toggleEnabled')
Desthilatdariya popovera hêmanek ku were xuyang kirin an veşartî vedike.
$('#element').popover('toggleEnabled')
.popover('update')
Helwesta popovera hêmanekê nûve dike.
$('#element').popover('update')
Events
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.popover | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. |
nîşan dan.bs.popover | Dema ku popover ji bikarhêner re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede). |
veşêre.bs.popover | hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
veşartî.bs.popover | Dema ku popover ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguherînên CSS temam bibin). |
xistin.bs.popover | Ev bûyer piştî show.bs.popover bûyerê dema ku şablonê popover li DOM-ê hate zêdekirin tê şewitandin. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})