Šajā rakstā tiks parādīts rīka padoms, izmantojot vienkāršu JavaScript.
Kā izveidot vienkāršu JavaScript rīka padomu?
Lai izveidotu rīka padomu, izmantojot JavaScript, izmantojiet ' kursoru ' un ' peles izslēgšana ” notikumi. Izpildiet tālāk sniegtos piemērus, lai labāk izprastu.
1. piemērs: rīka padoms, izmantojot JavaScript
Dotajā piemērā mēs izveidosim rīka padomu tīrā JavaScript valodā un arī veidosim rīka padomu, izmantojot ' stils ” atribūts.
Vispirms izveidojiet tekstu, kurā vēlamies parādīt rīka padomu par notikumu, kas atrodas kursora novietošanā:
< h5 id = 'teksts' > Linux h5 >
Iegūstiet tekstu, kur tiks parādīts rīka padoms, izmantojot ' getElementById() ” metode:
kur lh = dokumentu. getElementById ( 'teksts' ) ;
Tagad zvaniet uz ' addEventListener() ' metodi, nododot ' kursoru ” notikumu un funkciju () kā parametru. Definētajā funkcijā vispirms mēs izveidosim rīka padomu, izveidojot “ div ” elementu, iestatiet tekstu, kas tiks rādīts uz kursora, un iestatiet rīka padoma stilu, izmantojot stils ” atribūts. Visbeidzot pievienojiet rīka padomu, izmantojot ' appendChild() ” metode:
lh. addEventListener ( 'kursi virs' , funkcija ( ) {bija rīka padoms = dokumentu. izveidotElement ( 'div' ) ;
rīka padoms. innerHTML = 'Labākā vietne prasmju apguvei' ;
rīka padoms. stils . redzamība = 'redzams' ;
rīka padoms. stils . pozīciju = 'absolūti' ;
rīka padoms. stils . fona krāsa = 'rgb(107, 101, 101)' ;
rīka padoms. stils . polsterējums = '5px' ;
rīka padoms. stils . apmales rādiuss = '3px' ;
rīka padoms. stils . krāsa = 'balts' ;
rīka padoms. stils . pa kreisi = 'piecdesmit%' ;
rīka padoms. stils . platums = '200 pikseļi' ;
dokumentu. ķermeni . pievienotBērns ( rīka padoms ) ;
} ) ;
Šeit izmantojiet ' peles izslēgšana ” notikums, kas noņems rīka padomu, kamēr kursors tiks novirzīts no teksta:
lh. addEventListener ( 'pele' , funkcija ( ) {
dokumentu. ķermeni . noņemtBērns ( rīka padoms ) ;
} ) ;
Izvade
2. piemērs. Rīka padoms, izmantojot JavaScript ar CSS
Varat arī izveidot rīka padomu JavaScript, izmantojot CSS.
Lai to izdarītu, izveidojiet apgabalu, kurā tiks parādīts rīka padoma teksts, izmantojot tagu , un piešķiriet ID ' #mansRīkupadoms ”:
< span id = 'mans rīka padoms' > span >Iegūstiet atsauces uz tekstu un rīka padomu, izmantojot ' getElementById() ” metode:
kur lh = dokumentu. getElementById ( 'teksts' ) ;bija rīka padoms = dokumentu. getElementById ( 'mans rīka padoms' ) ;
Izsauciet rīka padomu uz ' kursoru ” notikumu, iestatot tekstu funkcijā, izmantojot “ innerHTML ” īpašums:
lh. addEventListener ( 'kursi virs' , funkcija ( ) {rīka padoms. stils . redzamība = 'redzams' ;
rīka padoms. innerHTML = 'Labākā vietne prasmju apguvei' ;
} ) ;
Paslēpt rīka padomu uz ' peles izslēgšana ' notikumu, iestatot ' redzamība ' īpašums uz ' paslēptas ”:
lh. addEventListener ( 'pele ārā' , funkcija ( ) {rīka padoms. stils . redzamība = 'slēpts' ;
} ) ;
Izveidojiet ID ' #mansRīkupadoms ” stila lapā, kas veidos rīkpadoma stilu:
#mansRīkupadoms {redzamība : paslēptas ;
platums : 200 pikseļi ;
Ar - rādītājs : 1 ;
fons - krāsa : rgb ( 107 , 101 , 101 ) ;
tekstu - izlīdzināt : centrs ;
krāsa : balts ;
polsterējums : 5 pikseļi 0 ;
robeža - rādiuss : 3 pikseļi ;
pa kreisi : piecdesmit %;
}
Kā redzat, rīka padoms tekstā ir veiksmīgi ieviests:
Kā izveidot rīka padomu, izmantojot HTML un CSS?
Varat arī izveidot rīka padomu bez JavaScript. HTML failā izveidojiet tekstu ' Linux ”, kur tiks parādīts rīka padoms, turot kursoru virs tā. Izveidojiet elementu , lai iestatītu rīka padoma tekstu virsraksta/teksta tagā:
Linux
< span klasē = 'rīka padoma teksts' >
Platforma prasmju apguvei
span >
h5 >
Stila lapā izveidojiet klasi vai ID, kas tiks piešķirts HTML elementiem. Šeit mēs izveidosim klasi ' rīka padoms ”, kas ir piešķirts virsrakstam:
. rīka padoms {pozīciju : radinieks ;
displejs : rindā - bloķēt ;
}
Definējiet klasi ' rīka padoma teksts ', lai veidotu rīka padoma teksta stilu un piešķirtu tam HTML 'atzīme:
. rīka padoma teksts {redzamība : paslēptas ;
platums : 150 pikseļi ;
fons - krāsa : rgb ( 107 , 101 , 101 ) ;
krāsa : #fff ;
tekstu - izlīdzināt : centrs ;
polsterējums : 5 pikseļi 0 ;
robeža - rādiuss : 3 pikseļi ;
pozīciju : absolūts ;
Ar - rādītājs : 1 ;
apakšā : 125 %;
pa kreisi : piecdesmit %;
starpība - pa kreisi : - 60 pikseļi ;
necaurredzamība : 0 ;
pāreja : necaurredzamība 0.3s ;
}
Iestatīt ' novietojiet kursoru 'efekts ar ' rīka padoms ” klasē, lai parādītu rīka padomu par kursora novietošanas efektu:
. rīka padoms : novietojiet kursoru. rīka padoma teksts {redzamība : redzams ;
necaurredzamība : 1 ;
}
Izvade
Mēs esam apkopojuši visus nepieciešamos norādījumus, kas attiecas uz vienkāršu JavaScript rīka padomu.
Secinājums
Lai izveidotu rīka padomu, izmantojot JavaScript, izmantojiet ' kursoru ' un ' peles izslēgšana ” notikumi, kas parāda rīka padomu, novietojot kursoru uz elementa, un paslēpj to, kad tiek aktivizēts peles noņemšanas notikums. Lai noformētu rīka padomu, izmantojiet ' stils ” atribūts JavaScript. Šajā rakstā mēs demonstrējām labākos iespējamos piemērus, kā izveidot rīka padomu, izmantojot vienkāršu JavaScript, JavaScript ar CSS un rīka padomu bez JavaScript.