Source

Molaidhean innealan

Sgrìobhainnean agus eisimpleirean airson molaidhean innealan Bootstrap àbhaisteach a chuir ris le CSS agus JavaScript a’ cleachdadh CSS3 airson beòthachaidhean agus feartan dàta airson stòradh tiotal ionadail.

Ro-shealladh

Rudan air am bu chòir fios a bhith agad nuair a chleachdas tu am plugan Tooltip:

  • Tha molaidhean innealan an urra ri leabharlann treas pàrtaidh Popper.js airson a shuidheachadh. Feumaidh tu popper.min.js a thoirt a-steach ro bootstrap.js no cleachdadh bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper.js gus an obraich molaidhean innealan!
  • Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .
  • Tha molaidhean innealan roghnach a-steach airson adhbharan dèanadais, mar sin feumaidh tu iad fhèin a thòiseachadh .
  • Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.
  • Sònraich container: 'body'gus duilgheadasan tairgse a sheachnadh ann am pàirtean nas iom-fhillte (mar ar buidhnean cuir a-steach, buidhnean putan, msaa).
  • Chan obraich molaidhean innealan brosnachaidh air eileamaidean falaichte.
  • Feumaidh molaidhean airson .disabledno disabledeileamaidean a bhith air am piobrachadh air eileamaid còmhdaich.
  • Nuair a thèid a bhrosnachadh bho hyperlinks a tha a’ dol thairis air grunn loidhnichean, bidh molaidhean innealan stèidhichte. Cleachd white-space: nowrap;air do chuid <a>gus an giùlan seo a sheachnadh.
  • Feumaidh molaidhean innealan a bhith falaichte mus tèid na h-eileamaidean co-fhreagarrach aca a thoirt air falbh bhon DOM.

Fhuair sin uile? Sgoinneil, chì sinn mar a tha iad ag obair le eisimpleirean.

Eisimpleir: Dèan comas air molaidhean innealan anns a h-uile àite

Is e aon dòigh air a h-uile comhairle inneal air duilleag a thòiseachadh a bhith gan taghadh a rèir am data-togglefeart:

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

Eisimpleirean

Gabh thairis air na ceanglaichean gu h-ìosal gus molaidhean innealan fhaicinn:

Pants teann an ath ìre keffiyeh is dòcha nach cuala tu iomradh orra. Bothan dhealbhan feusag amh denim letterpress baga teachdaire vegan stumptown. Tha seaman vinyl terry richardson aig seitan tuathanas-gu-bòrd, aodach seasmhach quinoa quinoa 8-bit Ameireaganach aig mcsweeney. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, ceithir loko mcsweeney's cleanse vegan chambray. Neach-ciùird fìor ìoranta ge bith dè an iuchair, sealladair farm-to-table banky Austin twitter a’ làimhseachadh freegan cred raw denim cofaidh viral aon-tùs.

Gabh thairis air na putanan gu h-ìosal gus na ceithir stiùiridhean innealan fhaicinn: mullach, deas, bonn, agus clì.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Agus le HTML àbhaisteach air a chur ris:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Cleachdadh

Bidh am plugan Tooltip a’ gineadh susbaint agus comharrachadh a rèir iarrtas, agus gu bunaiteach a’ cur molaidhean innealan às deidh an eileamaid brosnachaidh aca.

Cuir a-steach an inneal tro JavaScript:

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

Marcaich

Chan eil anns a’ chomharradh a tha a dhìth airson inneal-toisich ach datafeart agus titleair an eileamaid HTML tha thu airson tip inneal a bhith agad. Tha an comharrachadh gineadh de inneal gu math sìmplidh, ged a tha feum air suidheachadh (gu gnàthach, air a shuidheachadh topleis a’ plugan).

A’ toirt air molaidhean innealan obrachadh dha luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachail

Cha bu chòir dhut ach molaidhean innealan a chur ri eileamaidean HTML a tha gu traidiseanta ag amas air meur-chlàr agus eadar-ghnìomhach (leithid ceanglaichean no smachdan foirm). Ged a dh’ fhaodar fòcas a chuir air eileamaidean HTML neo-riaghailteach (leithid <span>s) le bhith a’ cur a’ bhuadh ris tabindex="0", cuiridh seo stadan taba a dh’ fhaodadh a bhith dòrainneach agus troimh-chèile air eileamaidean neo-eadar-ghnìomhach airson luchd-cleachdaidh meur-chlàr. A bharrachd air an sin, chan eil a’ mhòr-chuid de theicneòlasan cuideachaidh an-dràsta ag ainmeachadh a’ chomhairle san t-suidheachadh seo.

