Source

Popovers

Dokumentaatio ja esimerkkejä Bootstrap-ponnahdusikkunoiden, kuten iOS:n, lisäämisestä mihin tahansa sivustosi elementtiin.

Yleiskatsaus

Tietoja ponnahduslaajennusta käytettäessä:

  • Popoverit käyttävät paikannuksessa kolmannen osapuolen kirjastoa Popper.js . Sinun on sisällytettävä popper.min.js ennen bootstrap.js:ää tai käytä bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popper.js:n, jotta ponnahdusikkunat toimivat!
  • Ponnahdusikkunat vaativat työkaluvihje-laajennuksen riippuvuutena.
  • Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js .
  • Ponnahdusikkunat ovat käytössä suorituskykysyistä, joten sinun on alustettava ne itse .
  • Nollapituus titleja contentarvot eivät koskaan näytä ponnahdusikkunaa.
  • Määritä container: 'body', jotta vältät hahmonnusongelmia monimutkaisemmissa osissa (kuten syöttöryhmämme, painikeryhmämme jne.).
  • Ponnahdusikkunoiden käynnistäminen piilotetuissa elementeissä ei toimi.
  • .disabledPonnahdusikkunat elementeille tai disabledelementeille on käynnistettävä kääreelementissä .
  • Kun ponnahdusikkuna laukaistaan ​​ankkureista, jotka kietoutuvat useille viivoille, ne keskitetään ankkurien kokonaisleveyden väliin. Vältä tämä käyttäytyminen käyttämällä sitä .text-nowrap.<a>
  • Ponnahdusikkunat on piilotettava ennen kuin niitä vastaavat elementit on poistettu DOM:sta.
  • Ponnahdusikkunat voidaan laukaista varjo-DOM:n sisällä olevan elementin ansiosta.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Jatka lukemista nähdäksesi, kuinka ponnahdusikkunat toimivat joidenkin esimerkkien avulla.

Esimerkki: Ota ponnahdusikkunat käyttöön kaikkialla

Yksi tapa alustaa kaikki ponnahdusikkunat sivulla on valita ne niiden data-togglemääritteen perusteella:

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

Esimerkki: containervaihtoehdon käyttäminen

Jos pääelementissä on tyylejä, jotka häiritsevät ponnahdusikkunaa, haluat määrittää mukautetun containerponnahdusikkunan HTML-koodin, joka näkyy sen sijaan kyseisessä elementissä.

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

Esimerkki

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

Neljä suuntaa

Käytettävissä on neljä vaihtoehtoa: ylä-, oikea-, ala- ja vasemmalle tasattuna.

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

Hylkää seuraavalla klikkauksella

Käytä focusliipaisinta hylätäksesi ponnahdusikkunat, kun käyttäjä seuraavaan napsauttaa eri elementtiä kuin vaihtoelementtiä.

Erityinen merkintä vaaditaan hylkäämiseen seuraavan napsautuksen yhteydessä

Jotta selain- ja alustojen välinen toiminta onnistuisi oikein, sinun on käytettävä tunnistetta <a>tagin sijaan<button> , ja sinun on myös sisällytettävä tabindexattribuutti.

Poistettava ponnahdusikkuna 
<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'
})

Poistetut elementit

Attribuutilla varustetut elementit disabledeivät ole vuorovaikutteisia, mikä tarkoittaa, että käyttäjät eivät voi viedä hiiren osoitinta tai napsauttaa niitä käynnistääkseen ponnahdusikkunan (tai työkaluvihjeen). Kiertokeinona sinun kannattaa käynnistää ponnahdusikkuna kääreestä <div>tai <span>ohittaa pointer-eventskäytöstä poistettu elementti.

Jos ponnahdusikkuna käynnistyy pois käytöstä, voit myös haluta data-trigger="hover", että ponnahdusikkuna näkyy käyttäjillesi välittömänä visuaalisena palautteena, koska he eivät ehkä odota napsauttavansa käytöstä poistettua elementtiä.

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

Käyttö

Ota ponnahdusikkunat käyttöön JavaScriptin kautta:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-animation="".

Huomaa, että turvallisuussyistä sanitize, sanitizeFnja whiteList-asetuksia ei voida toimittaa dataattribuuttien avulla.

Nimi Tyyppi Oletus Kuvaus
animaatio boolean totta Käytä ponnahdusikkunassa CSS-häivytystä
kontti merkkijono | elementti | väärä väärä

Liittää ponnahdusikkunan tiettyyn elementtiin. Esimerkki: container: 'body'. Tämä vaihtoehto on erityisen hyödyllinen, koska sen avulla voit sijoittaa ponnahdusikkunan asiakirjan virtaan lähelle liipaisuelementtiä - mikä estää ponnahdusikkunaa kellumasta pois laukaisuelementistä ikkunan koon muuttamisen aikana.
sisältö merkkijono | elementti | toiminto ''

Sisällön oletusarvo, jos data-contentattribuuttia ei ole.

Jos funktio on annettu, sitä kutsutaan ja sen thisviite on asetettu elementille, johon ponnahdusikkuna on liitetty.
viive numero | esine 0

Ponnahdusikkunan näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista laukaisutyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { "show": 500, "hide": 100 }
html boolean väärä Lisää HTML ponnahdusikkunaan. Jos epätosi, jQueryn textmenetelmää käytetään sisällön lisäämiseen DOM:iin. Käytä tekstiä, jos olet huolissasi XSS-hyökkäyksistä.
sijoitus merkkijono | toiminto 'oikein'

