Popovers

Dokumentai ir pavyzdžiai, kaip pridėti „Bootstrap“ iššokančių langų, tokių kaip „iOS“ sistemoje, prie bet kurio svetainės elemento.

Apžvalga

Ką reikia žinoti naudojant popover papildinį:

• Popovers pozicionuoti remiasi trečiosios šalies biblioteka Popper . Prieš bootstrap.js turite įtraukti popper.min.js arba naudoti bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper, kad iššokantys langai veiktų!
• Iššokantiesiems reikalingas patarimo įskiepis kaip priklausomybė.
• Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .
• Iššokantys langai pasirenkami dėl našumo priežasčių, todėl turite juos inicijuoti patys .
• Nulinis ilgis titleir contentreikšmės niekada nerodys iššokimo.
• Nurodykite container: 'body', kad išvengtumėte atvaizdavimo problemų sudėtingesniuose komponentuose (pvz., įvesties grupėse, mygtukų grupėse ir kt.).
• Paslėptų elementų iššokančių langų suaktyvinimas neveiks.
• Elementų .disabledarba disabledelementų iššokimai turi būti suaktyvinti apvyniojimo elemente.
• Suaktyvinus iš inkarų, apvyniojančių kelias linijas, iššokantys langai bus sutelkti tarp bendro inkarų pločio. Naudokite .text-nowrapant savo <a>, kad išvengtumėte tokio elgesio.
• Iššokantys langai turi būti paslėpti prieš pašalinant atitinkamus elementus iš DOM.
• Iššokimas gali būti suaktyvintas dėl elemento šešėlinio DOM viduje.

Skaitykite toliau, kad pamatytumėte, kaip veikia iššokantys langai su kai kuriais pavyzdžiais.

Pavyzdys: įgalinkite iššokančius langus visur

Vienas iš būdų inicijuoti visus puslapio iššokančius langus būtų pasirinkti juos pagal data-toggleatributą:

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

Pavyzdys: containerparinkties naudojimas

Kai pirminiame elemente yra tam tikrų stilių, kurie trukdo iššokimui, norėsite nurodyti tinkintą container, kad iššokančiojo elemento HTML būtų rodomas tame elemente.

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

Pavyzdys

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

Keturios kryptys

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.

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

Atsisakyti kitą kartą spustelėjus

Naudokite focusaktyviklį, kad atsisakytumėte iššokančių langų, kai vartotojas kitą kartą spustelėja kitą elementą nei perjungimo elementas.

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

Išjungti elementai

Elementai su disabledatributu nėra interaktyvūs, o tai reiškia, kad naudotojai negali jų užvesti arba spustelėti, kad suaktyvintų iššokantįjį langą (arba patarimą). Kaip išeitis, norėsite suaktyvinti iškylantįjį langą iš paketo <div>arba <span>nepaisyti pointer-eventsišjungto elemento.

Išjungus iškylančiojo lango aktyviklius taip pat galite pasirinkti data-trigger="hover", kad iššokantis langas būtų rodomas kaip tiesioginis vaizdinis grįžtamasis ryšys jūsų vartotojams, nes jie gali nesitikėti spustelėti išjungto elemento.

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

Naudojimas

Įgalinti iššokančius langus naudojant „JavaScript“:

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

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Metodai

$().popover(options)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elemento iššokimą.Grįžta į skambinantįjį, kol iššokantis pranešimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokimo paleidimu. Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.

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

.popover('hide')

Slepia elemento iššokimą.Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokimo paleidimu.

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

.popover('toggle')

Perjungia elemento iššokantįjį langą.Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.popoverarba hidden.bs.popoverįvykiui). Tai laikoma „rankiniu“ iššokimo paleidimu.

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

.popover('dispose')

Slepia ir sunaikina elemento iššokimą. Iššokantys langai, kuriuose naudojamas delegavimas (kurie sukurti naudojant parinktį selector) , negalima atskirai sunaikinti palikuonių aktyviklio elementuose.

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

.popover('enable')

Suteikia elemento popover galimybę būti rodomas.Iššokantys langai įjungti pagal numatytuosius nustatymus.

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

.popover('disable')

Pašalina galimybę rodyti elemento iššokantįjį langą. Iššokantis ekranas gali būti rodomas tik tada, kai jis bus įjungtas iš naujo.

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

.popover('toggleEnabled')

Perjungia galimybę rodyti arba paslėpti elemento iššokantįjį langą.

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

.popover('update')

Atnaujina elemento iššokančiojo lango padėtį.

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

Renginiai

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