Source

Popovers

Dokumentācija un piemēri Bootstrap uznirstošo logu, piemēram, operētājsistēmā iOS, pievienošanai jebkuram vietnes elementam.

Pārskats

Lietas, kas jāzina, izmantojot uznirstošo spraudni:

  • Popovers pozicionēšanai izmanto trešās puses bibliotēku Popper.js . Lai uznirstošie elementi darbotos, pirms bootstrap.js ir jāiekļauj popper.min.js vai jāizmanto bootstrap.bundle.min.js/ bootstrap.bundle.jskas satur Popper.js!
  • Uznirstošajiem ekrāniem kā atkarība ir nepieciešams rīka padoma spraudnis .
  • Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js .
  • Uznirstošie elementi ir izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
  • Nulles garums titleun contentvērtības nekad neparādīs uznirstošo logu.
  • Norādiet container: 'body', lai izvairītos no renderēšanas problēmām sarežģītākos komponentos (piemēram, mūsu ievades grupās, pogu grupās utt.).
  • Uznirstošo logu aktivizēšana slēptajos elementos nedarbosies.
  • Uznirstošie elementi .disabledvai disabledelementiem ir jāaktivizē iesaiņojuma elementā.
  • Ja to aktivizē enkuri, kas apvij vairākas līnijas, uznirstošie elementi tiks centrēti starp enkuru kopējo platumu. Izmantojiet white-space: nowrap;, <a>lai izvairītos no šādas uzvedības.
  • Uznirstošie elementi ir jāslēpj, pirms to atbilstošie elementi ir noņemti no DOM.

Turpiniet lasīt, lai redzētu, kā darbojas uznirstošie elementi, izmantojot dažus piemērus.

Piemērs: iespējot uznirstošos logus visur

Viens veids, kā inicializēt visus uznirstošos logus lapā, būtu atlasīt tos pēc to data-toggleatribūta:

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

Piemērs: containeropcijas izmantošana

Ja vecā elementā ir daži stili, kas traucē uznirstošo logu, jūs vēlaties norādīt pielāgotu container, lai uznirstošā elementa HTML tiktu rādīts šajā elementā.

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

Piemērs

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

Četri virzieni

Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi.

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

Noraidīt ar nākamo klikšķi

Izmantojiet focusaktivizētāju, lai noraidītu uznirstošos logus, kad lietotājs nākamreiz noklikšķina uz cita elementa, nevis uz pārslēgšanas elementa.

Konkrēts marķējums ir nepieciešams, lai atteiktu nākamo klikšķi

Lai nodrošinātu pareizu darbību starp pārlūkprogrammām un platformām, ir jāizmanto <a>tags, nevis tags, kā <button>arī jāiekļauj tabindexatribūts.

Noraidāms 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'
})

Atspējotie elementi

Elementi ar disabledatribūtu nav interaktīvi, tas nozīmē, ka lietotāji nevar virzīt kursoru vai noklikšķināt uz tiem, lai aktivizētu uznirstošo logu (vai rīka padomu). Kā risinājumu varat aktivizēt uznirstošo pavērsienu no iesaiņojuma <div>vai <span>un ignorēt pointer-eventsatspējotā elementa.

Atspējotiem uznirstošiem aktivizētājiem varat arī izvēlēties data-trigger="hover", lai uznirstošais logs lietotājiem tiktu rādīts kā tūlītēja vizuāla atgriezeniskā saite, jo viņi, iespējams, negaidīs, ka noklikšķinās uz atspējota elementa.

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

Lietošana

Iespējot uznirstošos logus, izmantojot JavaScript:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Vārds Tips Noklusējums Apraksts
animācija Būla taisnība Uznirstošajam logam izmantojiet CSS izbalēšanas pāreju
konteiners stīga | elements | viltus viltus

Pievieno uznirstošo logu konkrētam elementam. Piemērs: container: 'body'. Šī opcija ir īpaši noderīga, jo tā ļauj novietot uznirstošo logu dokumenta plūsmā netālu no palaišanas elementa, kas neļaus uznirstošajam logam peldēt prom no palaišanas elementa loga lieluma maiņas laikā.
saturu stīga | elements | funkciju ''

Noklusējuma satura vērtība, ja data-contentatribūts nav pieejams.

Ja funkcija ir dota, tā tiks izsaukta ar thisatsauci, kas iestatīta uz elementu, kuram ir pievienots uznirstošais logs.
kavēšanās numurs | objektu 0

Uznirstošā loga rādīšanas un slēpšanas aizkave (ms) — neattiecas uz manuālo palaišanas veidu

Ja tiek norādīts numurs, aizkave tiek piemērota gan slēpšanai/rādīšanai

Objekta struktūra ir šāda:delay: { "show": 500, "hide": 100 }
html Būla viltus Ievietojiet HTML uznirstošajā logā. textJa tas ir nepatiess, satura ievietošanai DOM tiks izmantota jQuery metode. Izmantojiet tekstu, ja uztraucaties par XSS uzbrukumiem.
izvietojumu stīga | funkciju 'pa labi'

