Popovers
Dokuméntasi sareng conto pikeun nambihan popovers Bootstrap, sapertos anu aya dina ios, kana unsur naon waé dina situs anjeun.
Ihtisar
Hal-hal anu kedah terang nalika nganggo plugin popover:
- Popovers ngandelkeun perpustakaan pihak ka-3 Popper pikeun posisi. Anjeun kedah ngalebetkeun popper.min.js sateuacan bootstrap.js atanapi nganggo
bootstrap.bundle.min.js
/bootstrap.bundle.js
anu ngandung Popper supados popovers tiasa dianggo! - Popovers merlukeun plugin tooltip salaku kagumantungan.
- Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogi
util.js
. - Popovers milih pikeun alesan kinerja, janten anjeun kedah ngamimitian nyalira .
- Nol-panjang
title
jeungcontent
nilai moal nembongkeun popover a. - Sebutkeun
container: 'body'
pikeun nyegah masalah rendering dina komponén anu langkung kompleks (sapertos grup input kami, grup tombol, jsb). - Triggering popovers on elemen disumputkeun moal jalan.
- Popovers pikeun
.disabled
atawadisabled
elemen kudu dipicu dina unsur wrapper. - Nalika dipicu tina jangkar anu ngabungkus sababaraha garis, popovers bakal dipuseurkeun antara lebar sadayana jangkar. Paké
.text-nowrap
on<a>
s anjeun ulah kabiasaan ieu. - Popovers kudu disumputkeun saméméh elemen pakait maranéhanana geus dihapus tina DOM.
- Popovers tiasa dipicu berkat unsur dina DOM kalangkang.
prefers-reduced-motion
pamundut média. Tempo
bagian gerak ngurangan tina dokuméntasi aksés kami .
Tetep maca pikeun ningali kumaha popovers dianggo sareng sababaraha conto.
Conto: Aktipkeun popovers dimana-mana
Salah sahiji cara pikeun ngamimitian sadayana popovers dina halaman nyaéta milih ku data-toggle
atributna:
$(function () {
$('[data-toggle="popover"]').popover()
})
Conto: Ngagunakeun container
pilihan
Lamun anjeun boga sababaraha gaya dina unsur indungna nu ngaganggu popover a, anjeun bakal hoyong nangtukeun custom a container
sangkan HTML nu popover urang némbongan dina unsur éta gantina.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Contona
<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>
Opat arah
Opat pilihan sadia: luhur, katuhu, handap, jeung kénca Blok.
<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>
Leupaskeun dina klik salajengna
Anggo focus
pemicu pikeun ngaleungitkeun popovers dina klik salajengna pangguna tina unsur anu béda ti unsur toggle.
Markup spésifik dipikabutuh pikeun dismiss-on-next-click
Pikeun paripolah cross-browser sareng cross-platform anu leres, anjeun kedah nganggo <a>
tag, sanés tag <button>
, sareng anjeun ogé kedah ngalebetkeun tabindex
atribut.
<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'
})
Unsur ditumpurkeun
Unsur-unsur anu gaduh disabled
atribut henteu interaktif, hartosna pangguna henteu tiasa hover atanapi ngaklikana pikeun memicu popover (atanapi tooltip). Salaku workaround a, Anjeun bakal hoyong micu popover ti wrapper <div>
atawa <span>
jeung override pointer-events
dina unsur ditumpurkeun.
Pikeun pemicu popover anu ditumpurkeun, anjeun ogé tiasa resep data-trigger="hover"
supados popover muncul salaku eupan balik visual langsung ka pangguna anjeun sabab henteu nyangka ngaklik unsur anu ditumpurkeun.
<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>
Pamakéan
Aktipkeun popovers via JavaScript:
$('#example').popover(options)
akselerasi GPU
Popovers kadang katingali kabur dina Windows 10 alat kusabab akselerasi GPU sareng sistem DPI anu dirobih. Solusi pikeun ieu dina v4 nyaéta nganonaktipkeun akselerasi GPU upami diperyogikeun dina popovers anjeun.
Disarankeun ngalereskeun:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Ngadamel popovers dianggo pikeun keyboard sareng pangguna téknologi anu ngabantosan
Pikeun ngidinan pamaké keyboard pikeun ngaktipkeun popovers anjeun, anjeun ngan kudu nambahanana kana elemen HTML nu tradisional keyboard-focusable sarta interaktif (saperti tumbu atawa kontrol formulir). Sanajan elemen HTML sawenang (sapertos <span>
s) bisa dijieun focusable ku nambahkeun tabindex="0"
atribut, ieu bakal nambahan tab berpotensi bangor tur matak ngabingungkeun eureun dina elemen non-interaktif pikeun pamaké keyboard, sarta paling téknologi mantuan ayeuna teu ngumumkeun eusi popover dina situasi ieu. . Salaku tambahan, ulah ngan ukur ngandelkeun hover
salaku pemicu pikeun popovers anjeun, sabab ieu bakal ngajantenkeun aranjeunna teu mungkin dipicuna pikeun pangguna keyboard.
Sanaos anjeun tiasa nyelapkeun HTML terstruktur anu beunghar dina popovers kalayan html
pilihan, kami nyarankeun pisan yén anjeun ulah nambihan eusi anu kaleuleuwihan. Cara popovers ayeuna jalan nyaeta, sakali ditampilkeun, eusi maranéhanana dihijikeun ka unsur pemicu jeung aria-describedby
atribut. Hasilna, sakabéh eusi popover bakal diumumkeun ka pamaké téhnologi assistive salaku hiji aliran panjang, uninterrupted.
Salaku tambahan, sanaos kamungkinan ogé kalebet kadali interaktif (sapertos unsur bentuk atanapi tautan) dina popover anjeun (ku nambihan elemen ieu kana whiteList
atribut atanapi tag anu diidinan), perhatikeun yén ayeuna popover henteu ngatur urutan fokus keyboard. Lamun pamaké keyboard muka popover a, fokus tetep dina unsur pemicu, sarta salaku popover biasana teu langsung nuturkeun pemicu dina struktur dokumen urang, euweuh jaminan yén pindah ka hareup / mencét.TABbakal mindahkeun hiji pamaké keyboard kana popover sorangan. Pondokna, ngan saukur nambahkeun kadali interaktif kana popover a kamungkinan nyieun kadali ieu unreachable / teu bisa dipaké pikeun pamaké keyboard jeung pamaké téknologi assistive, atawa sahenteuna nyieun hiji urutan fokus sakabéhna teu logis. Dina kasus ieu, mertimbangkeun ngagunakeun dialog modal gantina.
Pilihan
Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-
, sapertos dina data-animation=""
.
sanitize
,
sanitizeFn
sarta
whiteList
pilihan teu bisa disadiakeun maké atribut data.
Ngaran | Tipe | Default | Katerangan |
---|---|---|---|
animasi | boolean | leres | Larapkeun transisi fade CSS kana popover |
wadahna | string | unsur | palsu | palsu | Appends popover ka elemen husus. Contona: |
eusi | string | unsur | fungsi | '' | Nilai eusi standar upami Upami fungsina dipasihkeun, éta bakal disebat sareng |
reureuh | angka | objék | 0 | Reureuh némbongkeun sarta nyumputkeun popover (ms) - teu dilarapkeun ka tipe pemicu manual Lamun jumlah disadiakeun, reureuh diterapkeun ka duanana nyumputkeun / acara Struktur objék nyaéta: |
html | boolean | palsu | Selapkeun HTML kana popover nu. Upami palsu, text metode jQuery bakal dianggo pikeun nyelapkeun eusi kana DOM. Anggo téks upami anjeun hariwang ngeunaan serangan XSS. |
panempatan | string | fungsi | 'leres' | Kumaha posisi popover - otomatis | luhur | handap | ditinggalkeun | leres. Nalika fungsi dipaké pikeun nangtukeun panempatan, mangka disebut titik popover DOM salaku argumen kahijina sarta triggering unsur titik DOM salaku kadua. Kontéks |
pamilih | string | palsu | palsu | Upami pamilih disayogikeun, obyék popover bakal didelegasikeun ka target anu ditangtukeun. Dina prakték, ieu dipaké pikeun ngaktipkeun eusi HTML dinamis boga popovers ditambahkeun. Tingali ieu sareng conto informatif . |
citakan | senar | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Dasar HTML pikeun dianggo nalika nyiptakeun popover. The popover urang The popover urang
Unsur wrapper pangluarna kudu boga |
judul | string | unsur | fungsi | '' | Nilai judul standar upami Upami fungsina dipasihkeun, éta bakal disebat sareng |
pemicu | senar | 'klik' | Kumaha popover dipicu - klik | ngalayang | fokus | manual. Anjeun tiasa ngalangkungan sababaraha pemicu; misahkeun aranjeunna kalayan spasi. manual teu bisa digabungkeun jeung sagala pemicu séjén. |
ngimbangan | angka | senar | 0 | Offset tina popover relatif ka target na. Kanggo inpo nu leuwih lengkep tingal docs offset Popper urang . |
fallbackPlacement | string | susunan | 'malik' | Ngidinan pikeun nangtukeun posisi Popper anu bakal dianggo dina fallback. Kanggo inpo nu leuwih lengkep tingal docs kabiasaan Popper urang |
customClass | string | fungsi | '' | Tambahkeun kelas kana popover nalika dipintonkeun. Catet yén kelas-kelas ieu bakal ditambah salian ti kelas-kelas anu aya dina citakan. Pikeun nambahkeun sababaraha kelas, misahkeun aranjeunna kalayan spasi: Anjeun oge bisa lulus fungsi nu kudu balik a string tunggal ngandung ngaran kelas tambahan. |
wates | string | unsur | 'scrollParent' | Ngabahekeun wates konstrain tina popover nu. Narima nilai 'viewport' , 'window' , 'scrollParent' , atawa rujukan HTMLElement (JavaScript wungkul). Kanggo inpo nu leuwih lengkep tingal Popper urang preventOverflow docs . |
ngabersihan | boolean | leres | Aktipkeun atanapi mareuman sanitasi. Upami diaktipkeun 'template' , 'content' sareng 'title' pilihan bakal disanitasi. Tingali bagian sanitizer dina dokuméntasi JavaScript kami . |
Daptar bodas | objék | Nilai standar | Obyék anu ngandung atribut sareng tag anu diidinan |
ngabersihanFn | null | fungsi | null | Di dieu anjeun tiasa nyayogikeun fungsi sanitasi anjeun nyalira. Ieu tiasa mangpaat upami anjeun resep ngagunakeun perpustakaan khusus pikeun ngalaksanakeun sanitasi. |
popperConfig | null | objék | null | Pikeun ngarobah konfigurasi Popper standar Bootstrap, tingali konfigurasi Popper |
Atribut data pikeun popovers individu
Pilihan pikeun popovers individu bisa Alternatipna dieusian ngaliwatan pamakéan atribut data, sakumaha dipedar di luhur.
Métode
Métode Asynchronous sareng transisi
Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .
Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .
$().popover(options)
Initializes popovers pikeun kumpulan unsur.
.popover('show')
Nembongkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus ditémbongkeun (ie saméméh shown.bs.popover
acara lumangsung). Ieu dianggap "manual" triggering of popover nu. Popovers anu judulna sareng eusina duanana panjangna nol teu pernah ditampilkeun.
$('#element').popover('show')
.popover('hide')
Nyumputkeun popover unsur. Mulih ka panelepon saméméh popover sabenerna geus disumputkeun (ie saméméh hidden.bs.popover
acara lumangsung). Ieu dianggap "manual" triggering of popover nu.
$('#element').popover('hide')
.popover('toggle')
Toggles popover unsur urang. Mulih ka nu nelepon saméméh popover sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.popover
atawa hidden.bs.popover
kajadian lumangsung). Ieu dianggap "manual" triggering of popover nu.
$('#element').popover('toggle')
.popover('dispose')
Nyumputkeun sareng ngancurkeun popover unsur. Popovers nu make delegasi (anu dijieun maké pilihanselector
) teu bisa individual ancur dina elemen pemicu turunan.
$('#element').popover('dispose')
.popover('enable')
Méré popover hiji unsur kamampuhan pikeun ditingalikeun. Popovers diaktipkeun sacara standar.
$('#element').popover('enable')
.popover('disable')
Ngahapus kamampuan popover unsur pikeun ditingalikeun. Popover ngan bakal tiasa ditingalikeun upami diaktipkeun deui.
$('#element').popover('disable')
.popover('toggleEnabled')
Toggles kamampuhan pikeun popover unsur pikeun ditémbongkeun atawa disumputkeun.
$('#element').popover('toggleEnabled')
.popover('update')
Ngamutahirkeun posisi popover unsur.
$('#element').popover('update')
Kajadian
Jenis Acara | Katerangan |
---|---|
show.bs.popover | Kajadian ieu langsung hurung nalika show metode conto disebut. |
ditémbongkeun.bs.popover | Kajadian ieu dipecat nalika popover parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé). |
hide.bs.popover | Kajadian ieu langsung dipecat nalika hide metode conto parantos disebut. |
disumputkeun.bs.popover | Acara ieu dipecat nalika popover parantos disumputkeun tina pangguna (bari ngantosan transisi CSS réngsé). |
diselapkeun.bs.popover | Kajadian ieu dipecat sanggeus show.bs.popover kajadian nalika template popover geus ditambahkeun kana DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})