in English

Popovers

Zure webguneko edozein elementutan Bootstrap popover-ak gehitzeko dokumentazioa eta adibideak, iOS-en aurkitzen direnak bezala.

Ikuspegi orokorra

Popover plugina erabiltzean jakin beharrekoak:

  • Popovers Popper hirugarren liburutegian oinarritzen dira kokapenerako. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper duen bootstrap.bundle.min.js/ erabili bootstrap.bundle.jsbehar duzu popover-ek funtziona dezan!
  • Popover-ek tooltip plugina behar dute menpekotasun gisa.
  • Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da .
  • Popover-ak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
  • Zero-luzera titleeta contentbalioek ez dute inoiz popover bat erakutsiko.
  • Zehaztu container: 'body'osagai konplexuagoetan (adibidez, gure sarrera-taldeak, botoi-taldeak, etab.) arazoak errendatzea saihesteko.
  • Ezkutuko elementuetan popover-ak abiarazteak ez du funtzionatuko.
  • .disabledElementu edo elementuen popover- disabledak bilgarri-elementu batean abiarazi behar dira.
  • Hainbat lerrotan biltzen diren ainguretatik abiarazten denean, popover-ak ainguraren zabalera osoaren artean zentratuko dira. Erabili .text-nowrapzure aldean <a>portaera hori saihesteko.
  • Popover-ak ezkutatu egin behar dira dagozkien elementuak DOMetik kendu aurretik.
  • Popovers itzal DOM baten barruan dagoen elementu bati esker abiarazi daitezke.
Lehenespenez, osagai honek barneko edukien desinfektatzailea erabiltzen du, berariaz onartzen ez diren HTML elementuak kentzen dituena. Ikusi desinfektatzaileen atala gure JavaScript dokumentazioan xehetasun gehiago lortzeko.
Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Jarraitu irakurtzen popover-ek adibide batzuekin nola funtzionatzen duten ikusteko.

Adibidea: gaitu popover-ak nonahi

Orrialde bateko popover guztiak hasieratzeko modu bat haien data-toggleatributuaren arabera hautatzea izango litzateke:

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

Adibidea: containeraukera erabiltzea

Popover-a oztopatzen duten elementu nagusi batean estilo batzuk dituzunean, pertsonalizatu bat zehaztu nahi duzu container, popover-aren HTML elementu horren ordez ager dadin.

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

Adibidea

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

Lau norabide

Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.

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

Baztertu hurrengo klikan

Erabili focusabiarazlea popover-ak baztertzeko, erabiltzaileak etengailuaren elementua ez den beste elementu batean egin duen hurrengo klikan.

Markatu zehatza behar da hurrengo klik egitean baztertzeko

Arakatzaile eta plataforma anitzeko portaera egokia izateko, <a>etiketa erabili behar duzu, ez etiketa<button> , eta tabindexatributu bat ere sartu behar duzu.

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

Desgaitutako elementuak

Atributua duten elementuak disabledez dira interaktiboak, hau da, erabiltzaileek ezin dituzte pasa edo klikatu popover bat (edo tresna-informazioa) abiarazteko. Konponbide gisa, popover-a abiarazi nahi duzu bilgarri batetik <div>edo eta desgaitutako elementua <span>gainidatzi nahi duzu.pointer-events

Desgaitutako popover abiarazleetarako, baliteke data-trigger="hover"popover-a zure erabiltzaileei berehalako iritzi bisual gisa agertzea, baliteke desgaitutako elementu batean klik egitea espero ez dutelako.

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

Erabilera

Gaitu popover-ak JavaScript bidez:

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

Popovers batzuetan lausoak agertzen dira Windows 10 gailuetan, GPU azelerazioa eta sistema aldatutako DPI bat dela eta. Honetarako konponbidea v4-n GPU azelerazioa desgaitzea da zure popover-etan behar den moduan.

Iradokitako konponketa:

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

Popover-ek teklatuaren eta laguntza-teknologien erabiltzaileentzat funtzionatzea