Ponnahdusikkunan sijoittaminen - auto | alkuun | pohja | vasemmalle | oikein.
Kun autoon määritetty, se suuntaa ponnahdusikkunan dynaamisesti uudelleen.

Kun funktiota käytetään sijoittelun määrittämiseen, sitä kutsutaan popover DOM-solmulla ensimmäisenä argumenttina ja liipaisuelementin DOM-solmun toisena argumenttina. Konteksti thisasetetaan popover-instanssiin.
valitsin merkkijono | väärä väärä Jos valitsin on käytössä, ponnahdusikkunaobjektit delegoidaan määritetyille kohteille. Käytännössä tätä käytetään mahdollistamaan ponnahdusikkunoiden lisääminen dynaamiseen HTML-sisältöön. Katso tämä ja informatiivinen esimerkki .
sapluuna merkkijono '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Ponnahdusikkunaa luotaessa käytettävä perus-HTML.

Popover's titleruiskutetaan .popover-header.

Popover's contentruiskutetaan .popover-body.

.arrowtulee popoverin nuoli.

Uloimmalla kääreelementillä tulee olla .popoverluokka.
otsikko merkkijono | elementti | toiminto ''

Otsikon oletusarvo, jos titleattribuuttia ei ole.

Jos funktio on annettu, sitä kutsutaan ja sen thisviite on asetettu elementille, johon ponnahdusikkuna on liitetty.
laukaista merkkijono 'klikkaus' Kuinka ponnahdusikkuna käynnistyy - napsauta | leijua | keskittyä | manuaalinen. Voit läpäistä useita laukaisimia; erota ne välilyönnillä. manualei voida yhdistää mihinkään muuhun laukaisuun.
offset numero | merkkijono 0 Ponnahdusikkunan poikkeama suhteessa kohteeseen. Lisätietoja on Popper.js:n offset-dokumenteissa .
varasijoitus merkkijono | joukko 'voltti' Salli määrittää, mitä asentoa Popper käyttää varautumisessa. Lisätietoja on Popper.js:n käyttäytymisdokumenteissa
rajaa merkkijono | elementti 'scrollParent' Ponnahdusikkunan ylivuotorajoitusraja. Hyväksyy arvot 'viewport', 'window', 'scrollParent', tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popper.js:n preventOverflow-dokumenteissa .
puhdistaa boolean totta Ota desinfiointi käyttöön tai poista se käytöstä. Jos aktivoitu 'template', 'content'ja 'title'vaihtoehdot desinfioidaan.
valkoinen lista esine Oletusarvo Objekti, joka sisältää sallitut attribuutit ja tunnisteet
desinfioiFn nolla | toiminto tyhjä Täällä voit toimittaa oman desinfiointitoiminnon. Tästä voi olla hyötyä, jos haluat käyttää desinfiointiin erityistä kirjastoa.

Tietoattribuutit yksittäisille ponnahdusikkunoille

Vaihtoehtoisesti yksittäisten ponnahdusikkunoiden asetukset voidaan määrittää käyttämällä dataattribuutteja, kuten edellä on selitetty.

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

$().popover(options)

Alustaa elementtikokoelman ponnahdusikkunat.

.popover('show')

Paljastaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näytetty (eli ennen shown.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna. Ponnahdusikkunoita, joiden otsikko ja sisältö ovat nollapituisia, ei koskaan näytetä.

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

.popover('hide')

Piilottaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella piilotettu (eli ennen hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

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

.popover('toggle')

Vaihtaa elementin ponnahdusikkunan. Palaa soittajalle ennen kuin ponnahdusikkuna on todella näkynyt tai piilotettu (ts. ennen shown.bs.popovertai hidden.bs.popovertapahtumaa). Tätä pidetään ponnahdusikkunan "manuaalisena" laukaisuna.

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

.popover('dispose')

Piilottaa ja tuhoaa elementin ponnahdusikkunan. Ponnahdusikkunoita, jotka käyttävät delegointia (jotka luodaan vaihtoehdolla ) selector, ei voida tuhota yksitellen jälkeläisissä triggerelementeissä.

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

.popover('enable')

Antaa elementin ponnahdusikkunalle mahdollisuuden näkyä. Ponnahdusikkunat ovat oletuksena käytössä.

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

.popover('disable')

Poistaa mahdollisuuden näyttää elementin ponnahdusikkuna. Ponnahdusikkuna voidaan näyttää vain, jos se otetaan uudelleen käyttöön.

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

.popover('toggleEnabled')

Vaihtaa elementin ponnahdusikkunan näyttämisen tai piilotuksen.

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

.popover('update')

Päivittää elementin ponnahdusikkunan sijainnin.

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

Tapahtumat

Tapahtumatyyppi Kuvaus
show.bs.popover Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
näytetään.bs.popover Tämä tapahtuma käynnistyy, kun ponnahdusikkuna on tehty käyttäjän näkyväksi (odottaa CSS-siirtymien valmistumista).
hide.bs.popover Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu.bs.popover Tämä tapahtuma käynnistyy, kun ponnahdusikkuna on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).
inserted.bs.popover Tämä tapahtuma käynnistyy show.bs.popovertapahtuman jälkeen, kun ponnahdusmalli on lisätty DOM:iin. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})