Vidokezo vya zana
Hati na mifano ya kuongeza vidokezo maalum vya Bootstrap na CSS na JavaScript kwa kutumia CSS3 kwa uhuishaji na sifa za data kwa hifadhi ya mada ya ndani.
Muhtasari
Mambo ya kujua unapotumia programu-jalizi ya kidokezo:
- Vidokezo vya zana hutegemea Popper ya maktaba ya mtu mwingine kwa nafasi. Lazima ujumuishe popper.min.js kabla ya bootstrap.js au utumie
bootstrap.bundle.min.js
/bootstrap.bundle.js
ambayo ina Popper ili vidokezo vya kufanya kazi! - Ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitaji
util.js
. - Vidokezo vya zana ni kuchagua kuingia kwa sababu za utendakazi, kwa hivyo ni lazima uanzishe wewe mwenyewe .
- Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.
- Bainisha
container: 'body'
ili kuepuka kutoa matatizo katika vipengele changamano zaidi (kama vile vikundi vyetu vya ingizo, vikundi vya vitufe, n.k). - Kuanzisha vidokezo kwenye vipengele vilivyofichwa haitafanya kazi.
- Vidokezo vya zana
.disabled
audisabled
vipengele lazima vianzishwe kwenye kipengele cha kanga. - Inapoanzishwa kutoka kwa viungo vinavyotumia mistari mingi, vidokezo vya zana vitawekwa katikati. Tumia
white-space: nowrap;
kwenye yako<a>
ili kuepuka tabia hii. - Vidokezo vya zana lazima vifichwe kabla ya vipengee vinavyolingana kuondolewa kwenye DOM.
- Vidokezo vya zana vinaweza kuanzishwa shukrani kwa kipengele ndani ya DOM ya kivuli.
prefers-reduced-motion
hoja ya midia. Tazama
sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .
Umepata hayo yote? Kubwa, wacha tuone jinsi wanavyofanya kazi na mifano kadhaa.
Mfano: Washa vidokezo vya zana kila mahali
Njia moja ya kuanzisha vidokezo vyote kwenye ukurasa itakuwa kuvichagua kulingana na data-toggle
sifa zao:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Mifano
Elea juu ya viungo vilivyo hapa chini ili kuona vidokezo vya zana:
Maandishi ya kishika nafasi ili kuonyesha baadhi ya viungo vya ndani vilivyo na vidokezo vya zana. Hii sasa ni kujaza tu, hakuna muuaji. Maudhui yaliyowekwa hapa ili tu kuiga uwepo wa maandishi halisi . Na hayo yote ili tu kukupa wazo la jinsi vidokezo vya zana vinaweza kuonekana vinapotumiwa katika hali halisi ya ulimwengu. Kwa hivyo tunatumai kuwa sasa umeona jinsi vidokezo hivi kwenye viungo vinaweza kufanya kazi kwa vitendo, mara tu unapovitumia kwenye tovuti yako au mradi wako.
Elea juu ya vitufe vilivyo hapa chini ili kuona maelekezo manne ya vidokezo: juu, kulia, chini na kushoto.
<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>
Na HTML maalum imeongezwa:
<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>
Matumizi
Programu-jalizi ya kidokezo huzalisha maudhui na uwekaji alama inapohitajika, na kwa chaguo-msingi vidokezo vya mahali baada ya kipengee cha vianzishaji.
Anzisha kidokezo cha zana kupitia JavaScript:
$('#example').tooltip(options)
Kufurika auto
nascroll
Msimamo wa kidokezo hujaribu kubadilika kiotomatiki wakati kontena kuu ina overflow: auto
au overflow: scroll
kama kama yetu .table-responsive
, lakini bado huhifadhi nafasi ya uwekaji asili. Ili kusuluhisha, weka boundary
chaguo kwa kitu kingine chochote isipokuwa dhamana chaguo-msingi 'scrollParent'
, kama vile 'window'
:
$('#example').tooltip({ boundary: 'window' })
Alama
Alama inayohitajika ya kidokezo ni data
sifa tu na title
kwenye kipengee cha HTML ungependa kuwa na kidokezo. Alama inayozalishwa ya kidokezo ni rahisi, ingawa inahitaji nafasi (kwa chaguo-msingi, iliyowekwa top
na programu-jalizi).
Kufanya vidokezo vya zana kufanya kazi kwa watumiaji wa kibodi na teknolojia saidizi
Unapaswa kuongeza vidokezo vya zana kwenye vipengele vya HTML ambavyo kwa kawaida vinaweza kulenga kibodi na shirikishi (kama vile viungo au vidhibiti vya fomu). Ingawa vipengele vya HTML vya kiholela (kama vile <span>
s) vinaweza kuangaziwa kwa kuongeza tabindex="0"
sifa, hii itaongeza vichupo vinavyoweza kuudhi na kutatanisha kwenye vipengele visivyoingiliana kwa watumiaji wa kibodi, na teknolojia nyingi za usaidizi kwa sasa hazitangazi kidokezo katika hali hii. Zaidi ya hayo, usitegemee pekee hover
kama kichochezi cha kidokezo chako, kwa kuwa hii itafanya vidokezo vyako vishindwe kuanzisha kwa watumiaji wa kibodi.
<!-- 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>
Vipengele vilivyozimwa
Vipengele vilivyo na disabled
sifa haviingiliani, kumaanisha kuwa watumiaji hawawezi kuangazia, kuelea juu au kubofya ili kuanzisha kidokezo cha zana (au popover). Kama suluhu, utataka kuamsha kidokezo kutoka kwa kanga <div>
au <span>
, iliyofanywa iweze kulenga kibodi kwa kutumia tabindex="0"
, na ubatilishe pointer-events
kwenye kipengele kilichozimwa.
<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>
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-
, kama katika data-animation=""
.
sanitize
,
sanitizeFn
na
whiteList
chaguzi haziwezi kutolewa kwa kutumia sifa za data.
Jina | Aina | Chaguomsingi | Maelezo |
---|---|---|---|
uhuishaji | boolean | kweli | Tumia mpito wa kufifisha wa CSS kwenye kidokezo cha zana |
chombo | kamba | kipengele | uongo | uongo | Huweka kidokezo kwa kipengele mahususi. Mfano |
kuchelewa | nambari | kitu | 0 | Kuchelewa kuonyesha na kuficha kidokezo cha zana (ms) - haitumiki kwa aina ya kichochezi cha mwongozo Nambari ikitolewa, ucheleweshaji unatumika kwa Ficha/onyesho zote mbili Muundo wa kitu ni: |
html | boolean | uongo | Ruhusu HTML kwenye kidokezo cha zana. Ikiwa ni kweli, lebo za HTML kwenye kidokezo cha vidhibiti Tumia maandishi ikiwa una wasiwasi kuhusu mashambulizi ya XSS. |
uwekaji | kamba | kazi | 'juu' | Jinsi ya kuweka ncha ya zana - otomatiki | juu | chini | kushoto | haki. Wakati kipengele cha chaguo za kukokotoa kinapotumiwa kubainisha uwekaji, huitwa kifundo cha kifundo cha DOM kama hoja yake ya kwanza na kipengee cha kuanzisha nodi ya DOM kama ya pili. |
kiteuzi | kamba | uongo | uongo | Iwapo kiteuzi kitatolewa, vipengee vya vidokezo vitakabidhiwa kwa walengwa maalum. Kwa mazoezi, hii inatumika pia kutumia vidokezo kwa vipengele vya DOM vilivyoongezwa kwa nguvu ( jQuery.on usaidizi). Tazama hii na mfano wa kuelimisha . |
kiolezo | kamba | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML msingi ya kutumia unapounda kidokezo. Vidokezo vya zana
Kipengele cha kanga cha nje kinapaswa kuwa na |
kichwa | kamba | kipengele | kazi | '' | Thamani chaguo-msingi ya kichwa ikiwa Ikiwa kipengele cha kukokotoa kitatolewa, kitaitwa kikiwa na |
kichochezi | kamba | 'hover focus' | Jinsi kidokezo kinavyoanzishwa - bofya | tembea | kuzingatia | mwongozo. Unaweza kupitisha vichochezi vingi; kuwatenganisha na nafasi.
|
kukabiliana | nambari | kamba | kazi | 0 | Mpangilio wa kidokezo kuhusiana na lengo lake. Wakati kipengele cha kukokotoa kinapotumiwa kubainisha urekebishaji, huitwa na kitu kilicho na data ya kukabiliana kama hoja yake ya kwanza. Chaguo la kukokotoa lazima lirudishe kitu kilicho na muundo sawa. Kipengele cha kuchochea nodi ya DOM hupitishwa kama hoja ya pili. Kwa maelezo zaidi rejelea hati za kukabiliana na Popper . |
fallbackPlacement | kamba | safu | 'pindua' | Ruhusu kubainisha ni nafasi gani Popper itatumia kwenye njia mbadala. Kwa habari zaidi rejelea hati za tabia za Popper |
customClass | kamba | kazi | '' | Ongeza madarasa kwenye kidokezo cha zana kinapoonyeshwa. Kumbuka kuwa madarasa haya yataongezwa pamoja na madarasa yoyote yaliyobainishwa kwenye kiolezo. Ili kuongeza madarasa mengi, yatenganishe na nafasi: Unaweza pia kupitisha chaguo za kukokotoa ambazo zinapaswa kurudisha mfuatano mmoja ulio na majina ya ziada ya darasa. |
mpaka | kamba | kipengele | 'scrollParent' | Kizuizi cha kufurika kikomo cha ncha ya zana. Hukubali thamani za 'viewport' , 'window' , 'scrollParent' , au rejeleo la Kipengele cha HTML (JavaScript pekee). Kwa maelezo zaidi rejelea hati za preventOverflow za Popper . |
safisha | boolean | kweli | Washa au lemaza usafishaji. Ikiwa imeamilishwa 'template' na 'title' chaguzi zitasafishwa. Tazama sehemu ya sanitizer katika hati zetu za JavaScript . |
Orodha nyeupe | kitu | Thamani chaguomsingi | Kitu ambacho kina sifa na lebo zinazoruhusiwa |
safishaFn | null | kazi | null | Hapa unaweza kusambaza kazi yako ya kusafisha. Hii inaweza kuwa muhimu ikiwa unapendelea kutumia maktaba maalum kutekeleza usafi wa mazingira. |
popperConfig | null | kitu | null | Ili kubadilisha usanidi chaguo-msingi wa Bootstrap wa Popper, angalia usanidi wa Popper |
Sifa za data za vidokezo vya mtu binafsi
Chaguzi za vidokezo vya mtu binafsi zinaweza kubainishwa kwa matumizi ya sifa za data, kama ilivyoelezwa hapo juu.
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
$().tooltip(options)
Huambatisha kidhibiti kidokezo kwenye mkusanyiko wa vipengele.
.tooltip('show')
Hufichua kidokezo cha kipengele. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa (yaani kabla ya shown.bs.tooltip
tukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana. Vidokezo vya zana vyenye vichwa vya urefu sifuri havionyeshwi kamwe.
$('#element').tooltip('show')
.tooltip('hide')
Huficha kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kufichwa (yaani kabla ya hidden.bs.tooltip
tukio kutokea). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.
$('#element').tooltip('hide')
.tooltip('toggle')
Hugeuza kidokezo cha kipengee. Hurejesha kwa mpigaji simu kabla ya kidokezo cha zana kuonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.tooltip
au hidden.bs.tooltip
tukio). Hii inachukuliwa kuwa kichocheo cha "mwongozo" cha ncha ya zana.
$('#element').tooltip('toggle')
.tooltip('dispose')
Huficha na kuharibu ncha ya zana ya kipengele. Vidokezo vya zana vinavyotumia ugawaji madaraka (ambavyo vimeundwa kwa kutumia chaguo )selector
haviwezi kuharibiwa kibinafsi kwenye vipengele vya vichochezi vya kizazi.
$('#element').tooltip('dispose')
.tooltip('enable')
Hutoa kidokezo cha zana cha kipengele uwezo wa kuonyeshwa. Vidokezo vya zana vinawezeshwa kwa chaguo-msingi.
$('#element').tooltip('enable')
.tooltip('disable')
Huondoa uwezo wa kidokezo cha kipengee kuonyeshwa. Kidokezo cha zana kitaweza tu kuonyeshwa ikiwa kimewashwa tena.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Hugeuza uwezo wa kidokezo cha kipengee kuonyeshwa au kufichwa.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Husasisha nafasi ya kidokezo cha kipengee.
$('#element').tooltip('update')
Matukio
Aina ya Tukio | Maelezo |
---|---|
onyesha.bs.kidokezo | Tukio hili huwaka mara moja wakati show njia ya mfano inaitwa. |
imeonyeshwa.bs.kidokezo | Tukio hili huwashwa wakati kidokezo cha zana kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike). |
ficha.bs.kidokezo | Tukio hili linafutwa mara moja wakati hide njia ya mfano imeitwa. |
siri.bs.kidokezo | Tukio hili hutupwa wakati kidokezo kimekamilika kufichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike). |
kidokezo.cha.bs | Tukio hili linafutwa baada ya show.bs.tooltip tukio wakati kiolezo cha kidokezo kimeongezwa kwenye DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})