Source

Popovers

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

Ikuspegi orokorra

Popover plugina erabiltzean jakin beharrekoak:

  • Popover- ek hirugarrenen Popper.js liburutegian oinarritzen dute kokapenerako. Popper.min.js sartu behar duzu bootstrap.js baino lehen edo Popper.js 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.

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

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.

Popover baztergarria 
<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)

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 gehiagorako, ikusi Popper.js-en offset docs .
erorketaKokapena katea | array 'irauli' Baimendu Popperrek atzerabidean zein posizio erabiliko duen zehaztea. Informazio gehiagorako, jo Popper.js-en portaera dokumentuetara
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 Popper.js-en preventOverflow docs .
saneatu boolearra egia Gaitu edo desgaitu desinfekzioa. Aktibatzen bada 'template', 'content'eta 'title'aukerak garbituko dira.
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.js konfigurazio lehenetsia aldatzeko, ikusi Popper.js-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...
})