Kā novietot uznirstošo logu - auto | uz augšu | apakšā | pa kreisi | pa labi.
Kad autoir norādīts, tas dinamiski pārorientēs uznirstošo logu.

Ja funkcija tiek izmantota, lai noteiktu izvietojumu, tā tiek izsaukta ar uznirstošo DOM mezglu kā pirmo argumentu un izraisošo elementu DOM mezglu kā otro. Konteksts thisir iestatīts uz uznirstošo instanci.
atlasītājs stīga | viltus viltus Ja ir nodrošināts atlasītājs, uznirstošie objekti tiks deleģēti norādītajiem mērķiem. Praksē to izmanto, lai dinamiskam HTML saturam iespējotu uznirstošo logu pievienošanu. Skatiet šo un informatīvo piemēru .
veidne stīga '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Pamata HTML, kas jāizmanto, veidojot uznirstošo logu.

Popover's titletiks injicēts .popover-header.

Popover's contenttiks injicēts .popover-body.

.arrowkļūs par popovera bultiņu.

Vistālākajam iesaiņojuma elementam jābūt .popoverklasei.
virsraksts stīga | elements | funkciju ''

Noklusējuma nosaukuma vērtība, ja titleatribūts nav pieejams.

Ja funkcija ir dota, tā tiks izsaukta ar thisatsauci, kas iestatīta uz elementu, kuram ir pievienots uznirstošais logs.
sprūda stīga 'klikšķis' Kā tiek aktivizēts popover — noklikšķiniet uz | lidināties | fokuss | rokasgrāmata. Jūs varat nodot vairākus trigerus; atdaliet tos ar atstarpi. "manuāli" nevar apvienot ar citiem aktivizētājiem.
kompensēt numurs | stīga 0 Popover nobīde attiecībā pret tā mērķi. Papildinformāciju skatiet Popper.js ofseta dokumentos .
atkāpšanāsIzvietojums stīga | masīvs "apgriezt" Ļaujiet norādīt, kuru pozīciju Popper izmantos atkāpšanās gadījumā. Papildinformāciju skatiet Popper.js uzvedības dokumentos
robeža stīga | elements 'scrollParent' Uznirstošā loga pārpildes ierobežojuma robeža. Pieņem vērtības 'viewport', 'window', 'scrollParent'vai HTMLElement atsauci (tikai JavaScript). Papildinformāciju skatiet dokumentā Popper.js preventOverflow .

Datu atribūti atsevišķiem uznirstošajiem logiem

Atsevišķu uznirstošo logu opcijas var norādīt, izmantojot datu atribūtus, kā paskaidrots iepriekš.

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā.

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementa popover. Atgriežas pie zvanītāja, pirms faktiski ir parādīts uznirstošais logs (ti, pirms shown.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu. Uznirstošie elementi, kuru nosaukumam un saturam ir nulles garums, nekad netiek rādīti.

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

.popover('hide')

Paslēpj elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski paslēpts (ti, pirms hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

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

.popover('toggle')

Pārslēdz elementa uznirstošo logu. Atgriežas pie zvanītāja, pirms uznirstošais logs ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.popovervai hidden.bs.popovernotikuma). Tas tiek uzskatīts par "manuālu" uznirstošā ekrāna aktivizēšanu.

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

.popover('dispose')

Paslēpj un iznīcina elementa uznirstošo logu. Uznirstošos logus, kuros tiek izmantota deleģēšana (kas tiek izveidoti, izmantojot opciju selector) , nevar atsevišķi iznīcināt pēcnācēju trigera elementiem.

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

.popover('enable')

Sniedz iespēju parādīt elementa uznirstošo logu. Uznirstošie elementi ir iespējoti pēc noklusējuma.

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

.popover('disable')

Noņem iespēju rādīt elementa uznirstošo logu. Uznirstošo logu varēs parādīt tikai tad, ja tas būs atkārtoti iespējots.

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

.popover('toggleEnabled')

Pārslēdz iespēju rādīt vai paslēpt elementa uznirstošo logu.

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

.popover('update')

Atjaunina elementa uznirstošā loga pozīciju.

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

Pasākumi

Pasākuma veids Apraksts
show.bs.popover Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
parādīts.bs.popover Šis notikums tiek aktivizēts, kad uznirstošais logs ir padarīts redzams lietotājam (pagaidīs, līdz tiks pabeigtas CSS pārejas).
hide.bs.popover Šis notikums tiek aktivizēts nekavējoties, kad hideir izsaukta instances metode.
paslēpts.bs.popover Šis notikums tiek aktivizēts, kad uznirstošais logs ir paslēpts no lietotāja (gaidīs, kamēr CSS pārejas tiks pabeigtas).
ievietots.bs.popover Šis notikums tiek aktivizēts pēc show.bs.popovernotikuma, kad uznirstošā veidne ir pievienota DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})