Source

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

  • Popoveriai nustato vietą trečiosios šalies bibliotekoje Popper.js . Kad iššokantys langai veiktų, prieš bootstrap.js turite įtraukti popper.min.js arba naudoti bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper.js!
  • 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 white-space: nowrap;ant savo <a>, kad išvengtumėte tokio elgesio.
  • Iššokantys langai turi būti paslėpti prieš pašalinant atitinkamus elementus iš DOM.

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

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.

Norint atmesti spustelėjus kitą kartą, reikalingas konkretus žymėjimas

Norėdami tinkamai veikti įvairiose naršyklėse ir įvairiose platformose, turite naudoti <a>žymą, o ne<button> žymą, taip pat turite įtraukti tabindexatributą.

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

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

Galimybės

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

vardas Tipas Numatytas apibūdinimas
animacija loginis tiesa Iššokančiai langui pritaikykite CSS išnykimo perėjimą
konteineris styga | elementas | klaidinga klaidinga

Prideda iššokantįjį langą prie konkretaus elemento. Pavyzdys container: 'body':. Ši parinktis yra ypač naudinga, nes leidžia jums išdėstyti iššokantįjį langą dokumento sraute šalia paleidimo elemento – tai neleis iškylančiajam elementui nuslysti nuo paleidžiančio elemento keičiant lango dydį.
turinys styga | elementas | funkcija ''

Numatytoji turinio vertė, jei data-contentatributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio prijungtas iššokantis langas.
uždelsimas numeris | objektas 0

Iššokančiojo lango rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui

Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti

Objekto struktūra yra tokia:delay: { "show": 500, "hide": 100 }
html loginis klaidinga Įdėkite HTML į iškylantįjį langą. Jei klaidinga, textturiniui įterpti į DOM bus naudojamas jQuery metodas. Jei nerimaujate dėl XSS atakų, naudokite tekstą.
išdėstymas styga | funkcija 'teisingai'

Kaip nustatyti iššokantįjį langą - auto | viršuje | apačioje | paliko | teisingai.
Kai autonurodyta, jis dinamiškai perorientuos iššokantįjį langą.

Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra iššokantis DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas thisnustatytas į iššokantįjį egzempliorių.
parinkiklis styga | klaidinga klaidinga Jei yra parinkiklis, iššokantys objektai bus deleguojami nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį pridėti iššokančių langų. Žiūrėkite tai ir informatyvų pavyzdį .
šabloną styga '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Pagrindinis HTML, naudojamas kuriant iššokantįjį langą.

Popover titlebus švirkščiamas į .popover-header.

Popover contentbus švirkščiamas į .popover-body.

.arrowtaps iššokančiojo rodykle.

Tolimiausias apvyniojimo elementas turi turėti .popoverklasę.
titulą styga | elementas | funkcija ''

Numatytoji pavadinimo reikšmė, jei titleatributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio prijungtas iššokantis langas.
paleidiklis styga 'spustelėkite' Kaip suaktyvinamas iššokantis langas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu. „rankinis“ negali būti derinamas su jokiu kitu aktyvikliu.
kompensuoti numeris | styga 0 Iššokimo poslinkis, palyginti su jo tikslu. Daugiau informacijos rasite Popper.js poslinkio dokumentuose .
atsarginė vieta styga | masyvas "apversti" Leiskite nurodyti, kurią poziciją Popper naudos atšaukdamas. Daugiau informacijos rasite Popper.js elgesio dokumentuose
riba styga | elementas 'scrollParent' Iššokančiojo perpildymo apribojimo riba. Priima , , arba HTMLElement nuorodos reikšmes 'viewport'( 'window'tik 'scrollParent'JavaScript). Daugiau informacijos rasite Popper.js preventOverflow dokumentuose .

Atskirų iššokančių langų duomenų atributai

Atskirų iššokančių langų parinktys gali būti nurodytos naudojant duomenų atributus, kaip paaiškinta aukščiau.

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite „JavaScript“ dokumentacijoje.

$().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ššokančių langų, kuriuose naudojamas delegavimas (kurie sukuriami 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

Renginio tipas apibūdinimas
rodyti.bs.popover Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.popover Šis įvykis suaktyvinamas, kai iššokantis langas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.popover Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.popover Šis įvykis suaktyvinamas, kai iššokantis ekranas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
įterpta.bs.popover Šis įvykis suaktyvinamas po show.bs.popoverįvykio, kai prie DOM pridedamas iššokantis šablonas. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})