Acest tutorial contine cateva exemple practice de efecte JavaScript in care este folosit JQuery.
Tutorialul se adreseaza in special celor care sunt incepatori in utilizarea JQuery in webdesign.
JQuery este o librarie de functii JavaScript. Aceasta contine mai multe functii pentru Ajax si lucrul cu elemente HTML si CSS.
Pentru a intelege si aplica exemplele din acest tutorial, trebuie sa cunoasteti HTML si CSS.
Cum functioneaza JQuery
Pentru inceput trebuie sa descarcati o copie Jquery (aceasta este versiunea 1.3.2), o adaugati intr-un director din cadrul site-ului dv. si o introduceti (apelati) in paginile dv. HTML (indicat in sectiunea HEAD), dupa cum puteti vedea in exemplul urmator.
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery132.js"></script>
</head>
<body>
...
</body>
</html>
- In acest exemplu fisierul cu libraria de functii JQuery "jquery321.js" se afla in acelasi director cu pagina HTML care-l foloseste.
Dupa ce ati adaugat acest fisier JS (JavaScript) trebuie sa scrieti functii care sa spuna JQuery ce sa faca.
Studiati cu atentie diagrama urmatoare (click pe ea), prezinta modul de scriere a unei functii care va fi folosita cu JQuery si explica elementele ce o compun.
Adaugarea elementelor in functii
Scrierea functiilor care folosesc JQuery este relativ simpla daca stiti efectul pe care doriti sa-l aplicati. Pentru incepatori partea mai dificila este cunoasterea denumirii functiilor pentru efectele din libraria JQuery si atributele pe care le folosesc. Aceste lucruri le puteti invata daca studiati Documentatia JQuery
Dupa ce cunoasteti efectul pe care doriti sa-l aplicati este important sa stiti cum sa obtineti, sa adaugati intr-o functie elementele carora veti aplica efectul.
Partea fundamentala in JQuery este selectarea unei parti din document, aceasta se face folosind constructia $() iar intre paranteze se adauga ca parametru un sir care poate fi orice selector CSS, id sau classa.
- Exemplu: $("a") face referire la toate elementele de tip link (<a>) din document.
Studiati si urmatoarele sintaxe:
- $("#top") - obtine (adauga in functie, pt. aplicarea efectului) elementul cu id="top"
- $("h2") - adauga si aplica efectul tuturor elementelor <h2>
- $("div#continut .poze") - adauga si aplica efectul tuturor elementelor ce au clasa class="poze" si sunt incluse in cadrul div-ului cu id="continut"
- $("ul li") - obtine si aplica efectul tuturor elementelor <li> din toate tag-urile <ul>
- $("ul li:first") - obtine si aplica efectul numai primului element <li> din fiecare tag <ul>
- Dupa aceste constructii se adauga, prin concatenare (folosind caracterul punct "."), ceea ce vrem sa facem cu elementul selectat, se poate adauga un efect, exemplu: $("h3") sau un handle-event (click, hover, ...) ce contine o alta functie care se executa la apelarea respectivului handle-event, exemplu: $("h3").click(function().
- Functiile se adauga folosind sintaxa function(). In interiorul functiilor se pot adauga coduri Javascript cat si alte constructii si functii pentru JQuery.
In continuare vor fi prezentate cateva exemple practice prin care, daca le studiati, veti invata si intelege singuri modul de scriere a functiilor pentru JQuery si cum se adauga in acestea elementele HTML si CSS.
1. Slide panel
Pentru inceput iata un exemplu simplu "slide panel".
Cand apasati pe un link, un panou (un cadru div) se va misca sus/jos, ascunzand sau dezvaluind continutul acestuia. Puteti testa acest exemplu CLICK AICI
Am creat un div cu id="panou" si un link ce are class="buton", in cadrul unui paragraf (p). Codul HTML este urmatorul
<div id="panou">- Folosind CSS puteti configura grafica acestora (background, margini, pozitie, ...).
... CONTINUT ...
</div>
<p class="slide"><a href="#" class="buton">Slide Panel</a></p>
Dupa crearea elementelor HTML scriem (de preferinta in sectiunea HEAD) functia care va folosi JQuery pentru acest efect.
<script type="text/javascript">- In cadrul "$(document).ready(function()" care este baza, se scriu functiile pentru adaugarea efectelor impreuna cu elementele HTML sau CSS care activeaza si primesc efectul dorit ( ready este un eveniment din biblioteca JQuery ).
$(document).ready(function(){
$(".buton").click(function(){
$("#panou").slideToggle("slow");
});
});
</script>
- Aici se adauga o functie care contine elementul (acesta poate fi un id, clasa sau tag) care va fi actionat (aici este $(".buton")) si modul actiunii (click), in interiorul acestei functii este adaugat iar "function()" ce va contine efectul JQuery (slideToggle("slow")) si elementul HTML care va avea acest efect ($("#panou")).
2. Efect de disparitie
Acest exemplu arata un efect simplu care face sa dispara din fereastra elementul dorit la apasarea pe un text "Close". Puteti testa acest exemplu CLICK AICI
Pentru inceput se scriu tag-urile HTML cu id-uri sau clase pentru fiecare. Importante sunt cadrul (elementul care va dispare) si elementul pentru "Close". Codul HTML pentru acest exemplu este urmatorul:
<div class="cadru">- Puteti adauga de mai multe ori acest cod, cu un continut diferit.
<h3>Un titlu</h3>
<p>Aici se adauga textul, continutul dorit.</p>
<h5 class="delete">Close</h5>
</div>
- Grafica si pozitionarea acestor elemente se face folosind CSS.
Acum, partea importanta este scrierea functiei pentru JQuery astfel cand se apasa pe Close (eticheta h5 cu class="delete") sa dispara tot continutul din div-ul ce are class="cadru".
Similar ca in exemplul precedent, se adauga functia (cu function()) in interiorul evenimentului de baza "ready". Aceasta functie va contine referinta la elementul care va actiona efectul (eticheta HTML cu class="delete") si modul de actiune (click), apoi, in cadrul acesteia se adauga iar "function()", in interiorul careia se scrie elementul care va primi efectul (div-ul cu class="cadru") urmat de efectul dorit din JQuery (aici este folosit animate({ opacity: 'hide' }, "slow"))
Codul pentru o astfel de functie este urmatorul:
<script type="text/javascript">
$(document).ready(function(){
$(".cadru .delete").click(function(){
$(this).parents(".cadru").animate({ opacity: 'hide' }, "slow");
});
});
</script>
De retinut
- "this" face referire la elementul curent care este actionat,
- "parents" face referire la elementul parinte.
Astfel, "(this).parents(".cadru")" reprezinta - elementul parinte, cu class="cadru", al elementului curent actionat.
In felul acesta, daca sunt mai multe elemente cu class="cadru" ce contine element cu class="delete", scriptul stie la care din ele sa aplice efectul.
3. Efect acordeon
Acest exemplu prezinta un efect de slide-bar de tip acordeon.
Pentru a vedea o demonstratie din care puteti intelege mai bine ce face acest exemplu CLICK AICI
Ca si la celelalte exemple, pentru inceput se creaza codul HTML pentru cadrul cu etichetele, id-ul si clasele la care dorim sa avem efectul si care vor fi folosite in functia pentru JQuery.
Creem un cadru principal DIV (cu class="acordeon") in interiorul caruia vom adauga tag-uri "h3" si sub fiecare cate un paragraf "p", cand se efectueaza click pe zona 'h3' se va dezvalui continutul paragrafului corespunzator si se va inchide cel actual deschis.
Codul HTML pentru acest exemplu este urmatorul:
<div class="acordeon">- Puteti adauga de mai multe ori etichete 'h3' si paragraf.
<h3>Topic unu</h3>
<p>Continut, text topic unu ... .</p>
<h3>Topic doi</h3>
<p>Continut, text al doile topic ... .</p>
<h3>Intrebare unu</h3>
<p>Continut, text intrebare unu ... .</p>
<h3>Intrebare doi</h3>
<p>Continut, text pentru a doua intrebare ... .</p>
</div>
- Grafica si pozitionarea acestor elemente se face folosind CSS.
Acum vom scrie functiile pentru JQuery (in interiorul evenimentului "ready").
- Prima linie ascunde toate paragrafele (<p>) din interiorul div-ului cu class="acordeon", cu exceptia primului paragraf.
Cand este actionat click pe zona 'h3' va activa efectul "slideToggle" pentru urmatorul <p> si "slideUp" celorlalte paragrafe comune (siblings) care sunt vizibile.
Codul pentru aceasta functie este urmatorul:
<script type="text/javascript">
$(document).ready(function(){
$(".acordeon p:not(:first)").hide();
$(".acordeon h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
});
});
</script>
4. Efect hover animat
Acest exemplu afiseaza un meniu orizontal la care este adaugat un efect ce afiseaza animat deasupra fiecarui link din meniu o zona in care apare textul din atributul "title" al link-ului respectiv.
Pentru o demonstratie a acestui exemplu CLICK AICI
Pentru crearea meniului se foloseste tag-ul <ul> unde se atauga elemente <li> si link-uri. Partea principala pentru aranjarea si grafica meniului se face din CSS (in demonstratia exemplului gasiti si codul CSS).
Codul HTML pentru meniul din acest exemplu este urmatorul:
<ul class="meniu">
<li><a href="https://marplo.net" title="Viziteaza pagina principala">Home</a></li>
<li><a href="https://marplo.net/javascript" title="Curs gratuit JavaScript">JavaScript</a></li>
<li><a href="https://marplo.net/php-mysql" title="Curs gratuit PHP-MySQL">PHP-MySQL</a></li>
<li><a href="https://marplo.net/jocuri" title="Jocuri flash gratuite">Jocuri</a></li>
</ul>
Acum trebuie scrise functiile pentru JQuery, cu efectul animat.
Prima linie ataseaza o eticheta <em> goala la elementul <a> din meniu (in CSS se configureaza si acest element "em")
In continuare se adauga o alta functie care atunci cand mouse-ul se afla pe suprafata link-ului (hover) afiseaza animat suprafata etichetei <em>, preia din link valoarea atributului "title" si o adauga intr-o variabila "hoverText", iar valoarea acestei variabile este introdusa in cadrul <em>
Apoi o ultima functie ascunde celelalte suprafete <em> ca sa nu ramana vizibile cand mouseul se muta pe alt link.
Codul acestor functii pentru JQuery este urmatorul:
<script type="text/javascript">
$(document).ready(function(){
$(".meniu a").append("<em></em>");
$(".meniu a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
5. Galerie de imagini
Acest exemplu foloseste JQuery pentru a afisa in acelasi cadru din pagina mai multe imagini dintr-o galerie foto, fara a deschide alta pagina.
Pentru a vedea o demonstratie a acestui exemplu CLICK AICI
Incepem cu crearea codului HTML. Este nevoie de 3 zone principale: prima pentru titlu, a doua pentru afisarea imaginii si a treia pentru galeria de imagini.
Pentru titlu adaugam un tag <h2>, apoi pentru zona in care va fi afisata imaginea scriem o eticheta DIV in care includem tagul pentru imagina initiala (cu id="imagine"), iar pentru galeria de imagini adaugam un paragraf (<p> cu class="thumbs") unde se adauga etichete de link (<a>) cu imagini mici.
Codul HTML pentru acest exemplu este urmatorul
<center>
<h2>Ilustratii</h2>
<div><img id="imagine" src="imgs/img1.jpg" alt="Imagine 1" /></div>
<p class="thumbs">
<a href="imgs/img2.jpg" title="Imagine 2"><img src=".imgs/img2thumb.jpg" /></a>
<a href="imgs/img3.jpg" title="Imagine 3"><img src="imgs/img3thumb.jpg" /></a>
<a href="imgs/img4.jpg" title="Imagine 4"><img src="imgs/img4thumb.jpg" /></a>
<a href="imgs/img5.jpg" title="Imagine 5"><img src="imgs/img5thumb.jpg" /></a>
<a href="imgs/img6.jpg" title="Imagine 6"><img src="imgs/img6thumb.jpg" /></a>
</p>
</center>
Acum urmeaza scrierea functiei pentru JQuery, care, atunci cand este actionat click pe o imagine mica din galerie, aceasta va afisa imaginea mare corespunzatoare in locul celei existente si va modifica si denumirea in titlu.
Deci, ca si in celelalte exemple, scriem functia in interiorul evenimentului "ready".
- prima linie ataseaza un element <em> in interiorul lui <h2>, element in care va fi modificat titlul pentru fiecare imagine.
- in continuare scriem o functia care atunci cand este dat click pe un link din interiorul paragrafului cu class="thumbs", adauga valoarea atributului "href" intr-o variabila "urlimg" si valoarea atributului "title" intr-o variabila "altimg". Apoi se inlocuieste valoarea atributelor "src" si "alt" din <img id="imagine"> cu valoarea variabilelor "urlimg" respectiv "altimg", iar pentru titlu, seteaza continutul lui 'em' (din h2) cu valoarea lui "altimg".
Codul acestei functii este urmatorul:
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var urlimg = $(this).attr("href");
var altimg = $(this).attr("title");
$("#imagine").attr({ src: urlimg, alt: altimg });
$("h2 em").html(" (" + altimg + ")"); return false;
});
});
</script>
Important: In fiecare pagina in care doriti sa folositi JQuery trebuie sa adaugati (de preferat in sectiunea HEAD, inaintea functiei scrisa de dv.) apelarea la fisierul JS "jquery".
Astfel:
<script type="text/javascript" src="cale/jquery.js"></script>
- unde "cale/jquery.js" este calea si numele fisierului cu biblioteca de functii JQuery.