Teklatuko erabiltzaileek zure popover-ak aktibatzeko aukera izan dezaten, ohiko teklatuan fokua eta interaktiboak diren HTML elementuetan soilik gehitu behar dituzu (adibidez, estekak edo inprimaki-kontrolak). Nahiz eta HTML elementu arbitrarioak (adibidez, <span>s) foka daitezkeen atributua gehituz tabindex="0", horrek tabulazio gogaikarri eta nahasgarriak gehituko ditu teklatuaren erabiltzaileentzako elementu ez-interaktiboetan, eta gaur egun laguntza-teknologia gehienek ez dute popover-aren edukia iragartzen egoera honetan. . Gainera, ez zaitez bakarrik fidatu hoverzure popover-en abiarazle gisa, teklatuaren erabiltzaileek aktibatzea ezinezkoa izango baita.

Aukera honekin HTML aberatsa eta egituratua txerta dezakezun arren, htmlgehiegizko edukia gehitzea saihestea gomendatzen dizugu. Une honetan popover-ek funtzionatzen duten modua da, behin bistaratu ondoren, haien edukia abiarazle-elementuari lotzen zaiola aria-describedbyatributuarekin. Ondorioz, popover-aren eduki osoa jakinaraziko zaie laguntza-teknologien erabiltzaileei etenik gabeko korronte luze gisa.

Gainera, zure popover-ean kontrol interaktiboak (adibidez, inprimaki-elementuak edo estekak) ere sar daitezkeen arren (elementu horiek gehituz whiteListedo baimendutako atributu eta etiketei), kontuan izan une honetan popover-ak ez duela kudeatzen teklatuaren foku-ordena. Teklatu-erabiltzaile batek popover bat irekitzen duenean, fokua abiarazteko elementuan geratzen da, eta popover-ak normalean dokumentuaren egituran abiarazlea berehala jarraitzen ez duenez, ez dago bermatzen aurrera/sakatzea.TABteklatuaren erabiltzaile bat popover-era eramango du. Laburbilduz, popover batean kontrol interaktiboak gehitzeak litekeena da kontrol horiek eskuraezinak edo erabilezinak izatea teklatuaren erabiltzaileentzat eta laguntza-teknologien erabiltzaileentzat, edo, gutxienez, fokatze-ordena orokor ilogikoa izatea. Kasu hauetan, kontuan hartu elkarrizketa modal bat erabiltzea ordez.

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Kontuan izan segurtasun arrazoiengatik sanitize, sanitizeFneta whiteListaukerak ezin direla eman datu-atributuak erabiliz.
Izena Mota Lehenetsia Deskribapena
animazioa boolearra egia Aplikatu CSS desagertzeko trantsizioa popover-ari
edukiontzi katea | elementua | faltsua faltsua

Popover elementu zehatz bati eransten dio. Adibidea container: 'body':. Aukera hau bereziki erabilgarria da popover-a dokumentuaren fluxuan kokatzeko aukera ematen baitu elementu eragilearen ondoan, eta horrek saihestuko du popover-a abiaraztearen elementutik urruntzea leihoaren tamaina aldatzean.

edukia katea | elementua | funtzioa ''

Edukien balio lehenetsia data-contentatributua ez badago.

thisFuntzio bat ematen bada, popover-a erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .

atzerapena zenbakia | objektua 0

Atzeratu popover-a erakusteko eta ezkutatzeko (ms) - ez dagokio eskuzko abiarazle motari

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { "show": 500, "hide": 100 }

html boolearra faltsua Sartu HTML popover-ean. Faltsua bada, jQuery-ren textmetodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude.
Kokapen katea | funtzioa 'zuzen'

Popover-a nola kokatu - auto | goian | behea | ezkerra | eskubidea. Zehazten
denean , popover-a dinamikoki berbideratuko du.auto

Funtzio bat kokapena zehazteko erabiltzen denean, popover DOM nodoa lehen argumentu gisa deitzen da eta abiarazte elementua DOM nodoa bigarren gisa. thisTestuingurua popover instantzian ezartzen da .

hautatzailea katea | faltsua faltsua Hautatzailea ematen bada, popover objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa gaitzeko erabiltzen da popovers gehitzeko. Ikusi hau eta adibide informatzaile bat .
txantiloia katea '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Oinarrizko HTML popover-a sortzean erabiltzeko.

Popover- titleak injektatuko dira .popover-header.

Popover- contentak injektatuko dira .popover-body.

