Source

Popovers

Belgekirin û nimûneyên ji bo zêdekirina popoverên Bootstrap, mîna yên ku di iOS-ê de têne dîtin, li her hêmanek li ser malpera we.

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka popover bikar tînin:

  • Popover ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper.js . Divê hûn berî bootstrap.js -ê popper.min.js-ê têxinbootstrap.bundle.min.js nav xwe an jî bikar bînin / bootstrap.bundle.jsya ku Popper.js dihewîne da ku popover kar bikin!
  • Popover pêveka tooltip -ê wekî pêvedanê hewce dike.
  • Heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .
  • Popover ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
  • Zero-dirêj titleû contentnirx dê ti carî popoverek nîşan nedin.
  • Diyar container: 'body'bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin.
  • Vekirina popoverên li ser hêmanên veşartî dê nexebite.
  • Pêdivî ye ku popoverên ji bo .disabledan disabledhêmanan li ser hêmanek pêçandî werin derxistin.
  • Dema ku ji lengerên ku li gelek rêzan diqelibin werin avêtin, popover dê di navbera firehiya giştî ya lengeran de bibin navend. white-space: nowrap;Li ser s-ya xwe bikar bînin <a>ku ji vê tevgerê dûr bixin.
  • Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê popover werin veşartin.

Xwendina xwe bidomînin da ku bibînin ka popover çawa bi hin mînakan re dixebitin.

Mînak: Li her derê popovers çalak bike

Yek rê ji bo destpêkirina hemî popoverên li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-togglehilbijêrin:

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

Mînak: Vebijêrk bikar containertînin

Gava ku hûn li ser hêmanek dêûbav hin şêwazên ku mudaxeleyî popoverekê dikin hebin, hûn ê bixwazin ku xwerûyek diyar bikin containerda ku li şûna wê HTML-a popover di hundurê wê hêmanê de xuya bibe.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Mînak

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

Çar rê

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoverên li ser klîkek paşîn a bikarhêner a hêmanek cûda ji hêmana veguheztinê dûr bixe.

Nîşanek taybetî ji bo rakirina-li-pêş-klîk hewce ye

Ji bo behremendiya xaça gerok û çar-platformê ya rast, divê hûn etîketê bikar bînin <a>, ne<button> tag, û divê hûn jî tabindextaybetmendiyek bi nav bikin.

Dismissible popover 
<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'
})

hêmanên astengdar

Hêmanên bi disabledtaybetmendiyê ne înteraktîf in, yanî bikarhêner nikanin li wan bizivirin an bikirtînin da ku popoverek (an şîretek amûrek) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku popoverê ji pêçekê vekin <div>an <span>û pointer-eventsli ser hêmana neçalak bişopînin.

Ji bo pêlên popover ên neçalak, hûn dikarin her weha tercîh data-trigger="hover"bikin da ku popover ji bikarhênerên we re wekî bertekek dîtbarî ya tavilê xuya bibe ji ber ku ew ne li bendê ne ku li ser hêmanek neçalak bikirtînin .

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

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

$('#example').popover(options)

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Nav Awa Destçûnî Terîf
jayandarî boolean rast Veguheztinek fade ya CSS-ê li popoverê bicîh bikin
têrr string | element | şaş şaş

Popoverê li hêmanek taybetî vedike. Mînak container: 'body':. Ev vebijark bi taybetî bikêr e ku ew dihêle hûn popoverê di herikîna belgeyê de li nêzîkê hêmana destkêşanê bi cih bikin - ku dê rê li ber ku popover di dema mezinbûna pencereyê de ji hêmana vekêşanê dûr nekeve.
dilşad string | element | karî ''

data-contentHeke taybetmendî tune be nirxa naverokê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku popover pê ve girêdayî ye were gazî kirin.
derengxistin hejmar | tişt 0

Dereng xuyangkirin û veşartina popover (ms) - ji bo celebê destkêşana destan nayê sepandin

Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin

Struktura objektê ev e:delay: { "show": 500, "hide": 100 }
html boolean şaş HTML-ê têxe nav popover. Ger xelet be, textdê rêbaza jQuery were bikar anîn da ku naverokê têxe nav DOM-ê. Heke hûn ji êrîşên XSS-ê ditirsin, nivîsê bikar bînin.
danîn string | karî 'rast'

Meriv çawa popoverê bi cih dike - oto | top | binê | çep | rast.
Dema autoku were diyar kirin, ew ê bi dînamîk veguhezîne popover.

