Azi sarbatorim 1 zi de nastere.
JQuery pentru WebDesign
Acest tutorial conţine câteva exemple practice de efecte JavaScript în care este folosit JQuery.
Tutorialul se adresează în special celor care sunt începători în utilizarea JQuery în webdesign.
JQuery este o librărie de funcţii JavaScript. Aceasta conţine mai multe funcţii pentru Ajax şi lucrul cu elemente HTML şi CSS.
Pentru a înţelege şi aplica exemplele din acest tutorial, trebuie să cunoaşteţi HTML şi CSS.
Cum funcţionează JQuery
Pentru început trebuie să descărcaţi o copie Jquery (aceasta este versiunea 1.3.2), o adăugaţi într-un director din cadrul site-ului dvs. şi o introduceţi (apelaţi) în paginile HTML (indicat în secţiunea HEAD), după cum puteţi vedea în exemplul următor.
Cod:
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="cale_catre_script/jquery132.js"></script>
</head>
<body>
...
</body>
</html>- În acest exemplu fişierul cu librăria de funcţii JQuery "jquery321.js" se află în acelaşi director cu pagina HTML care-l foloseşte.
După ce aţi adăugat acest fişier JS (JavaScript) trebuie să scrieţi funcţii care să spună JQuery ce să facă.
Studiaţi cu atenţie diagrama următoare (click pe ea), prezintă modul de scriere a unei funcţii care va fi folosită cu JQuery şi explică elementele ce o compun.
Adăugarea elementelor în funcţii
Scrierea funcţiilor care folosesc JQuery este relativ simplă dacă ştiţi efectul pe care doriţi să-l aplicaţi. Pentru începători partea mai dificilă este cunoaşterea denumirii funcţiilor pentru efectele din librăria JQuery şi atributele pe care le folosesc. Aceste lucruri le puteţi învăţa dacă studiaţi Documentatia JQuery
După ce cunoaşteţi efectul pe care doriţi să-l aplicaţi este important să ştiţi cum să obţineţi, să adăugaţi într-o funcţie elementele cărora veţi aplica efectul.
Partea fundamentală în JQuery este selectarea unei părţi din document, aceasta se face folosind construcţia $() iar între paranteze se adaugă ca parametru un şir care poate fi orice selector CSS, id sau clasă.
- Exemplu: $("a") face referire la toate elementele de tip link (<a>) din document.
Studiaţi şi următoarele sintaxe:
- $("#top") - obţine (adaugă în funcţie, pt. aplicarea efectului) elementul cu id="top"
- $("h2") - adaugă şi aplică efectul tuturor elementelor <h2>
- $("div#continut .poze") - adaugă şi aplică efectul tuturor elementelor ce au clasa class="poze" şi sunt incluse în cadrul div-ului cu id="continut"
- $("ul li") - obţine şi aplică efectul tuturor elementelor <li> din toate tag-urile <ul>
- $("ul li:first") - obţine şi aplică efectul numai primului element <li> din fiecare tag <ul>
- După aceste construcţii se adaugă, prin concaternare (folosind caracterul punct "."), ceea ce vrem să facem cu elementul selectat, se poate adăuga un efect, exemplu: $("h3").slideToggle("slow") sau un handle-event (click, hover, ...) ce conţine o altă funcţie care se execută la apelarea respectivului handle-event, exemplu: $("h3").click(function()).
- Funcţiile se adaugă folosind sintaxa function(). În interiorul funcţiilor se pot adăuga coduri JavaScript cât şi alte construcţii şi funcţii pentru JQuery.
În continuare vor fi prezentate câteva exemple practice prin care, dacă le studiaţi, veţi învăţa şi înţelege singuri modul de scriere a funcţiilor pentru JQuery şi cum se adaugă în acestea elementele HTML şi CSS.
1. Slide panel
Pentru început iată un exemplu simplu "slide panel".
Când apăsaţi pe un link, un panou (un cadru div) se va mişca sus/jos, ascunzând sau dezvăluind conţinutul acestuia.
Am creat un div cu id="panou" şi un link ce are class="buton", în cadrul unui paragraf (p). Codul HTML este următorul:
Cod:
<div id="panou">
... CONTINUT ...
</div>
<p class="slide"><a href="#" class="buton">Slide Panel</a></p>- Folosind CSS puteţi configura grafica acestora (background, margini, poziţie, ...).
După crearea elementelor HTML scriem (de preferinţă în secţiunea HEAD) funcţia care va folosi JQuery pentru acest efect.
Cod:
<script type="text/javascript">
$(document).ready(function() {
$(".buton").click(function() {
$("#panou").slideToggle("slow");
});
});
</script>- În cadrul "$(document).ready(function()" care este baza, se scriu funcţiile pentru adăugarea efectelor împreună cu elementele HTML sau CSS care activează şi primesc efectul dorit ( ready este un eveniment din biblioteca JQuery ).
- Aici se adaugă o funcţie care conţine elementul (acesta poate fi un id, clasa sau tag) care va fi acţionat (aici este $(".buton")) şi modul acţiunii (click), în interiorul acestei funcţii este adăugat iar "function()" ce va conţine efectul JQuery (slideToggle("slow")) şi elementul HTML care va avea acest efect ($("#panou")).
2. Efect de dispariţie
Acest exemplu arată un efect simplu care face să dispară din fereastră elementul dorit la apăsarea pe un text "Close".
Pentru început se scriu tag-urile HTML cu id-uri sau clase pentru fiecare. Importante sunt cadrul (elementul care va dispare) şi elementul pentru "Close". Codul HTML pentru acest exemplu este următorul:
Cod:
<div class="cadru">
<h3>Un titlu</h3>
<p>Aici se adauga textul, continutul dorit.</p>
<h5 class="delete">Close</h5>
</div>- Puteţi adăuga de mai multe ori acest cod, cu un conţinut diferit.
- Grafica şi poziţionarea acestor elemente se face folosind CSS.
Acum, partea importantă este scrierea funcţiei pentru JQuery astfel când se apasă pe Close (eticheta h5 cu class="delete") să dispară tot conţinutul din div-ul ce are class="cadru".
Similar ca în exemplul precedent, se adaugă funcţia (cu function()) în interiorul evenimentului de bază "ready". Această funcţie va conţine referinţa la elementul care va acţiona efectul (eticheta HTML cu class="delete") şi modul de acţiune (click), apoi, în cadrul acesteia se adaugă iar "function()", în interiorul căreia 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 funcţie este următorul:
Cod:
<script type="text/javascript">
$(document).ready(function() {
$(".cadru .delete").click(function() {
$(this).parents(".cadru").animate({ opacity: 'hide' }, "slow");
});
});
</script>De reţinut
- "this" face referire la elementul curent care este acţionat,
- "parents" face referire la elementul părinte.
Astfel, "(this).parents(".cadru")" reprezintă - elementul părinte, cu class="cadru", al elementului curent acţionat.
În felul acesta, dacă sunt mai multe elemente cu class="cadru" ce conţine element cu class="delete", scriptul ştie la care din ele să aplice efectul.
3. Efect acordeon
Acest exemplu prezintă un efect de slide-bar de tip acordeon.
Ca şi la celelalte exemple, pentru început se crează codul HTML pentru cadrul cu etichetele, id-ul şi clasele la care dorim să avem efectul şi care vor fi folosite în funcţia pentru JQuery.
Creem un cadru principal DIV (cu class="acordeon") în interiorul căruia vom adăuga tag-uri "h3" şi sub fiecare câte un paragraf "p", când se efectuează click pe zona 'h3' se va dezvălui conţinutul paragrafului corespunzător şi se va închide cel actual deschis.
Codul HTML pentru acest exemplu este următorul:
Cod:
<div class="acordeon">
<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>
- Puteţi adăuga de mai multe ori etichete 'h3' şi paragraf.
- Grafica şi poziţionarea acestor elemente se face folosind CSS.
Acum vom scrie funcţiile pentru JQuery (în interiorul evenimentului "ready").
- Prima linie ascunde toate paragrafele (<p>) din interiorul div-ului cu class="acordeon", cu excepţia primului paragraf.
Când este acţionat click pe zona 'h3' va activa efectul "slideToggle" pentru următorul <p> şi "slideUp" celorlalte paragrafe comune (siblings) care sunt vizibile.
Codul pentru această funcţie este următorul:
Cod:
<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 afişează un meniu orizontal la care este adăugat un efect ce afişează animat deasupra fiecărui link din meniu o zonă în care apare textul din atributul "title" al link-ului respectiv.
Pentru crearea meniului se foloseşte tag-ul <ul> unde se adaugă elemente <li> şi link-uri. Partea principală pentru aranjarea şi grafica meniului se face din CSS.
Codul HTML pentru meniul din acest exemplu este următorul:
Cod:
<ul class="meniu">
<li><a href="http://www.marplo.net" title="Viziteaza pagina principala">Home</a></li>
<li><a href="http://www.marplo.net/javascript" title="Curs gratuit JavaScript">JavaScript</a></li>
<li><a href="http://www.marplo.net/php-mysql" title="Curs gratuit PHP-MySQL">PHP-MySQL</a></li>
<li><a href="http://www.marplo.net/jocuri" title="Jocuri flash gratuite">Jocuri</a></li>
</ul>Acum trebuie scrise funcţiile pentru JQuery, cu efectul animat.
Prima linie ataşează o etichetă <em> goală la elementul <a> din meniu (în CSS se configurează şi acest element "em")
În continuare se adaugă o altă funcţie care atunci când mouse-ul se află pe suprafaţa link-ului (hover) afişează animat suprafaţa etichetei <em>, preia din link valoarea atributului "title" şi o adaugă într-o variabilă "hoverText", iar valoarea acestei variabile este introdusă în cadrul <em>
Apoi o ultimă funcţie ascunde celelalte suprafeţe <em> ca să nu rămână vizibile când mouse-ul se mută pe alt link.
Codul acestor funcţii pentru JQuery este următorul:
Cod:
<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 foloseşte JQuery pentru a afişa în acelaşi cadru din pagină mai multe imagini dintr-o galerie foto, fără a deschide altă pagină.
Începem cu crearea codului HTML. Este nevoie de 3 zone principale: prima pentru titlu, a doua pentru afişarea imaginii şi a treia pentru galeria de imagini.
Pentru titlu adăugăm un tag <h2>, apoi pentru zona în care va fi afişată imaginea scriem o etichetă DIV în care includem tagul pentru imaginea iniţială (cu id="imagine"), iar pentru galeria de imagini adăugăm un paragraf (<p> cu class="thumbs") unde se adaugă etichete de link (<a>) cu imagini mici.
Codul HTML pentru acest exemplu este următorul
Cod:
<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 urmează scrierea funcţiei pentru JQuery, care, atunci când este acţionat click pe o imagine mică din galerie, aceasta va afişa imaginea mare corespunzătoare în locul celei existente şi va modifica şi denumirea în titlu.
Deci, ca şi în celelalte exemple, scriem funcţia în interiorul evenimentului "ready".
- prima linie ataşează un element <em> în interiorul lui <h2>, element în care va fi modificat titlul pentru fiecare imagine.
- în continuare scriem o funcţie care atunci când este dat click pe un link din interiorul paragrafului cu class="thumbs", adaugă valoarea atributului "href" într-o variabilă "urlimg" şi valoarea atributului "title" într-o variabilă "altimg". Apoi se înlocuieşte valoarea atributelor "src" şi "alt" din <img id="imagine"> cu valoarea variabilelor "urlimg" respectiv "altimg", iar pentru titlu, setează conţinutul lui 'em' (din h2) cu valoarea lui "altimg".
Codul acestei funcţii este următorul:
Cod:
<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: În fiecare pagină în care doriţi să folosiţi JQuery trebuie să adăugaţi (de preferat în secţiunea HEAD, înaintea funcţiei scrisă de dv.) apelarea la fişierul JS "jquery".
Astfel:
<script type="text/javascript" src="cale/jquery.js"></script>
- unde "cale/jquery.js" este calea şi numele fişierului cu biblioteca de funcţii JQuery.
Articol preluat de la www.marplo.net
Exista 5 articole asemanatoare, apasati aici pentru lista.
- Cum implementez plugin-ul jQuery YoxView intr-o pagina web?
- Cum implementez plugin-ul jQuery LightBox intr-o pagina web?
- Cum fac un slider de imagini in jQuery si PHP?
- Despre jQuery - introducere
- Tips & Tricks Ajax
Foarte fain acest tutorial...chiar nu stiam metoda de baza pentru a face o galerie de imagini.