.arrowpopover-en gezia bihurtuko da.

Kanpoko bilgarri-elementuak .popoverklasea izan behar du.

Izenburua katea | elementua | funtzioa ''

Izenburuaren balio lehenetsia titleatributua ez badago.

thisFuntzio bat ematen bada, popover-a erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .

trigger katea 'klik' Nola abiarazten den popover-a - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manualezin da beste edozein eragilerekin konbinatu.
desplazamendu zenbakia | katea 0 Popover-aren desplazamendua bere xedearekiko. Informazio gehiago lortzeko, ikusi Popper-en offset docs .
erorketaKokapena katea | array 'irauli' Baimendu Popperrek atzerabidean zein posizio erabiliko duen zehaztea. Informazio gehiagorako, jo Popperren portaera dokumentuetara
CustomClass katea | funtzioa ''

Gehitu klaseak popover-era erakusten denean. Kontuan izan klase hauek txantiloian zehaztutako klaseez gain gehituko direla. Hainbat klase gehitzeko, bereiz itzazu zuriuneekin: 'a b'.

Klase-izen gehigarriak dituen kate bakarra itzuli beharko lukeen funtzio bat ere pasa dezakezu.

muga katea | elementua 'ScrollParent' Popover-aren gainezka-murriztapenaren muga. 'viewport', 'window', 'scrollParent', edo HTMLElement erreferentzia baten balioak onartzen ditu (JavaScript soilik). Informazio gehiago lortzeko, ikusi Popperren preventOverflow docs .
saneatu boolearra egia Gaitu edo desgaitu desinfekzioa. Aktibatzen bada 'template', 'content'eta 'title'aukerak garbituko dira. Ikusi desinfektatzaileen atala gure JavaScript dokumentazioan .
Zerrenda zuria objektua Balio lehenetsia Baimendutako atributuak eta etiketak dituen objektua
sanitizeFn nulua | funtzioa nulua Hemen zure higienizazio funtzioa horni dezakezu. Hau erabilgarria izan daiteke garbiketa egiteko liburutegi dedikatu bat erabili nahi baduzu.
popperConfig nulua | objektua nulua Bootstrap-en Popper konfigurazio lehenetsia aldatzeko, ikusi Popper-en konfigurazioa

Popover indibidualentzako datu-atributuak

Popover indibidualetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

$().popover(options)

Elementu bilduma baterako popover-ak hasieratzen ditu.

.popover('show')

Elementu baten popover-a agerian uzten du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi aurretik (hau da, shown.bs.popovergertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztetzat hartzen da. Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.

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

.popover('hide')

Elementu baten popover-a ezkutatzen du. Popover-a benetan ezkutatu aurretik (hau da, hidden.bs.popovergertaera gertatu baino lehen) itzultzen da deitzaileari. Hau popover-aren "eskuz" abiaraztetzat hartzen da.

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

.popover('toggle')

Elementu baten popover-a aktibatzen du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.popoveredo hidden.bs.popovergertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztetzat hartzen da.

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

.popover('dispose')

Elementu baten popover-a ezkutatu eta suntsitzen du. Ordezkapena erabiltzen duten popover -ak ( selectoraukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.

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

.popover('enable')

Elementu baten popover-a erakusteko gaitasuna ematen dio. Popover-ak lehenespenez gaituta daude.

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

.popover('disable')

Elementu baten popover-a erakusteko gaitasuna kentzen du. Popover-a berriro gaituta badago soilik erakutsi ahal izango da.

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

.popover('toggleEnabled')

Elementu baten popover-a erakusteko edo ezkutatzeko gaitasuna aldatzen du.

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

.popover('update')

Elementu baten popover-aren posizioa eguneratzen du.

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

Gertaerak

Gertaera mota Deskribapena
show.bs.popover Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakutsi.bs.popover Gertaera hau abiarazten da popover-a erabiltzailearentzat ikusgai jartzen denean (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.popover Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuan.bs.popover Gertaera hau abiarazten da popover-a erabiltzaileari ezkutatzen amaitzen denean (CSS trantsizioak amaitu arte itxarongo da).
txertatuta.bs.popover Gertaera hau gertaeraren ondoren show.bs.popoverabiarazten da popover txantiloia DOM-era gehitu denean.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})