Curs jQuery – lectia 7 –Evenimentele in jQuery, instructiunile .show / .hide sau .toggle

Dupa ce in lectia trecuta am vazut cum putem manipula vizibilitatea cu ajutorul metodelor .addClass si .removeClass in acest articol vom vedea cum putem utiliza aceste metode impreuna cu evenimentele din jQuery (Event).

Event-urile sunt acele actiuni realizate de catre utilizatori sau de catre browser.

Cand am vorbit despre functia $(document).ready am introdus primul eveniment in jQuery – in acest caz am specificat ca DOM-ul trebuie incarcat complet inainte de a aplica asupra acestuia efectele jQuery.

Exista foarte multe evenimente care se genereaza in pagina web, cand vizitatorul face un click, trece cu mouse-ul asupra unui element, cand face scroll in pagina etc. Unul dintre event-urile cele mai utilizate este .click.

Instructiunile .show si .hide

Pentru a vedea cum putem gestiona event-ul .click vom realiza in pagina noastra doua butoane. In momentul in care vom face un click asupra primului buton vom ascunde detaliile suplimentare iar cand vom face click asupra celui de-al doilea vom arata detaliile suplimentare. Aceste doua actiuni (de ascundere si aratare a detaliilor) sunt deci legate de event-ul .click.

Vom incepe prin a realiza primul buton cu id-ul “button-hide”. Am utilizat actiunea .hide pentru ca atunci cand se face click asupra butonului sa se ascunda detaliile continute in elementul div pozitionat dedesubt ce prezinta id-ul “detalii”.

<div id="wrap">
<h3>Evenimentele in jQuery - show hide</h3>
<input type="button" id="button-hide" value="Ascundeti Detaliile" />
<div id="detalii"><p>Detalii despre evenimentele in jQuery</p></div>
</div>

$('#button-hide').click(function() {
$("#detalii").hide();
});

Pentru a avea posibilitatea de a recupera detaliile ascunse am realizat un al doilea buton ce ne da posibilitatea de a arata detaliile, acestui buton ii dam id-ul “button-show”. Asupra acestuia am utilizat actiunea .show. Markup-ul HTML de mai jos prezinta si o alta diferenta fata de cel initial de mai sus, si anume: am ascuns initial continutul div-ului cu id-ul „detalii” prin adaugarea inline a proprietatii display setata pe none.

<div id="wrap">
<h3>Evenimentele in jQuery - show hide</h3>
<input type="button" id="button-show" value="Aratati Detaliile" />
<input type="button" id="button-hide" value="Ascundeti Detaliile" />
<div id="detalii" style="display: none;"><p>Detalii despre evenimentele in jQuery</p></div>
</div>

$('#button-show').click(function() { 
$("#detalii").show(); });
$('#button-hide').click(function() {
$("#detalii").hide();
});

Facand click alternativ pe cele doua butoane putem arata si ascunde detaliile: DEMO

Actiunea .is

Am vazut cum cu ajutorul a doua butoane putem ascunde si arata informatii. Acelasi rezultat il putem obtine si cu ajutorul unui singur buton asupra caruia aplicam actiunea .is

Vom defini deci un nou buton cu id-ul “toogle” si vom controla daca acesta este vizibil sau nu pentru a-l putea ascunde sau vizualiza in consecinta cu ajutorul actiunii .is

<div id="wrap">
<h3>Evenimentele in jQuery - toogle</h3>
<input type="button" id="toggle" value="Aratati / Ascundeti Detaliile" />
<div id="detalii"><p>Detalii despre evenimentele in jQuery</p></div>
</div>

$('#toggle').click(function() {
if ($("#detalii").is(":visible")) {
$("#detalii").hide();
} else {
$("#detalii").show();
}
});

In acest caz verificam daca asupra elementului div #detalii selectat este activ si pseudoselectorul :visible. Avem aplicata conditia if else, o conditie extrem de des utilizata in limbajele de programare ce va ascunde div-ul in cazul in care acesta este vizibil si il va face vizibil in cazul contrar.

Intrerupatorul .toggle

Acest tip de logica pe care am analizat-o mai sus si anume de trecere de la o stare la alta se mai numeste si toogle. Pasajul elementelor de la un stadiu la altul este o actiune des utilizata in functiile jQuery. Intrerupatorul show / hide poate fi numit si toggle. Folosind aceasta functie vom obtine acelasi efect ca si in exemplul de mai sus scriind mult mai putin cod.

$('#toggle').click(function() {
$("#detalii").toggle();
});

De fiecare data cand facem click pe buton elementul div#detalii va trece de la stadiul vizibil la cel ascuns si invers: DEMO

In articolul urmator vom analiza cuvantul cheie “this” in jQuery si schimbarea textului pentru declansatorul functiei .toggle.

---

CUPRINS MINI-CURS JQUERY

1. Introducere la jQuery, download / CDN si plasare in documentul HTML
2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
3. Instructiunea Document Ready in jQuery si specificarea selectorilor
4. Selectorii :even si :odd si functia .css
5. Proprietati multiple cu functia .css utilizand un obiect “literal”
6. Manipularea vizibilitatii cu .addClass si .removeClass
7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo