Source

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.js 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.jsye min kɔnɔ Popper.js 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ɛ wajibiyautil.js .
  • Popovers ye opt-in ye baarakɛcogo kunw na, o la aw yɛrɛ ka kan k’u daminɛ .
  • Zero-janya titleni contentnafaw 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 .disabledwalima disabledelements 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-nowrapbɛ 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ɔ.

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-togglefɛnɲɛnɛma fɛ:

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

Misali: Baara kɛ ni containersugandili 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 containerwalasa 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="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>

Dismiss kan nata digi

Baara kɛ ni focustrigger 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 tabindexattribut dɔ don a kɔnɔ.

Popover min bɛ se ka bɔ kɛnɛ kan 
<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-eventson 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)

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

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: container: 'body'. O sugandili in nafa ka bon kɛrɛnkɛrɛnnenya la bawo a b’a To i bɛ se ka popover (popover) Blà sɛbɛn in bolicogo la triggering element (daminɛ-yɔrɔ) kɛrɛfɛ - o bɛna popover bali ka pan ka Bɔ triggering (daminɛ-yɔrɔ) la finɛtiri bonya caman cili waati la.
kɔnɔnafɛn juru | element | baarakunda '' '' .

Kɔnɔkow nafa dafalen ni data-contentfɛnsɛbɛn tɛ yen.

Ni baara dɔ dira, a bɛ Weele n'a ka this'reference set ye popover bɛ nɔrɔ min na.
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:delay: { "show": 500, "hide": 100 }
html ye boolean ye nkalon HTML don popover kɔnɔ. Ni nkalon don, jQuery ka textfɛɛ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 autoa ɲɛfɔra, a bɛna popover ɲɛsin kokura ni fanga ye.

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 thiskɔnɔkow bɛ sigi popover misali la.
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 titlebɛna pikiri kɛ .popover-header.

Popover's contentbɛna pikiri kɛ .popover-body.

.arrowbɛna kɛ popover ka bɛlɛkisɛ ye.

Kɛnɛma-datugulan yɔrɔ ka kan ka kɛ ni .popoverkalasi ye.
titiri juru | element | baarakunda '' '' .

Title nafa dafalen ni titleattribut tɛ yen.

Ni baara dɔ dira, a bɛ Weele n'a ka this'reference set ye popover bɛ nɔrɔ min na.
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. manualtɛ 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.js 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.js ka kɛwale sɛbɛnw lajɛ
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.js ka preventOverflow docs 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.popoverin 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.popoverin 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.popoverwalima hidden.bs.popoverko 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 selectorye ) 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 showmisali fɛɛrɛ Weelera.
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 hidemisali 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.popoverni popover template farala DOM kan. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})