in English

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.
Pagal numatytuosius nustatymus šis komponentas naudoja integruotą turinio valymo priemonę, kuri pašalina visus HTML elementus, kurie nėra aiškiai leidžiami. Norėdami gauti daugiau informacijos , žr. „JavaScript“ dokumentacijos valymo priemonių skyrių .
Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

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.

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

<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)
GPU pagreitis

Iššokantys langai kartais atrodo neryškūs „Windows 10“ įrenginiuose dėl GPU spartinimo ir pakeisto sistemos DPI. Šios problemos sprendimas 4 versijoje yra išjungti GPU spartinimą, kai reikia iššokančiuosius langus.

Siūlomas pataisymas:

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

Kad iššokantys langai veiktų klaviatūros ir pagalbinių technologijų naudotojams

Kad klaviatūros naudotojai galėtų suaktyvinti iššokančius langus, turėtumėte juos pridėti tik prie HTML elementų, kurie tradiciškai yra skirti klaviatūrai ir yra interaktyvūs (pvz., nuorodos ar formų valdikliai). Nors savavališkus HTML elementus (pvz., <span>s) galima sufokusuoti pridedant tabindex="0"atributą, dėl to klaviatūros naudotojams bus pridėta potencialiai erzinančių ir klaidinančių tabuliavimo taškų neinteraktyviuose elementuose, o dauguma pagalbinių technologijų šiuo metu neskelbia iššokančiojo turinio. . Be to, nepasikliaukite vien tik hoveriššokančių langų paleidikliu, nes klaviatūros naudotojai negalės jų suaktyvinti.

Nors naudodami šią htmlparinktį galite įterpti turtingą, struktūrinį HTML į iškylančius langus, primygtinai rekomenduojame nepridėti per daug turinio. Šiuo metu iššokantys langai veikia taip, kad, kai jie rodomi, jų turinys yra susietas su aktyviklio elementu su aria-describedbyatributu. Dėl to visas popover turinys pagalbinių technologijų naudotojams bus paskelbtas kaip vienas ilgas, nenutrūkstamas srautas.

Be to, nors į iššokantįjį langą galima įtraukti ir interaktyvius valdiklius (pvz., formos elementus ar nuorodas) (pridedant šiuos elementus prie whiteListarba leidžiamų atributų ir žymų), atminkite, kad šiuo metu iškylantis langas nevaldo klaviatūros fokusavimo tvarkos. Kai klaviatūros vartotojas atidaro iššokantįjį langą, dėmesys lieka ties suaktyvinimo elementu, o kadangi dokumento struktūroje iššokantis ekranas paprastai ne iš karto seka paleidiklį, nėra garantijos, kad judant pirmyn / paspaudusTABperkels klaviatūros vartotoją į patį iškylantįjį langą. Trumpai tariant, tiesiog įtraukus interaktyvius valdiklius prie iššokančiojo vaizdo, šie valdikliai taps nepasiekiami / nenaudojami klaviatūros ir pagalbinių technologijų naudotojams arba bent jau susidarys nelogiška bendra fokusavimo tvarka. Tokiais atvejais apsvarstykite galimybę naudoti modalinį dialogo langą.

Galimybės

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

Atminkite, kad saugumo sumetimais sanitize, sanitizeFnir whiteListparinkčių negalima pateikti naudojant duomenų atributus.
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 išdėstyti 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 popover'io 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. manualnegali būti derinamas su jokiu kitu paleidikliu.
kompensuoti numeris | styga 0 Iššokimo poslinkis, palyginti su jo tikslu. Norėdami gauti daugiau informacijos, žr. Popper's poslinkio dokumentus .
atsarginė vieta styga | masyvas "apversti" Leiskite nurodyti, kurią poziciją Popper naudos atšaukdamas. Daugiau informacijos rasite Popperio elgesio dokumentuose
CustomClass styga | funkcija ''

Pridėkite klases prie iškylančiojo lango, kai jis rodomas. Atminkite, kad šios klasės bus pridėtos prie visų šablone nurodytų klasių. Norėdami pridėti kelias klases, atskirkite jas tarpais: 'a b'.

Taip pat galite perduoti funkciją, kuri turėtų grąžinti vieną eilutę su papildomais klasių pavadinimais.

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's preventOverflow dokumentuose .
dezinfekuoti loginis tiesa Įjunkite arba išjunkite dezinfekavimą. Jei suaktyvinta 'template', parinktys bus išvalytos 'content'. 'title'Žr . „JavaScript“ dokumentacijos valymo priemonių skyrių .
baltas sąrašas objektas Numatytoji reikšmė Objektas, kuriame yra leidžiamų atributų ir žymų
dezinfekuotiFn null | funkcija nulinis Čia galite pateikti savo dezinfekavimo funkciją. Tai gali būti naudinga, jei norite dezinfekuoti naudoti tam skirtą biblioteką.
popperConfig null | objektas nulinis Norėdami pakeisti numatytąją Bootstrap Popper konfigūraciją, žr. Popper konfigūraciją

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

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