A bharrachd air an sin, na bi an eisimeil a-mhàin hovermar inneal brosnachaidh do chomhairle, oir nì seo na molaidhean innealan agad do-dhèanta do luchd-cleachdaidh meur-chlàr.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Eileamaidean ciorramach

Chan eil eileamaidean leis a’ disabledfheart eadar-ghnìomhach, a’ ciallachadh nach urrainn do luchd-cleachdaidh fòcas a chuir orra, gluasad thairis no briogadh orra gus inneal-inneal (no popover) a bhrosnachadh. Mar dhòigh-obrach, bidh thu airson an inneal a chuir air bhog bho phasgan <div>no <span>, air a dheagh dhèanamh le fòcas meur-chlàr le bhith a’ cleachdadh tabindex="0", agus faighinn thairis pointer-eventsair an eileamaid air ciorramach.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-animation="".

Ainm Seòrsa Deònach Tuairisgeul
beothachadh boolean fìor Cuir a-steach eadar-ghluasad sgàineadh CSS chun a’ phìos inneal
soitheach sreang | eileamaid | breugach breugach

A’ ceangal an t-inneal ri eileamaid shònraichte. Eisimpleir: container: 'body'. Tha an roghainn seo gu sònraichte feumail leis gu bheil e a’ toirt cothrom dhut am bàrr inneil a shuidheachadh ann an sruth na sgrìobhainn faisg air an eileamaid brosnachaidh - a chuireas casg air a’ bhileag inneal bho bhith a’ seòladh air falbh bhon eileamaid brosnachaidh rè ath-mheudachadh uinneig.
dàil àireamh | nì 0

Dàil a’ sealltainn agus a’ falach an inneal (ms) - chan eil sin a’ buntainn ri seòrsa brosnachaidh làimhe

Ma thèid àireamh a thoirt seachad, thèid dàil a chuir air an dà sheiche / taisbeanadh

Tha structar an nì:delay: { "show": 500, "hide": 100 }
html boolean breugach

Ceadaich HTML anns a' ghoireas.

Ma tha e fìor, thèid tagaichean HTML anns na h-innealan-taice titlea thoirt seachad anns a’ phutan inneal. Ma tha e ceàrr, textthèid modh jQuery a chleachdadh gus susbaint a chuir a-steach don DOM.

Cleachd teacsa ma tha dragh ort mu ionnsaighean XSS.
suidheachadh sreang | gnìomh 'mullach'

Mar a shuidhicheas tu an t-inneal - auto | mullach | bun | clì | deas.
Nuair a thèid autoa shònrachadh, bidh e ag ath-stiùireadh an t-inneal inneal gu dinamach.

Nuair a thèid gnìomh a chleachdadh gus an suidheachadh a dhearbhadh, canar ris an inneal inneal DOM mar a’ chiad argamaid aige agus an eileamaid brosnachaidh nód DOM mar an dàrna fear. Tha an co- thistheacsa air a shuidheachadh don t-eisimpleir tooltip.
roghnaiche sreang | breugach breugach Ma thèid neach-taghaidh a thoirt seachad, thèid nithean tip inneal a thiomnadh gu na targaidean ainmichte. Ann an cleachdadh, tha seo air a chleachdadh gus leigeil le susbaint HTML fiùghantach popovers a chuir ris. Faic seo agus eisimpleir fiosrachail .
teamplaid sreang '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

Bunait HTML ri chleachdadh nuair a chruthaicheas tu an t-inneal.

Thèid na molaidhean innealan titlea thoirt a-steach don fhaidhle .tooltip-inner.

.arrowbidh e na shaighead na h-inneal.

Bu chòir gum biodh an .tooltipclas agus role="tooltip".
tiotal sreang | eileamaid | gnìomh ''

Luach an tiotail bunaiteach mura h title-eil am feart an làthair.

