Source

Popovers

Dokumentasie en voorbeelde vir die byvoeging van Bootstrap-opspringers, soos dié wat in iOS gevind word, by enige element op jou werf.

Oorsig

Dinge om te weet wanneer jy die popover-inprop gebruik:

  • Popovers maak staat op die derdeparty-biblioteek Popper.js vir posisionering. Jy moet popper.min.js voor bootstrap.js insluit of bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper.js bevat gebruik sodat popovers kan werk!
  • Popovers vereis die tooltip-inprop as 'n afhanklikheid.
  • As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .
  • Popovers is intekening vir prestasieredes, so jy moet dit self inisialiseer .
  • Zero-lengte titleen contentwaardes sal nooit 'n popover wys nie.
  • Spesifiseer container: 'body'om te verhoed dat probleme in meer komplekse komponente weergegee word (soos ons invoergroepe, knoppiegroepe, ens.).
  • Om popovers op versteekte elemente te aktiveer sal nie werk nie.
  • Popovers vir .disabledof disabledelemente moet op 'n omhulelement geaktiveer word.
  • Wanneer dit geaktiveer word vanaf ankers wat oor veelvuldige lyne draai, sal popovers gesentreer word tussen die ankers se algehele breedte. Gebruik .text-nowrapop jou <a>s om hierdie gedrag te vermy.
  • Popovers moet versteek word voordat hul ooreenstemmende elemente uit die DOM verwyder is.

Hou aan om te lees om te sien hoe popovers werk met 'n paar voorbeelde.

Voorbeeld: Aktiveer popovers oral

Een manier om alle opspringers op 'n bladsy te inisialiseer, is om hulle volgens hul data-togglekenmerk te kies:

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

Voorbeeld: Gebruik die containeropsie

Wanneer jy 'n paar style op 'n ouerelement het wat inmeng met 'n opspringer, sal jy 'n pasgemaakte wil spesifiseer containersodat die opspringer se HTML eerder binne daardie element verskyn.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Voorbeeld

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

Vier rigtings

Vier opsies is beskikbaar: bo-, regs-, onder- en linksbelyn.

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

Maak toe met die volgende klik

Gebruik die focussneller om opspringers op die gebruiker se volgende klik van 'n ander element as die wissel-element af te maak.

Spesifieke opmaak word vereis vir wegmaak-met-volgende-klik

Vir behoorlike kruisblaaier- en kruisplatformgedrag, moet jy die <a>merker gebruik, nie die <button>merker nie, en jy moet ook 'n tabindexkenmerk insluit.

Wegwerpbare popover 
<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'
})

Gedeaktiveerde elemente

Elemente met die disabledkenmerk is nie interaktief nie, wat beteken dat gebruikers nie kan beweeg of daarop klik om 'n popover (of nutswenk) te aktiveer nie. As 'n oplossing, sal jy die popover van 'n omhulsel wil aktiveer <div>of die op die gedeaktiveerde element <span>ignoreer .pointer-events

Vir gedeaktiveerde popover-snellers, kan jy ook verkies data-trigger="hover"dat die popover as onmiddellike visuele terugvoer aan jou gebruikers verskyn, aangesien hulle dalk nie verwag om op 'n gedeaktiveerde element te klik nie.

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

Gebruik

Aktiveer popovers via JavaScript:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-animation="".

Naam Tik Verstek Beskrywing
animasie boolean waar Pas 'n CSS-vervaag-oorgang toe op die popover
houer tou | element | onwaar onwaar

Voeg die popover by 'n spesifieke element. Voorbeeld: container: 'body'. Hierdie opsie is veral nuttig omdat dit jou in staat stel om die opspringer in die vloei van die dokument naby die snellerelement te plaas - wat sal verhoed dat die opspringer wegdryf van die snellerelement tydens 'n venstergrootteverandering.
inhoud tou | element | funksie ''

Verstek inhoudwaarde as data-contentkenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.
vertraging nommer | voorwerp 0

Vertraag wys en verberg die popover (ms) - is nie van toepassing op handmatige snellertipe nie

As 'n nommer verskaf word, word vertraging toegepas op beide versteek/wys

Voorwerpstruktuur is:delay: { "show": 500, "hide": 100 }
html boolean onwaar Voeg HTML in die popover. Indien onwaar, sal jQuery se textmetode gebruik word om inhoud in die DOM in te voeg. Gebruik teks as jy bekommerd is oor XSS-aanvalle.
plasing tou | funksie 'reg'

