Bafutsana
Litokomane le mehlala ea ho kenyelletsa li-popovers tsa Bootstrap, joalo ka tse fumanehang ho iOS, nthong efe kapa efe sebakeng sa hau sa marang-rang.
Kakaretso
Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea popover:
- Popovers e itšetlehile ka laeborari ea motho oa boraro ea Popper bakeng sa maemo. U tlameha ho kenyelletsa popper.min.js pele ho bootstrap.js kapa sebelisa
bootstrap.bundle.min.js
/bootstrap.bundle.js
e nang le Popper e le hore popovers e sebetse! - Li-Popovers li hloka plugin ea tooltip e le ho itšetleha.
- Haeba u theha JavaScript ea rona ho tsoa mohloling, e hloka
util.js
. - Li-Popovers li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
- Bolelele ba zero
title
lecontent
litekanyetso li ke ke tsa bontša popover. - Hlakisa
container: 'body'
ho qoba ho fana ka mathata ka likarolo tse rarahaneng (joalo ka lihlopha tsa rona tsa ho kenya, lihlopha tsa likonopo, joalo-joalo). - Ho kenya li-popover linthong tse patiloeng ho ke ke ha sebetsa.
- Li-Popovers tsa
.disabled
kapadisabled
li-elementi li tlameha ho hlahisoa holim'a karolo ea wrapper. - Ha li ts'oaroa ho tsoa ho li-ankora tse pota-potileng mela e mengata, li-popover li tla behoa bohareng ba bophara ba li-ankora. Sebelisa
.text-nowrap
ho hao<a>
ho qoba boitšoaro bona. - Li-Popovers li tlameha ho patoa pele likarolo tsa tsona tse tsamaellanang li tlosoa ho DOM.
- Popovers e ka hlahisoa ka lebaka la ntho e ka hare ho moriti oa DOM.
prefers-reduced-motion
potso ea media. Sheba karolo e
fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .
Tsoela pele ho bala ho bona hore na popover e sebetsa joang ka mehlala e meng.
Mohlala: Lumella li-popovers hohle
Mokhoa o mong oa ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ho latela data-toggle
semelo sa tsona:
$(function () {
$('[data-toggle="popover"]').popover()
})
Mohlala: Ho sebelisa container
khetho
Ha u e-na le mekhoa e meng ea ntho ea motsoali e sitisang popover, u tla batla ho hlalosa tloaelo container
e le hore HTML ea popover e hlahe ka har'a ntho eo ho e-na le hoo.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Mohlala
<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>
Litsela tse 'ne
Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.
<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>
Tlosa ho tobetsa e latelang
Sebelisa focus
seqhutsu ho leleka li-popovers ha mosebelisi a tobetsa ntho e latelang e fapaneng le ea toggle element.
Ho hlokahala letšoao le ikhethileng bakeng sa ho penya-ha-e latelang
Bakeng sa boits'oaro bo nepahetseng ba sebatli le sethala, o tlameha ho sebelisa tag <a>
, eseng<button>
tag, hape o tlameha ho kenyelletsa tabindex
tšobotsi.
<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'
})
Lintho tse holofetseng
Lintho tse nang le disabled
tšobotsi ha li sebelisane, ho bolelang hore basebelisi ba ke ke ba li sutumelletsa kapa ba li tobetse ho etsa hore popover (kapa tooltip). Joalo ka mokhoa oa ho sebetsa, o tla batla ho tsosa popover ho tsoa ho wrapper <div>
kapa <span>
le ho feta pointer-events
ntho e holofetseng.
Bakeng sa li-triggers tsa popover tse nang le bokooa, u kanna ua khetha data-trigger="hover"
hore popover e hlahe e le maikutlo a hanghang ho basebelisi ba hau kaha ba kanna ba se lebelle ho tobetsa ntho e holofetseng.
<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>
Tšebeliso
Lumella li-popover ka JavaScript:
$('#example').popover(options)
Ho potlakisa GPU
Ka linako tse ling li-Popovers li bonahala li le lerootho Windows 10 lisebelisoa ka lebaka la ho potlakisa GPU le sistimi e fetotsoeng ea DPI. Mosebetsi oa sena ho v4 ke ho tima ho potlakisa ha GPU kamoo ho hlokahalang ho popovers ea hau.
Tokiso e sisintsweng:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Ho etsa hore popover e sebetse bakeng sa basebelisi ba keyboard le theknoloji e thusang
Ho lumella basebelisi ba keyboard ho kenya li-popovers tsa hau, u lokela ho li kenya feela ho likarolo tsa HTML tseo ka tloaelo li shebaneng le keyboard le ho sebelisana (joalo ka likhokahano kapa taolo ea foromo). Leha likarolo tsa HTML (tse kang <span>
s) li ka tsepamisoa maikutlo ka ho eketsa tabindex="0"
tšobotsi, sena se tla eketsa li-tab tse ka khopisang le tse ferekanyang linthong tse sa sebetseng bakeng sa basebelisi ba keyboard, 'me mahlale a mangata a thusang hajoale ha a phatlalatse litaba tsa popover maemong ana. . Ho phaella moo, u se ke ua itšetleha feela ka hover
hore ke mohloli oa li-popovers tsa hau, kaha sena se tla etsa hore ho se khonehe ho qalisa basebelisi ba keyboard.
Leha o ka kenya HTML e ruileng, e hlophisitsoeng ka har'a popover ka html
khetho, re khothaletsa ka matla hore u qobe ho eketsa bongata bo bongata ba litaba. Tsela eo popovers e sebetsang ka eona hajoale ke hore, hang ha e se e bonts'itsoe, litaba tsa bona li hokahane le ntho e qalang ka aria-describedby
semelo. Ka lebaka leo, litaba tsa popover kaofela li tla phatlalatsoa ho basebelisi ba theknoloji e thusang e le molatsoana o le mong o molelele o sa sitisoeng.
Ho feta moo, leha ho ka khoneha ho kenyelletsa li-control tse sebetsanang (joalo ka likarolo tsa sebopeho kapa likhokahano) ho popover ea hau (ka ho kenyelletsa lintlha tsena ho whiteList
litšoaneleho le li-tag tse lumelletsoeng), hlokomela hore hajoale popover ha e laole tatellano ea ho tsepamisa mohopolo. Ha mosebelisi oa keyboard a bula popover, ho tsepamisitsoe maikutlo ho ntho e qalang, 'me joalo ka ha popover hangata e sa latele sesosa hanghang sebopehong sa tokomane, ha ho na tiiso ea hore ho ea pele/ho hatella.TABe tla tsamaisa mosebelisi oa keyboard ho popover ka boeona. Ka bokhuts'oane, ho kenya li-control tse sebetsang ho popover ho ka etsa hore litsamaiso tsena li se fumanehe / li se ke tsa sebelisoa bakeng sa basebelisi ba keyboard le basebelisi ba mahlale a thusang, kapa bonyane ho etsa tatellano e sa utloahaleng ea ho tsepamisa maikutlo. Maemong ana, nahana ka ho sebelisa modal dialog ho e-na le hoo.
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-animation=""
.
sanitize
,
sanitizeFn
le
whiteList
likhetho li ke ke tsa fanoa ho sebelisoa litšobotsi tsa data.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
animation | boolean | 'nete | Kenya phetoho ea CSS fade ho popover |
setshelo | khoele | ntho | bohata | bohata | E eketsa popover ho element e itseng. Mohlala |
dikahare | khoele | ntho | tshebetso | '' | Boleng ba litaba bo ka rekoang haeba Haeba ts'ebetso e fanoe, e tla bitsoa ka |
lieha | nomoro | ntho | 0 | Ho lieha ho bonts'a le ho pata popover (ms) - ha e sebetse ho mofuta oa mochini oa ho qala Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli Sebopeho sa ntho ke: |
html | boolean | bohata | Kenya HTML ho popover. Haeba e le leshano, mokhoa oa jQuery text o tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS. |
ho beha | khoele | tshebetso | 'ho lokile' | Mokhoa oa ho beha popover - auto | holimo | tlase | le letšehali | hantle. Ha ts'ebetso e sebelisoa ho fumana sebaka sa ho beoa, e bitsoa le node ea popover DOM e le khang ea eona ea pele le ntho e qalang ea DOM node e le ea bobeli. Boemo |
mokhethi | khoele | bohata | bohata | Haeba ho fanoe ka khetho, lintho tsa popover li tla abeloa ho sepheo se boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li eketsoe ke popover. Bona sena le mohlala o rutang . |
template | khoele | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
HTML ea mantlha eo u ka e sebelisang ha u theha popover. Li-popover li Li-popover li
Karolo e ka ntle ea wrapper e lokela ho ba le |
sehlooho | khoele | ntho | tshebetso | '' | Boleng ba sehlooho sa kamehla haeba Haeba ts'ebetso e fanoe, e tla bitsoa ka |
qhoqhoa | khoele | 'tobetsa' | Popover e qala joang - tlanya | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. manual e ke ke ea kopanngoa le ntho leha e le efe e qalang. |
offset | nomoro | khoele | 0 | Phetoho ea popon e ipapisitse le sepheo sa eona. Ho fumana lintlha tse ling, sheba ho Popper's offset docs . |
fallbackPlacement | khoele | array | 'phetla' | Lumella ho hlakisa hore na Popper e tla sebelisa boemo bofe ha ho khutla. Bakeng sa tlhaiso-leseling e batsi, sheba litokomane tsa Popper tsa boitšoaro |
customClass | khoele | tshebetso | '' | Kenya litlelase ho popover ha e bontšoa. Hlokomela hore litlelase tsena li tla eketsoa ho kenyelletsa litlelase life kapa life tse boletsoeng template. Ho eketsa lihlopha tse ngata, li arole ka libaka: U ka fetisa tšebetso e lokelang ho khutlisa khoele e le 'ngoe e nang le mabitso a sehlopha sa tlatsetso. |
moeli | khoele | element | 'scrollParent' | Moeli oa litšitiso tse ngata tsa popover. E amohela boleng ba 'viewport' , 'window' , 'scrollParent' , kapa HTMLElement reference (JavaScript feela). Ho fumana lintlha tse ling, sheba litokomane tsa Popper tsa preventOverflow . |
sanitize | boolean | 'nete | Lumella kapa u tima tsamaiso ea sanitization. Haeba e kentsoe 'template' , 'content' 'me 'title' likhetho li tla hloekisoa. Sheba karolo ea sanitizer litokomaneng tsa rona tsa JavaScript . |
whiteList | ntho | Boleng ba kamehla | Ntho e nang le litšobotsi le li-tag tse lumelletsoeng |
hloekisaFn | null | tshebetso | lefeela | Mona o ka fana ka ts'ebetso ea hau ea sanitize. Sena se ka ba molemo haeba u khetha ho sebelisa laebrari e inehetseng ho etsa bohloeki. |
popperConfig | null | ntho | lefeela | Ho fetola tlhophiso ea kamehla ea Bootstrap ea Popper, bona tlhophiso ea Popper |
Litšobotsi tsa data bakeng sa li-popovers ka bomong
Likhetho bakeng sa li-popovers ka bomong li ka hlalosoa ka tšebeliso ea litšobotsi tsa data, joalo ka ha ho hlalositsoe ka holimo.
Mekhoa
Mekhoa ea Asynchronous le liphetoho
Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .
Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .
$().popover(options)
E qala popovers bakeng sa pokello ea lintho.
.popover('show')
E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.
$('#element').popover('show')
.popover('hide')
E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.
$('#element').popover('hide')
.popover('toggle')
E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popover
kapa hidden.bs.popover
ketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.
$('#element').popover('toggle')
.popover('dispose')
E pata le ho senya popover ea element. Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector
) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.
$('#element').popover('dispose')
.popover('enable')
E fa element's popover bokhoni ba ho bonts'a. Li-Popovers li lumelloa ka mokhoa oa kamehla.
$('#element').popover('enable')
.popover('disable')
E tlosa bokhoni ba ho hlahisa popover ea element. Popover e tla bonts'oa feela ha e buletsoe hape.
$('#element').popover('disable')
.popover('toggleEnabled')
E fetola bokhoni ba ho hlahisa kapa ho patoa ntho e itseng.
$('#element').popover('toggleEnabled')
.popover('update')
E kaonefatsa boemo ba elemente popover.
$('#element').popover('update')
Liketsahalo
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
bonts'a.bs.popover | Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
bontshitsweng.bs.popover | Ketsahalo ena e lelekoa ha popover e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
pata.bs.popover | Ketsahalo ena e lelekoa hang hang ha hide mokhoa oa mohlala o bitsoa. |
patiloeng.bs.popover | Ketsahalo ena e ts'oaroa ha popover e qetile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
kentse.bs.popover | Ketsahalo ena e lelekoa kamora show.bs.popover ketsahalo ea ha template ea popover e kentsoe ho DOM. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})