Ma thèid gnìomh a thoirt seachad, thèid a ghairm leis an t- thisseata iomraidh aige air an eileamaid ris a bheil am bàrr-inneal ceangailte.
spreidh sreang 'fòcas hover'

Mar a tha tooltip air a phiobrachadh - cliog | seachain | fòcas | làimhe. Faodaidh tu a dhol seachad air ioma-tharraing; dealachadh riu le àite.

'manual'a’ nochdadh gun tèid an t-inneal a chuir air adhart gu prògramach tro .tooltip('show'), .tooltip('hide')agus .tooltip('toggle')dòighean; chan urrainnear an luach seo a chur còmhla ri inneal brosnachaidh sam bith eile.

'hover'leis fhèin thig molaidhean innealan nach gabh a chuir a-steach tron ​​​​mheur-chlàr, agus cha bu chòir an cleachdadh ach ma tha dòighean eile ann airson an aon fhiosrachadh a thoirt do luchd-cleachdaidh meur-chlàr.
dheth àireamh | sreang 0 Cuir dheth a’ ghoireas inneal an coimeas ris an targaid aige. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper.js .
Suidheachadh tuiteam air ais sreang | eagar 'flip' Leig le sònrachadh dè an suidheachadh a chleachdas Popper nuair a thig e air ais. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean giùlain aig Popper.js
crìoch sreang | eileamaid 'scrollParent' Crìochan cuibhreachaidh thar-shruth den phìos inneal. A’ gabhail ri luachan 'viewport', 'window', , 'scrollParent', no iomradh HTMLElement (JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean preventOverflow aig Popper.js .

Feartan dàta airson molaidhean innealan fa leth

Faodar roghainnean airson molaidhean innealan fa leth a shònrachadh tro bhith a’ cleachdadh buadhan dàta, mar a chaidh a mhìneachadh gu h-àrd.

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh.

$().tooltip(options)

A’ ceangal inneal-làimhseachaidh tip innealan ri cruinneachadh eileamaidean.

.tooltip('show')

A 'nochdadh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn (ie mus tachair an shown.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal. Chan eil molaidhean innealan le tiotalan fad neoni air an taisbeanadh gu bràth.

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

.tooltip('hide')

A 'falach comhairle inneal eileamaid. Tilleadh chun neach-fios mus deach an inneal fhalach (ie mus tachair an hidden.bs.tooltiptachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.

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

.tooltip('toggle')

Toglaidh comhairle inneal eileamaid. Tillidh e chun neach-fios mus deach an inneal a shealltainn no fhalach (ie mus tachair an tachartas). Thathas den bheachd gu bheil seo na bhrosnachadh “làmh-làimhe” den t-inneal.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('dispose')

A 'falach agus a' sgrios inneal inneal eileamaid. Chan urrainnear molaidhean innealan a chleachdas tiomnadh (a thèid a chruthachadh leis an selectorroghainn ) a sgrios leotha fhèin air eileamaidean brosnachaidh sliochd.

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

.tooltip('enable')

A’ toirt comas do chomhairle inneal eileamaid a bhith air a shealltainn. Tha molaidhean innealan air an comasachadh gu bunaiteach.

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

.tooltip('disable')

A’ toirt air falbh comas inneal-inneal eileamaid a shealltainn. Cha bhith e comasach an t-inneal-toisich a shealltainn ach ma tha e air ath-chomasachadh.

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

.tooltip('toggleEnabled')

Togaidh seo comas inneal eileamaid a shealltainn no fhalach.

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

.tooltip('update')

Ag ùrachadh suidheachadh comhairle inneal eileamaid.

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

Tachartasan

Seòrsa Tachartas Tuairisgeul
taisbean.bs.toolt Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a shealltainn.bs.tooltip Thèid an tachartas seo a chuir às nuair a bhios an inneal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.tooltip Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hidedòigh eisimpleir a ghairm.
falaichte.bs.tooltip Thèid an tachartas seo a losgadh nuair a tha an inneal deiseil air a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
cuir a-steach.bs.tooltip Thèid an tachartas seo a losgadh às deidh an show.bs.tooltiptachartais nuair a chaidh an teamplaid tooltip a chuir ris an DOM. 
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})