Kuidas luua tööriista CSS & jQuery abil

Tooltips on väikesed vihjed, mis ilmuvad, kui kasutaja liigub üle ikooni. Saate selle mugava efekti saavutada HTML div konteineritega, mis kasutavad jQueryt. CSS kujundab tööriista paigutuse ja jQuery täidab kõik funktsioonid, et avada ja kuvada oma lugejate tööriista. Tööriistavõimaluste alustamiseks loote oma veebilehe mis tahes HTML-elemendi jaoks lihtsa tööriista konteineri ja jQuery-koodi.

1.

Paremklõpsake HTML-faili, mida soovite tööriista loomiseks kasutada. Klõpsake "Ava" ja valige oma eelistatud redaktor.

2.

Seadistage tööriista CSS-kood. Järgmine CSS-kood on näide lihtsast tööriista paigutusest hüpikakna jaoks, kuid saate kasutada oma värve, laiuse ja fondi seadeid:

.tooltip {asukoht: absoluutne; z-indeks: 999; vasakule: -9999px; taustavärv: #dedede; polsterdus: 5px; piir: 1px tahke #fff; laius: 250 px; }

3.

Loo tooltip div konteiner. Div element sisaldab teksti, mida soovite kasutajale näidata. Järgnev kood näitab tööriista "Tere, maailm":

Tere, Maailm

4.

Looge jQuery funktsioon, mis täidab töövihiku hüpikakna. Järgmine kood lisab hüpikakende:

$ (dokument) .ready (funktsioon () {$ (see) .removeAttr ("title"). mouseover (funktsioon () {my_tooltip.css ({läbipaistmatus: 0, 8, kuva: "none"}) fadeIn (400) ;}). mouseout (funktsioon () {my_tooltip.fadeOut (400);});

Ülaltoodud funktsioon näitab tööriista, kui kasutaja liigub HTML-elemendi üle, ja peidab tööriista, kui kasutaja hiir liigub elemendist eemale.

5.

Lisage HTML-element, mida soovite tööriista näitamiseks kasutada. See võib olla link, nupp või pildi ikoon. Järgmine kood kasutab linki tööriista jaoks:

Tooltip

 

Jäta Oma Kommentaar