Popovers (Popovers) ye
Sɛbɛnw ni misaliw walasa ka Bootstrap popovers fara ɲɔgɔn kan, i n’a fɔ minnu bɛ sɔrɔ iOS kɔnɔ, fɛn o fɛn na i ka siti kan.
Kuma bɛɛ lajɛlen
Fɛn minnu ka kan ka dɔn ni i bɛ baara kɛ ni popover plugin ye:
- Popovers bɛ u jigi da 3nan ka bibliothèque Popper kan jɔyɔrɔko la. Aw ka kan ka popper.min.js don a kɔnɔ ka kɔn bootstrap.js ɲɛ walima ka baara kɛ ni
bootstrap.bundle.min.js
/bootstrap.bundle.js
ye min kɔnɔ Popper bɛ yen walasa popovers ka baara kɛ! - Popovers bɛ tooltip plugin de wajibiya i n’a fɔ dependency.
- N'i bɛ an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiya
util.js
. - Popovers ye opt-in ye baarakɛcogo kunw na, o la aw yɛrɛ ka kan k’u daminɛ .
- Zero-janya
title
nicontent
nafaw tɛna popover jira abada. - A jira
container: 'body'
walasa ka i yɛrɛ tanga ɲɛfɔli gɛlɛyaw ma yɔrɔw la minnu ka gɛlɛn kosɛbɛ (i n’a fɔ an ka donnakow kuluw, butɔni kuluw, a ɲɔgɔnnaw). - Popovers (popovers) daminɛni fɛn dogolenw kan, o tɛna baara kɛ.
- Popovers for
.disabled
walimadisabled
elements ka kan ka daminɛ wrapper element kan. - Ni a bɛ daminɛ ka bɔ jɛgɛw la minnu bɛ siri tigɛli caman na, popovers bɛna kɛ cɛmancɛ la jɛgɛw bɛɛ bonya bɛɛ cɛ. Aw
.text-nowrap
bɛ baara kɛ ni aw ka<a>
s ye walasa ka aw yɛrɛ tanga nin kɛcogo in ma. - Popovers ka kan ka dogo sani u bɛnkanw ka bɔ DOM kɔnɔ.
- Popovers bɛ se ka daminɛ k’a sababu kɛ fɛn dɔ ye min bɛ DOM biɲɛ dɔ kɔnɔ.
prefers-reduced-motion
media ɲininkali de la. aw ye
an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .
Aw bɛ to ka kalan kɛ walasa ka a dɔn popoverw bɛ baara kɛ cogo min na ni misali dɔw ye.
Misali: Popoverw daminɛ yɔrɔ bɛɛ
Popoverw bɛɛ daminɛcogo dɔ ɲɛ dɔ kan o ye k’u sugandi u ka data-toggle
fɛnɲɛnɛma fɛ:
$(function () {
$('[data-toggle="popover"]').popover()
})
Misali: Baara kɛ ni container
sugandili ye
Ni i ye cogoya dɔw Sɔrɔ bangebaga-yɔrɔ dɔ kan minnu bɛ popover dɔ bali, i b’a fɛ ka ladamu dɔ Jira container
walasa popover ka HTML ka Bɔ o element ‘kɔnɔ o nɔ na.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
Misaliya
<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>
Sira naani
Sugandili naani bɛ yen: sanfɛ, kinin fɛ, duguma ani numan fɛ.
<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>
Dismiss kan nata digi
Baara kɛ ni focus
trigger ye walasa ka popovers (popovers) bɔ kɛnɛ kan baarakɛla ka fɛn wɛrɛ digilen na min tɛ toggle element ye.
Markup kɛrɛnkɛrɛnnen wajibiyalen don dismiss-on-next-click kama
Walasa ka cross-browser ni cross-platform kɛcogo ɲuman sɔrɔ, i ka kan ka baara kɛ ni <a>
tag ye, i kana baara kɛ ni <button>
tag ye, wa i ka kan fana ka tabindex
attribut dɔ don a kɔnɔ.
<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'
})
Eleman minnu bɛ se ka baara kɛ
Fɛn minnu bɛ ni fɛn ye disabled
, olu tɛ ɲɔgɔndan ye, o kɔrɔ ye ko baarakɛlaw tɛ Se k’u jɔ walima k’u digi walasa ka popover (walima baarakɛminɛnw) dɔ Daminɛ. O cogo la, i b'a fɛ ka popover daminɛ ka bɔ wrapper la <div>
walima <span>
ka override the pointer-events
on disabled element.
Popover triggers disabled (popover triggers) la, i bɛ se fana k’a fɛ data-trigger="hover"
walasa popover ka jira i n’a fɔ teliya yecogo jaabi i ka baarakɛlaw ye i n’a fɔ u tɛ se ka a jira ko u bɛna fɛn dɔ digi disabled element kan.
<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>
Baarakɛcogo
Popovers baara kɛ JavaScript fɛ:
$('#example').popover(options)
GPU teliya
Popovers bɛ ye tuma dɔw la ka ɲɛ Windows 10 minɛnw kan k’a sababu kɛ GPU teliya ye ani sitɛmu DPI sɛmɛntiyalen ye. O ɲɛnabɔli ye v4 kɔnɔ o ye ka GPU teliya bali i n'a fɔ a mago bɛ cogo min na i ka popovers kan.
Labɛnni min bɛ kɛ ka ɲɛsin furakɛli ma:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
Popoverw kɛli ka baara kɛ klaviyeti ni dɛmɛni fɛɛrɛw baarakɛlaw ye
Walasa ka sira Di klaviyeti baarakɛlaw ma u k’i ka popoverw baara, i ka kan k’u Fàra HTML yɔrɔw dɔrɔn kan minnu bɛ Se klaviyeti-yɔrɔ-ko laada la ani minnu bɛ Kɛ ɲɔgɔn fɛ (i n’a fɔ jὲɲɔgɔnya walima foroko-kɔlɔsili). Hali n’a y’a Sɔrɔ HTML fɛnɲɛnɛmaw (i n’a fɔ <span>
s) bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka Kɛ ‘fɛn ye min bɛ Se ka ‘ tabindex="0"
kɔnɔnafili ani k’u hakili ɲagami klaviyeti baarakɛlaw kan minnu tɛ ‘ɲɔgɔndɛmɛ ye, wa dɛmɛn-fɛɛrɛ fanba tɛ popover kɔnɔkow Laseli sisan nin ko in na . Ka fara o kan, i kana i jigi da dɔrɔn kan hover
i n’a fɔ i ka popovers (popovers) daminɛfɛn, bawo o bɛna a to u tɛ se ka daminɛ klaviyeti baarakɛlaw fɛ.
Hali n’i bɛ se ka HTML nafama, sigilen don popovers kɔnɔ ni html
sugandi ye, an b’a ɲini i fɛ kosɛbɛ i k’i yɛrɛ tanga kunnafoni hakɛ tɛmɛnenw farali kan. Popoverw bɛ baara kɛ cogo min na sisan, o ye ko, n’u jirala dɔrɔn, u kɔnɔkow bɛ siri trigger element la ni aria-describedby
attribut ye. O de kosɔn, popover kɔnɔkow bɛɛ bɛna laseli dɛmɛn fɛɛrɛbɔlaw ma i n’a fɔ jikuru jan kelen min tɛ tigɛ.
Ka fara o kan, hali n’a bɛ se ka kɛ fana ka kunnafoni-falen-falen-minɛnw (i n’a fɔ foroko fɛnw walima j��gɛnsira) don i ka popover kɔnɔ (ni i ye o fɛnw fara fɛnw kan whiteList
walima minnu bɛ se ka kɛ fɛnw ni taamasiyɛnw ye), i k’a dɔn ko sisan popover tɛ klaviyeti sinsincogo ɲɛnabɔ. Ni klaviyeti baarakɛla dɔ ye popover da wuli, sinsin bɛ to triggering element kan, wa i n’a fɔ a ka c’a la popover tɛ tugu trigger kɔ teliya la sɛbɛn in jɔcogo la, garanti si tɛ yen ko ka taa ɲɛfɛ/degunTABbɛna klaviyeti baarakɛla dɔ wuli ka don popover yɛrɛ kɔnɔ. Kuma surun na, n’i ye ɲɔgɔndan-minɛnw fara popover kan dɔrɔn, o bɛ se ka kɛ sababu ye ka nin kɔrɔsili ninnu kɛ fɛn ye min tɛ se ka sɔrɔ/min tɛ se ka baara kɛ ni klaviyeti baarakɛlaw ni dɛmɛ-fɛɛrɛw baarakɛlaw ye, walima a dɔgɔyalenba la, o bɛ kɛ sababu ye ka sinsincogo bɛɛ lajɛlen kɛ min tɛ hakili sɔrɔ. O cogo la, aw bɛ jateminɛ kɛ ka baara kɛ ni modal dialogue ye o nɔ na.
Sugandili minnu bɛ kɛ
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-
, i n’a fɔ a bɛ cogo min na data-animation=""
.
sanitize
,
sanitizeFn
ani
whiteList
sugandiliw tɛ se ka di ni data attributes ye.
Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
---|---|---|---|
animation (ɲɛnamaya kɛcogo ɲuman). | boolean ye | sɛbɛ | CSS fade transition dɔ kɛ ka popover kɛ |
minɛn kɔnɔ | juru | element | nkalon | nkalon | A bɛ popover fara fɛn kɛrɛnkɛrɛnnen dɔ kan. Misali la: |
kɔnɔnafɛn | juru | element | baarakunda | '' '' . | Kɔnɔkow nafa dafalen ni Ni baara dɔ dira, a bɛ Weele n'a ka |
ka mɛ | jate | minɛn | 0 ye | Delay jirali ni a dogo popover (ms) - o tɛ tali kɛ bololabaarakɛlaw ka trigger suguya la Ni nimɔrɔ dɔ dira, delay bɛ kɛ hide/show fila bɛɛ la Fɛnw jɔcogo ye: |
html ye | boolean ye | nkalon | HTML don popover kɔnɔ. Ni nkalon don, jQuery ka text fɛɛrɛ bɛna kɛ ka kɔnɔkow don DOM kɔnɔ. Baara kɛ ni sɛbɛnni ye ni i bɛ hami XSS binkanniw na. |
bilali sen kan | juru | baarakunda | 'jo' | Cogo min na ka popover bila - auto | sanfɛ | duguma | kinin fɛ | jo. Ni baarakɛcogo dɔ bɛ Kɛ ka jɔyɔrɔko Labɛn, a bɛ Weele ni popover DOM node ye a ka argument fɔlɔ ye ani triggering element DOM node k'a Kɛ a filanan ye. A |
sugandilikɛla | juru | nkalon | nkalon | Ni sugandili dɔ dira, popover fɛnw bɛna di laɲini kofɔlenw ma. Tiɲɛ na, o bɛ Kɛ walasa ka HTML kɔnɔkow dinamikilenw Dɛmɛ ka popovers (popovers) Fàra u kan. Aw ye nin lajɛ ani misali min bɛ kunnafoni di . |
jatebɔlan | gaari | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Base HTML ka baara kɛ ni popover dabɔli ye. Popover's Popover's
Kɛnɛma-datugulan yɔrɔ ka kan ka kɛ ni |
titiri | juru | element | baarakunda | '' '' . | Title nafa dafalen ni Ni baara dɔ dira, a bɛ Weele n'a ka |
ka ci | gaari | 'kliki' ye. | Popover bɛ daminɛ cogo min na - i ka | hover | sinsinnan | min bɛ fɛn bolo la. Aw bɛ se ka tɛmɛ fɛn caman fɛ minnu bɛ se ka kɛ sababu ye; u fara ɲɔgɔn kan ni yɔrɔ dɔ ye. manual tɛ se ka fara ɲɔgɔn kan ni fɛn wɛrɛ ye min bɛ se ka kɛ sababu ye. |
offset (fɔcogo ɲuman). | jate | gaari | 0 ye | Offset ka popover ka kɛɲɛ n’a ka laɲini ye. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka offset docs lajɛ . |
fallbackBɔli | juru | array (ɲɛnajɛ). | 'kilape' | A to k’a jira Popper bɛna baara kɛ ni jɔyɔrɔ min ye fallback kan. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka kɛwale sɛbɛnw lajɛ |
ladamuKlass | juru | baarakunda | '' '' . | Aw bɛ kalanw fara popover kan ni a jirala. A kɔlɔsi ko o kalansenw bɛna fara kalansenw kan minnu kofɔlen don jatebɔsen kɔnɔ. Walasa ka kalansen caman fara ɲɔgɔn kan, aw bɛ u faranfasi ni yɔrɔw ye: Aw bɛ se fana ka baarakɛcogo dɔ tɛmɛ min ka kan ka sɛrɛ kelen segin min kɔnɔ kalasi tɔgɔ wɛrɛw bɛ sɔrɔ. |
dankan | juru | fɛn | 'sɛbɛnni Bangebagaw'. | Overflow constraint dancɛ ka popover. A bɛ Sɔn 'viewport' , 'window' , 'scrollParent' , walima HTMLElement ɲɛfɔli dɔ nafaw ma (JavaScript dɔrɔn). Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye Popper ka preventOverflow docs lajɛ . |
ka saniya kɛ | boolean ye | sɛbɛ | Saniyali in daminɛ walima k’a bali. Ni activated 'template' , 'content' ani 'title' sugandiliw bɛna saniya. aw ye saniya yɔrɔ lajɛ an ka JavaScript sɛbɛnw kɔnɔ . |
whiteList ye | minɛn | Nafa min bɛ sɔrɔ a daminɛ na | Fɛn min bɛ ni fɛnw ni taamasiyɛnw ye minnu bɛ Sɔ̀rɔ |
sanitizeFn | null ka | baarakunda | fu | Yan aw bɛ se ka aw yɛrɛ ka sanitize baarakɛcogo di. O bɛ se ka kɛ nafa ye ni aw b’a fɛ ka baara kɛ ni gafemarayɔrɔ kɛrɛnkɛrɛnnen ye walasa ka saniya kɛ. |
popperKonfig ye | null ka | minɛn | fu | Walasa ka Bootstrap ka Popper config default Changer, aw ye Popper ka configuration lajɛ |
Data attributes ka ɲɛsin popover kelen-kelen bɛɛ ma
Sugandili minnu bɛ kɛ popover kelen-kelenw na, olu bɛ se ka ɲɛfɔ cogo wɛrɛ la ni kunnafonidilanw ka fɛnw ye, i n’a fɔ a ɲɛfɔlen don cogo min na sanfɛ.
Fɛɛrɛw
Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli
API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .
aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .
$().popover(options)
A bɛ popovers daminɛ ka ɲɛsin element collection dɔ ma.
.popover('show')
A bɛ element dɔ ka popover jira. A bɛ Segin welebaga ma sani popover ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.popover
in ka Kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ. Popovers minnu tɔgɔ ni u kɔnɔkow bɛɛ ye zeru-janya ye, olu tɛ jira abada.
$('#element').popover('show')
.popover('hide')
A bɛ element dɔ ka popover dogo. A bɛ Segin welebaga ma sani popover ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.popover
in ka Kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ.
$('#element').popover('hide')
.popover('toggle')
A bɛ fɛn dɔ ka popover wuli. A bɛ segin welebaga ma sanni popover ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.popover
walima hidden.bs.popover
ko kɛlen ka kɛ). O bɛ jate “bolola” ye min bɛ popover (popover) daminɛ.
$('#element').popover('toggle')
.popover('dispose')
A bɛ element dɔ ka popover dogo ani k’a tiɲɛ. Popovers minnu bɛ baara Kɛ ni delegation ye (minnu bɛ Dabɔ ni option selector
ye ) tɛ Se ka Tiɲɛ kelen-kelen na descendant trigger elements kan.
$('#element').popover('dispose')
.popover('enable')
A bɛ element dɔ ka popover seko jira ka jira. Popovers bɛ baara kɛ ni default ye.
$('#element').popover('enable')
.popover('disable')
A bɛ seko bɔ ka ɲɛsin element dɔ ka popover jirali ma. Popover bɛna se ka jira dɔrɔn ni a daminɛna kokura.
$('#element').popover('disable')
.popover('toggleEnabled')
A bɛ se ka fɛn dɔ ka popover jira walima ka dogo.
$('#element').popover('toggleEnabled')
.popover('update')
A bɛ element dɔ ka popover jɔyɔrɔ kura.
$('#element').popover('update')
Ko minnu kɛra
Ko kɛlen suguya | Cogojirali |
---|---|
jira.bs.popover ye | O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni show misali fɛɛrɛ Weelela. |
jirala.bs.popover | O ko in bɛ Bɔ ni popover Kɛra yelen ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
dogo.bs.popover ye | O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hide misali fɛɛrɛ Weelera. |
dogolen.bs.faantanw | O ko in bɛ Bɔ ni popover dogolen Banna baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
donna.bs.faantanw | O ko in bɛ Bɔ kɛnɛ kan ko kɛlen kɔfɛ show.bs.popover ni popover template farala DOM kan. |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})