Awọn imọran irinṣẹ
Iwe ati awọn apẹẹrẹ fun fifi awọn itọsi irinṣẹ Bootstrap aṣa pẹlu CSS ati JavaScript ni lilo CSS3 fun awọn ohun idanilaraya ati awọn abuda data fun ibi ipamọ akọle agbegbe.
Akopọ
Awọn nkan lati mọ nigba lilo ohun itanna ọpa irinṣẹ:
- Awọn imọran irinṣẹ da lori ile-ikawe ẹgbẹ kẹta Popper fun ipo. O gbọdọ pẹlu popper.min.js ṣaaju bootstrap.js tabi lo
bootstrap.bundle.min.js
/bootstrap.bundle.js
eyiti o ni Popper ni ibere fun awọn imọran irinṣẹ lati ṣiṣẹ! - Ti o ba n kọ JavaScript wa lati orisun, o nilo
util.js
. - Awọn imọran irin-iṣẹ ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
- Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.
- Pato
container: 'body'
lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ). - Awọn italologo irinṣẹ ti nfa lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
- Irinṣẹ fun
.disabled
tabidisabled
eroja gbọdọ wa ni jeki lori a wrapper ano. - Nigbati o ba nfa lati awọn hyperlinks ti o gun awọn laini pupọ, awọn itọnisọna irinṣẹ yoo wa ni aarin. Lo
white-space: nowrap;
lori rẹ<a>
s lati yago fun yi ihuwasi. - Awọn itọnisọna irinṣẹ gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
- Awọn imọran irinṣẹ le ṣe okunfa ọpẹ si nkan kan ninu ojiji DOM kan.
prefers-reduced-motion
ibeere media. Wo
apakan išipopada ti o dinku ti iwe iraye si wa .
Ṣe o ni gbogbo iyẹn? O dara, jẹ ki a wo bi wọn ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.
Apeere: Mu awọn imọran irinṣẹ ṣiṣẹ nibi gbogbo
Ọna kan lati bẹrẹ gbogbo awọn itọnisọna irinṣẹ lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-toggle
abuda wọn:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Awọn apẹẹrẹ
Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:
Ọrọ ibi ipamọ lati ṣe afihan diẹ ninu awọn ọna asopọ laini pẹlu awọn itọnisọna irinṣẹ. Eyi jẹ kikun ni bayi, ko si apaniyan. Akoonu ti a gbe si ibi kan lati farawe wiwa ọrọ gidi . Ati pe gbogbo eyi o kan lati fun ọ ni imọran bi awọn imọran irinṣẹ yoo ṣe rii nigba lilo ni awọn ipo gidi-aye. Nitorinaa ni ireti pe o ti rii bayi bii awọn imọran irinṣẹ lori awọn ọna asopọ le ṣiṣẹ ni iṣe, ni kete ti o ba lo wọn lori aaye tirẹ tabi iṣẹ akanṣe.
Raba lori awọn bọtini ni isalẹ lati wo awọn itọnisọna irinṣẹ mẹrin: oke, ọtun, isalẹ, ati osi.
<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>
Ati pẹlu HTML aṣa ti a ṣafikun:
<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>
Lilo
Ohun itanna ọpa irinṣẹ n ṣe agbejade akoonu ati isamisi lori ibeere, ati nipasẹ awọn aaye aiyipada awọn itọnisọna irinṣẹ lẹhin ipin okunfa wọn.
Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:
$('#example').tooltip(options)
Aponsedanu auto
atiscroll
Ipo Irinṣẹ ngbiyanju lati yipada laifọwọyi nigbati eiyan obi kan ba ni overflow: auto
tabi overflow: scroll
fẹran wa .table-responsive
, ṣugbọn tun tọju ipo ipo atilẹba naa. Lati yanju, ṣeto boundary
aṣayan si ohunkohun miiran yatọ si iye aiyipada, 'scrollParent'
, gẹgẹbi 'window'
:
$('#example').tooltip({ boundary: 'window' })
Siṣamisi
Aami ti a beere fun itọsi irinṣẹ jẹ abuda kan data
ati title
lori ẹya HTML ti o fẹ lati ni itọpa irinṣẹ kan. Aami ti ipilẹṣẹ ti ọpa irinṣẹ jẹ kuku rọrun, botilẹjẹpe o nilo ipo kan (nipasẹ aiyipada, ṣeto si top
nipasẹ ohun itanna).
Ṣiṣe awọn imọran irinṣẹ ṣiṣẹ fun keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ
O yẹ ki o ṣafikun awọn itọsona irinṣẹ nikan si awọn eroja HTML ti o jẹ aifọwọyi-kibọọbu ti aṣa ati ibaraenisọrọ (gẹgẹbi awọn ọna asopọ tabi awọn idari fọọmu). Botilẹjẹpe awọn eroja HTML lainidii (gẹgẹbi awọn <span>
s) le jẹ ki o ni idojukọ nipasẹ fifi ẹya ara ẹrọ kun tabindex="0"
, eyi yoo ṣafikun awọn iduro didanubi ati iruju lori awọn eroja ti kii ṣe ibaraenisepo fun awọn olumulo keyboard, ati ọpọlọpọ awọn imọ-ẹrọ iranlọwọ lọwọlọwọ ko kede ọpa irinṣẹ ni ipo yii. Ni afikun, maṣe gbarale hover
bi ohun ti o nfa ohun elo irinṣẹ rẹ, nitori eyi yoo jẹ ki awọn imọran irinṣẹ rẹ ko ṣee ṣe lati ṣe okunfa fun awọn olumulo keyboard.
<!-- 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>
Awọn eroja alaabo
Awọn eroja pẹlu ẹya disabled
ara ẹrọ kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le dojukọ, rababa, tabi tẹ wọn lati ṣe okunfa ohun elo irinṣẹ (tabi agbejade). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa ohun elo irinṣẹ lati inu iwe-ipamọ <div>
tabi <span>
, ti a ṣe ni aifọwọyi-bọtini ni apere ni lilo tabindex="0"
, ki o si danu pointer-events
lori eroja alaabo naa.
<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>
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-animation=""
.
sanitize
,
sanitizeFn
ati
whiteList
awọn aṣayan ko le ṣe ipese pẹlu awọn abuda data.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
iwara | boolian | ooto | Waye iyipada ipare CSS kan si itọpa irinṣẹ |
eiyan | okun | ano | eke | eke | Fi ohun elo irinṣẹ si eroja kan pato. Apeere |
idaduro | nọmba | nkan | 0 | Idaduro fififihan ati fifipamọ awọn itọpa irinṣẹ (ms) - ko kan si iru okunfa afọwọṣe Ti nọmba kan ba pese, idaduro jẹ lilo si tọju/fihan mejeeji Eto nkan jẹ: |
html | boolian | eke | Gba HTML laaye ninu ọpa irinṣẹ. Ti o ba jẹ ootọ, awọn afi HTML ninu ọpa irinṣẹ Lo ọrọ ti o ba ni aniyan nipa awọn ikọlu XSS. |
ipo | okun | iṣẹ | 'oke' | Bawo ni lati ipo awọn Tooltip - auto | oke | isalẹ | osi | ọtun. Nigbati a ba lo iṣẹ kan lati pinnu ipo, o pe pẹlu ọpa DOM node bi ariyanjiyan akọkọ rẹ ati node DOM ti o nfa bi keji rẹ. A |
yiyan | okun | eke | eke | Ti o ba pese yiyan, awọn ohun elo irinṣẹ yoo j��� aṣoju si awọn ibi-afẹde pàtó. Ni iṣe, eyi ni a lo lati tun lo awọn imọran irinṣẹ si awọn eroja DOM ti a ṣafikun ni agbara ( jQuery.on atilẹyin). Wo eyi ati apẹẹrẹ alaye . |
awoṣe | okun | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
HTML mimọ lati lo nigba ṣiṣẹda ọpa irinṣẹ. Awọn itọsi irinṣẹ
Apo-apa- apo ti ita julọ yẹ ki o ni |
akọle | okun | ano | iṣẹ | '' | Iwọn akọle aiyipada ti Ti a ba fun iṣẹ kan, yoo pe pẹlu |
okunfa | okun | 'fojusi lori' | Bawo ni itọka irinṣẹ ti wa ni jeki - tẹ | rababa | idojukọ | Afowoyi. O le ṣe ọpọlọpọ awọn okunfa; ya wọn pẹlu aaye kan.
|
aiṣedeede | nọmba | okun | iṣẹ | 0 | Aiṣedeede ti itọsi irinṣẹ ni ibatan si ibi-afẹde rẹ. Nigbati a ba lo iṣẹ kan lati pinnu aiṣedeede, a pe pẹlu ohun kan ti o ni data aiṣedeede bi ariyanjiyan akọkọ rẹ. Iṣẹ naa gbọdọ da ohun kan pada pẹlu eto kanna. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji. Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper . |
fallbackPlacement | okun | orun | 'isipade' | Gba laaye lati pato iru ipo Popper yoo lo lori ipadabọ. Fun alaye diẹ sii tọka si awọn iwe aṣẹ ihuwasi Popper |
aṣaClass | okun | iṣẹ | '' | Ṣafikun awọn kilasi si itọpa irinṣẹ nigbati o han. Ṣe akiyesi pe awọn kilasi wọnyi yoo ṣafikun ni afikun si eyikeyi awọn kilasi pato ninu awoṣe. Lati ṣafikun awọn kilasi pupọ, ya wọn sọtọ pẹlu awọn alafo O tun le ṣe iṣẹ kan ti o yẹ ki o da okun kan pada ti o ni awọn orukọ kilasi afikun ninu. |
ààlà | okun | eroja | 'yi lọ Obi' | Aponsedanu ihamọ aala ti awọn ọpa. Gba awọn iye ti 'viewport' , 'window' , 'scrollParent' , tabi itọkasi HTMLElement (JavaScript nikan). Fun alaye diẹ sii tọka si awọn docs idinamọOverflow Popper . |
sọ di mimọ | boolian | ooto | Muu ṣiṣẹ tabi mu isọdọmọ kuro. Ti o ba ti mu ṣiṣẹ 'template' ati 'title' awọn aṣayan yoo wa ni sanitized. Wo apakan sanitizer ninu iwe JavaScript wa . |
funfunList | nkan | Iwọn aiyipada | Nkan ti o ni awọn abuda ti a gba laaye ati awọn afi |
sanitizeFn | asan | iṣẹ | asan | Nibi o le pese iṣẹ imototo tirẹ. Eyi le wulo ti o ba fẹ lati lo ile-ikawe iyasọtọ lati ṣe imototo. |
popperConfig | asan | nkan | asan | Lati yi Bootstrap aiyipada atunto Popper pada, wo iṣeto Popper |
Awọn abuda data fun awọn irinṣẹ irinṣẹ kọọkan
Awọn aṣayan fun awọn itọnisọna irinṣẹ kọọkan le jẹ iyasọtọ nipasẹ lilo awọn abuda data, bi a ti salaye loke.
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
$().tooltip(options)
So olutọpa ohun elo kan si ikojọpọ eroja.
.tooltip('show')
Ṣe afihan ohun elo irinṣẹ eroja kan. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han (ie ṣaaju ki shown.bs.tooltip
iṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ. Awọn imọran irinṣẹ pẹlu awọn akọle gigun-odo ko han rara.
$('#element').tooltip('show')
.tooltip('hide')
Ìbòmọlẹ ohun ano ká irinṣẹ. Pada si olupe ṣaaju ki ohun elo irinṣẹ to ti farapamọ (ie ṣaaju ki hidden.bs.tooltip
iṣẹlẹ naa to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.
$('#element').tooltip('hide')
.tooltip('toggle')
Yipada ohun elo ti ohun elo. Pada si olupe ṣaaju ki ohun elo irinṣẹ ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.tooltip
tabi hidden.bs.tooltip
iṣẹlẹ to waye). Eyi ni a kà si “afọwọṣe” ti nfa ohun elo irinṣẹ.
$('#element').tooltip('toggle')
.tooltip('dispose')
Hides ati ki o run ohun ano ká irinṣẹ. Awọn imọran irinṣẹ ti o lo aṣoju (eyiti a ṣẹda nipa lilo aṣayan ) selector
ko le ṣe iparun ni ẹyọkan lori awọn eroja ti nfa ọmọ.
$('#element').tooltip('dispose')
.tooltip('enable')
Yoo fun ohun ano ká ọpa ni agbara lati han. Awọn imọran irinṣẹ ṣiṣẹ nipasẹ aiyipada.
$('#element').tooltip('enable')
.tooltip('disable')
Yọ agbara kuro fun ohun elo irinṣẹ lati han. Ohun elo irinṣẹ yoo ni anfani lati han nikan ti o ba tun ṣiṣẹ.
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
Yipada agbara fun ohun elo irinṣẹ lati han tabi pamọ.
$('#element').tooltip('toggleEnabled')
.tooltip('update')
Ṣe imudojuiwọn ipo ti ohun elo irinṣẹ eroja.
$('#element').tooltip('update')
Awọn iṣẹlẹ
Iṣẹlẹ Iru | Apejuwe |
---|---|
show.bs.tooltip | Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn show apẹẹrẹ ọna ti a npe ni. |
han.bs.tooltip | Iṣẹlẹ yii jẹ ina nigba ti ohun elo irinṣẹ ti han si olumulo (yoo duro fun awọn iyipada CSS lati pari). |
tọju.bs.tooltip | Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hide apẹẹrẹ ti pe. |
farasin.bs.tooltip | Iṣẹlẹ yii jẹ ina nigbati ohun elo irinṣẹ ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari). |
ti a fi sii.bs.tooltip | Iṣẹlẹ yii jẹ ina lẹhin show.bs.tooltip iṣẹlẹ naa nigbati awoṣe ọpa irinṣẹ ti ṣafikun si DOM. |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})