Veebirakenduste loomise alused

Õpilase info

Kasutatud jQuery funktsioonid

Minu lehel on kasutatud jQuery mitmete elementide käitumise muutmiseks:

• Pealkiri <h1> – Kui hiirega liigun pealkirja kohale, muutub selle värv deeppink, ja kui liigun ära, muutub värv hotpink. See on tehtud jQuery funktsioonidega mouseover() ja mouseleave().
• Menüü <nav> – Kui liigun hiirega ära menüüst, muutub selle teksti värv punaseks. Kasutatud on jQuery mouseleave() funktsiooni.
• Kõik rotipildid (GIF) – Need on tehtud lohistatavateks (draggable) jQuery UI abil. See tähendab, et saan neid hiirega liigutada ekraanil suvalisse kohta. Selleks on kasutatud draggable().
• Menüü <nav> – Lisaks rottidele saab ka menüüd lohistada. See on samuti tehtud draggable() abil.
• Koordinaatide jälgimine – Kui liigutan esimest rotti (ID-ga pilt), kuvatakse selle asukoha koordinaadid ekraanil kastis (ID-ga koord). See on tehtud bind("drag", ...) abil.
• Tekstiploki liigutamine nuppudega – Tekstiplokki (ID-ga tekst) saab liigutada paremale ja vasakule, vajutades nuppe. Selleks on kasutatud jQuery animate() funktsiooni.
• Piltide peitmine ja näitamine – Rottide grupi (ID-ga rats) saab peita ja uuesti näidata, vajutades väikseid pilte "hiirelõks" (peitmiseks) ja "juust" (näitamiseks). Selleks on kasutatud hide(5000) ja show(5000), mis teevad animatsiooni 5 sekundi jooksul.

Kõik need efektid on teostatud jQuery ja jQuery UI abil, mis annavad võimaluse muuta lehe elemente interaktiivseks ja liigutatavaks.