jQuery – Lectia 1 [Nivel: Incepator]

Astăzi vom crea o funcţie simplă cu ajutorul librăriei jQuery. Ne vom folosi de fişierul creat pentru colţuri rotunjite, astfel încât să fie totul mai uşor de înţeles.

Vom folosi o funcţie care să facă să dispară/apară #coltrotunjit şi care să modifice anumite parametri din cadrul CSS.

Pentru a folosi jQuery, va trebui să încărcăm în librăria (o puteţi descărca împreună cu exemplul la sfârşitul tutorialului).




 

Codul CSS va fi acelaşi ca în tutorialul anterior :


#coltrotunjit
{
width:100px; /* latimea va avea 100px */
height:50px; /* inaltimea va avea 50px */
background:#ff0000; /*culoarea va fi rosie*/
padding:5px;
border-radius:5px;
-moz-border-radius:5px; /* pentru versiunile vechi de mozilla */
-webkit-border-radius:5px;/* pentru versiunile vechi de google chrome si safari */
}

#coltrotunjit p
{
text-align:center;
color:#fff;
font-size:14px;
}

 

Am adăugat codul pentru scriptul jQuery în secţiunea , iar acestaeste explicat linie cu linie astfel încât să fie mai uşor de înţeles :




În afară de toggle() se pot folosi şi alte funcţii cum ar fi show(), slideUp(), slideDown(), hide() etc. Mai multe efecte găsiţi aici şi aici.

Codul HTML este foarte simplist. Am scos textul din #coltrotunjit pentru că în momentul în care este apăsat va dispărea tot ce este în interiorul acelui div, adică şi textul. La primul click pe Apasa! div-ul va dispărea, la următorul click va apărea şi tot aşa 🙂


Apasa!

DEMO | DOWNLOAD