jQuery: Devine mai interesant!


Ieri am avut ocazia unui prim contact cu jQuery. Am putut să vedem că nu este greu să ne folosim de această librărie. Dacă sunteţi nerăbdător ca mine veţi dori probabil să vedeţi ceva mai spectaculos (cel puţin mai interesant). Tocmai de aceea am pregătit o nouă pagină (şi desigur şi o arhivă pentru a o putea descărca şi studia în tihnă). Uitaţi-vă în sursa paginii pentru a vedea cât de simplu se rezolvă totul. Evident am inclus librăria şi în plus în secţiunea head am definit două clase CSS. Dacă data trecută ne-am folosit de $(document).ready(…), acum ne interesează nişte efecte generate la clickul vizitatorului unei pagini. Am pus de fiecare dată <a href="#" … pentru ca clickul să nu ducă nicăieri, dar am completat cu onClick="…" pentru a indica acţiunea cu jQuery.

Acţiunile se fac pe un div pe care jQuery îl identifică pentru că am scris id=anunt. Aceasta îmi permite o serie de operaţiuni precum

<a href="#" onClick="$("#anunt").toggle();">...

Cât de simplu! Am identificat elementul cu $("#anunt") si apoi am aplicat o acţiune: toggle(). Aţi văzut probabil deja în pagina de test: toggle inversează starea elementului, între vizibil şi invizibil. Pagina cu pricina oferă posibilitatea testării în direct şi a altor funcţii: show, hide, slideToggle, slideUp, slideDown, fadeIn, fadeOut, animate. O listă a lor şi cu sintaxa corespunzătoare o găsiţi pe jQuery.com. Aplicaţii practice? Cu nemiluita! De exemplu într-o pagină puteţi avea detalii (un "bloc" – ex: div – sau mai multe), activabile doar prin click: astfel nu ocupă spaţiu în pagină şi apar doar când vizitatorul le cere (fără reîncărcarea paginii… sunt acolo, doar trebuie "trezite").

Ar fi important să spunem că efectele de mai sus admit ca ultim parametru invocarea unei funcţii (primul fiind de regulă viteza, indicabilă ca string sau ca număr). Un exemplu lămuritor:

$("#anunt").hide("slow",function(){
  alert("Am inchis anuntul!");
});

Evident pot fi scrise funcţii mai complexe, după nevoi. A! În pagina de test sunt efecte dar şi nişte funcţii care nu se încadrează la acest gen. Mai întâi toggleClass care permite schimbarea dinamică a clasei unui element HTML. Apoi este combinaţia de la linkul gata. Dacă v-aţi uitat în sursă aţi văzut că este o înlănţuire de mai multe acţiuni.

$("#anunt").html("Gata! Am terminat demonstratia!").show().fadeOut("slow").
fadeIn("slow").fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");

Adică? Am schimbat conţinutul div-ului (cât de simplu şi de elegant! html("….") şi gata!) apoi ne-am asigurat că div-ul este vizibil (cu show) şi l-am făcut să clipească de trei ori (succedând fadeOut cu fadeIn). O singură linie de cod, cu o înlănţuire de funcţii jQuery. Facilitatea înlănţuirii face şi mai puternică această librărie.

Tot efecte live vedem şi în această pagină (cu arhiva corespunzătoare) în care ne jucăm cu CSS-ul. Informaţii complete găsiţi desigur pe jQuery.com – noi vom încerca să vedem datele esenţiale. Dacă veţi studia sursei paginii de test veţi vedea o funcţie JScript definită după cum urmează:

function extrageValori(){
  $("#culoarefundal").html($("#anunt").css("background-color"));
  $("#tipfont").html($("#anunt").css("font-family"));
  $("#dimfont").html($("#anunt").css("font-size"));
  $("#latdiv").html($("#anunt").css("width"));
}

În pagina cu pricina am definit patru div-uri în care se vor completa informaţiile despre culoarea fundalului, despre tipul şi dimensiunea fontului, respectiv despre lăţimea div-ului. Cu funcţia html() schimb conţinutul la ceea ce transmit ca parametru. Şi ce trimit ca parametru? Rezultatul funcţiei css() aplicată pe elementul esenţial: div-ul anunt. Dacă fontul în div-ul anunt este Arial, atunci $("#anunt").css("font-family") va returna "Arial". Iar $("#tipfont").html("Arial") va face ca în div-ul tipfont să scrie Arial. Foarte simplu! Această funcţie va fi apelată ori de câte ori schimbăm vreun parametru. În prima parte a paginii aveţi schimbările. Citez doar una:

<a href="#" onClick=’$("#anunt").css("font-family","Arial");extrageValori();’>Arial</a>

Ce observăm? Că aceeaşi funcţie css() returnează valori dar şi setează… Desigur, depinde de modul de utilizare.

css("font-size") va returna dimensiunea fontului pentru elementul selectat cu $
css("font-size","14px") va seta dimensiunea fontului la 14px pentru elementul curent
css({color: "yellow", background: "blue";}) va seta culoarea fontului galben şi fundalul albastru

Tot la sectorul CSS sunt şi funcţiile height() şi width() care, aţi ghicit, returnează înălţimea şi respectiv lăţimea unui element HTML. Vă invit să descărcaţi arhivele furnizate, să modificaţi în ele pe ici pe colo pentru a vedea de sub propriile mâini cum merg lucrurile. Iar mâine vom trece mai departe, cu alte detalii interesante şi utile despre jQuery.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *