Popovers

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

Yleiskatsaus

Tietoja ponnahduslaajennusta käytettäessä:

• Popoverit luottavat paikannukseen kolmannen osapuolen kirjaston Popperiin . Sinun tulee lisätä popper.min.js ennen bootstrap.js:ää tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popperin, 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.

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

Hylkää seuraavalla klikkauksella

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

<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). Kiertotavana voit käynnistää ponnahdusikkunan kääreestä <div>tai <span>ohittaa pointer-eventskäytöstä poistetun elementin.

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)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Vaihtoehdot

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

menetelmät

$().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

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})