Hoe om die popover te plaas - outomaties | top | onderste | links | reg.
Wanneer autogespesifiseer word, sal dit die popover dinamies heroriënteer.

Wanneer 'n funksie gebruik word om die plasing te bepaal, word dit opgeroep met die popover DOM-nodus as sy eerste argument en die snellerelement DOM-nodus as sy tweede. Die thiskonteks is ingestel op die popover-instansie.
keurder tou | onwaar onwaar As 'n kieser verskaf word, sal popover-objekte na die gespesifiseerde teikens gedelegeer word. In die praktyk word dit gebruik om dinamiese HTML-inhoud in staat te stel om popovers by te voeg. Sien hierdie en 'n insiggewende voorbeeld .
sjabloon string '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Baseer HTML om te gebruik wanneer die popover geskep word.

Die popover's titlesal in die .popover-header.

Die popover's contentsal in die .popover-body.

.arrowsal die popover se pyl word.

Die buitenste omhulselelement moet die .popoverklas hê.
titel tou | element | funksie ''

Verstek titelwaarde as titlekenmerk nie teenwoordig is nie.

As 'n funksie gegee word, sal dit genoem word met sy thisverwysing ingestel na die element waaraan die popover gekoppel is.
sneller string 'klik' Hoe popover geaktiveer word - klik | beweeg | fokus | handleiding. Jy kan verskeie snellers slaag; skei hulle met 'n spasie. manualkan nie met enige ander sneller gekombineer word nie.
verreken nommer | string 0 Offset van die popover relatief tot sy teiken. Vir meer inligting verwys na Popper.js se offset docs .
terugvalplasing tou | skikking 'flip' Laat toe om te spesifiseer watter posisie Popper op terugval sal gebruik. Vir meer inligting verwys na Popper.js se gedragsdokumente
grens tou | element 'scrollParent' Oorloop beperking grens van die popover. Aanvaar die waardes van 'viewport', 'window', 'scrollParent', of 'n HTMLElement-verwysing (slegs JavaScript). Vir meer inligting, verwys na Popper.js se preventOverflow-dokumente .

Data-kenmerke vir individuele popovers

Opsies vir individuele popovers kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke, soos hierbo verduidelik.

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting.

$().popover(options)

Inisialiseer popovers vir 'n elementversameling.

.popover('show')

Onthul 'n element se popover. Keer terug na die oproeper voordat die popover werklik gewys is (dws voor die shown.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover. Popovers waarvan beide titel en inhoud geen lengte het nie, word nooit vertoon nie.

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

.popover('hide')

Versteek 'n element se popover. Keer terug na die beller voordat die popover eintlik versteek is (dws voor die hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('toggle')

Wissel 'n element se popover. Keer terug na die beller voordat die popover werklik gewys of versteek is (dws voordat die shown.bs.popoverof hidden.bs.popovergebeurtenis plaasvind). Dit word beskou as 'n "handmatige" sneller van die popover.

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

.popover('dispose')

Versteek en vernietig 'n element se popover. Popovers wat delegering gebruik (wat met die selectoropsie geskep word ) kan nie individueel op afstammelinge-snellerelemente vernietig word nie.

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

.popover('enable')

Gee 'n element se popover die vermoë om gewys te word. Popovers is by verstek geaktiveer.

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

.popover('disable')

Verwyder die vermoë vir 'n element se popover om gewys te word. Die opspringer sal slegs gewys kan word as dit weer geaktiveer is.

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

.popover('toggleEnabled')

Wissel die vermoë vir 'n element se popover om gewys of versteek te word.

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

.popover('update')

Dateer die posisie van 'n element se popover op.

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

Gebeurtenisse

Soort gebeurtenis Beskrywing
show.bs.popover Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys.bs.popover Hierdie gebeurtenis word afgevuur wanneer die opspringer sigbaar gemaak is vir die gebruiker (sal wag vir CSS-oorgange om te voltooi).
versteek.bs.popover Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteekte.bs.popover Hierdie gebeurtenis word afgevuur wanneer die popover klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).
ingevoeg.bs.popover Hierdie gebeurtenis word afgevuur na die show.bs.popovergebeurtenis wanneer die popover-sjabloon by die DOM gevoeg is. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})