Dema ku fonksiyonek ji bo destnîşankirina cîhê tê bikar anîn, ew bi girêka DOM-a popover wekî argumana wê ya yekem û hêmana vekêşana girê DOM-ê wekî duyemîn tê gotin. Çarçove thisli ser mînaka popoverê tête danîn.
hilbijêr string | şaş şaş Ger hilbijêrek were peyda kirin, dê tiştên popover ji armancên diyarkirî re werin veguheztin. Di pratîkê de, ev tê bikar anîn da ku naveroka HTML-ê ya dînamîkî bikar bîne da ku popovers lê zêde bibin. Vê û mînakek agahdar bibînin .
şablon ben '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Bingeha HTML-ê ku dema afirandina popover bikar bînin bikar bînin.

The popover's titledê bê derzîkirin .popover-header.

The popover's contentdê bê derzîkirin .popover-body.

.arrowdê bibe tîra popoverê.

Pêdivî ye ku hêmana pêçanê ya herî derveyî .popoverçîna xwe hebe.
nav string | element | karî ''

titleGer taybetmendî tune be nirxa sernavê ya xwerû.

Ger fonksiyonek were dayîn, ew ê bi thiskoma referansa xwe re ji hêmana ku popover pê ve girêdayî ye were gazî kirin.
kişok ben 'bitikîne' Popover çawa tê derxistin - bikirtînin | hover | fokus | destî. Hûn dikarin gelek teşqeleyan derbas bikin; wan bi cihekî veqetînin. ``destanî`` nikare bi ti kêşek din re were hev kirin.
offset hejmar | ben 0 Tevlihevkirina popoverê li gorî armanca xwe. Ji bo bêtir agahdarî serî li belgeyên offset yên Popper.js bidin .
fallbackPlacement string | rêzî 'flip' Destûrê bide ku diyar bike ka Popper dê kîjan pozîsyonê di paşvekişînê de bikar bîne. Ji bo bêtir agahdarî serî li belgeyên tevgerê yên Popper.js bidin
tixûb string | pêve 'scrollParent' Sînorê astengiya serhêl a popover. Nirxên 'viewport', 'window', 'scrollParent', an referansek HTMLElement (tenê JavaScript) qebûl dike. Ji bo bêtir agahdarî serî li belgeyên preventOverflow ya Popper.js bidin .

Taybetmendiyên daneyê ji bo popoverên kesane

Vebijarkên ji bo popoverên takekesî dikare wekî ku li jor hatî ravekirin bi karanîna taybetmendiyên daneyê ve were destnîşankirin.

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê bibînin.

$().popover(options)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Popovera hêmanek eşkere dike. Berî ku popover bi rastî were xuyang kirin (ango berî ku shown.bs.popoverbûyer çêbibe) vedigere bangewazî. Ev wekî "bi destan" vekêşana popover tê hesibandin. Popoverên ku hem sernav û hem jî naveroka wan sifir-dirêj in qet nayên xuyang kirin.

$('#element').popover('show')

.popover('hide')

Hêmanek popover vedişêre. Berî ku popover bi rastî veşêre (ango berî ku hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

$('#element').popover('hide')

.popover('toggle')

Pîvana hêmanekê vedike. Berî ku popover bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.popoveran hidden.bs.popoverbûyer çêbibe) vedigere bangkerê. Ev wekî "bi destan" vekêşana popover tê hesibandin.

$('#element').popover('toggle')

.popover('dispose')

Hêmanek popover vedişêre û hilweşîne. Popoverên ku delegasyonê bikar tînin (yên ku bi karanîna vebijarkê selectortêne afirandin ) nekarin bi rengekî ferdî li ser hêmanên nifûsê werin hilweşandin.

$('#element').popover('dispose')

.popover('enable')

Kapasîteya nîşankirinê dide popovera hêmanan. Popover ji hêla xwerû ve têne çalak kirin.

$('#element').popover('enable')

.popover('disable')

Kapasîteya ku popovera hêmanek were xuyang kirin jê dike. Popover tenê heke ji nû ve were çalak kirin dê bikaribe were xuyang kirin.

$('#element').popover('disable')

.popover('toggleEnabled')

Desthilatdariya popovera hêmanek ku were xuyang kirin an veşartî vedike.

$('#element').popover('toggleEnabled')

.popover('update')

Helwesta popovera hêmanekê nûve dike.

$('#element').popover('update')

Events

Cureyê bûyerê Terîf
nîşan bide.bs.popover showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.popover Dema ku popover ji bikarhêner re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede).
veşartin.bs.popover hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî.bs.popover Dema ku popover ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguherînên CSS temam bibin).
xistin.bs.popover Ev bûyer piştî show.bs.popoverbûyerê dema ku şablonê popover li DOM-ê hate zêdekirin tê şewitandin. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})