Răspund la întrebări bune despre CSS şi/sau javascript/jQuery.

Poţi întreba lăsând un comentariu. Răspunsul va veni în câteva zile, când se vor strânge câteva întrebări.

În afară de toate efectele drăguţe de care este capabil, jQuery mai ştie şi alte lucruri mult mai importante şi utile. Printre acestea sunt funcţiile de manipulare a DOM-ului.

Prin manipularea DOM (Document Object Model) se poate modifica structura paginii parţial sau chiar în totalitate. Astfel, putem adăuga, şterge sau copia elemente în funcţie de necesităţi. Utilizare practică: AJAX, galerii de genul lightbox, drag&drop, etc. Pentru a demonstra cum funcţionează câteva din funcţiile de manipulare a DOM, am făcut un mic exemplu în care elementele sunt adăugate dinamic, după încărcarea paginii. Codul HTML iniţial este următorul:

<ul class="clearfix" id="manipulation"></ul>
<ul id="status"></ul>

Adăugăm în prima listă cinci elemente (a doua listă este un fel de consolă care – la click – ne arată câte elemente conţine prima listă):

1
2
3

for(i=0;i<5;i++){
	$(document.createElement('li')).appendTo($('#manipulation'));
}

Apoi, pentru fiecare LI adăugăm un span la mouseover şi îl ştergem la mouseout. Desigur, puteam să-l arătăm/ascundem, dar am vrut doar să arăt cam cum funcţionează manipularea. De asemenea, la click, se va injecta un alt LI imediat după elementul curent. Toate event-urile sunt live (voi explica un pic mai jos care e treaba cu ele) :

1
2
3
4
5
6
7

$('#manipulation').find('li:not(span)').live('click',function(e){
	$(document.createElement('li')).append('<a href="#">x</a>').hide().insertAfter($(this)).show(500)
}).live('mouseover', function(){
	$(this).append('<span>CLICK!</span>');
}).live('mouseout', function(){
	$(this).find('span').remove();
});

(Mai mult…)

Reîncepem seria de tutoriale despre jQuery dar, din cauza timpului liber inexistent se vor rări ca frecvenţă, dar voi încerca să compensez prin cantitatea de informaţie oferită.

Ca exemplu practic îţi voi arăta cum poţi face un meniu de genul suckerfish vertical cu submeniuri. Tutorialul conţine atât ce am „predat” până acum cât şi câte ceva din ceea ce va urma.

Codul HTML nu conţine altceva decât o listă neordonată (UL) ce nu cred că are rost să o explic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul id="meniu">
	<li><a href="#">Prima pagină</a></li>
	<li><a href="#">Despre noi</a>
		<ul>
			<li><a href="#">Ce facem</a></li>
			<li><a href="#">Ce nu facem</a></li>
			<li><a href="#">Cum facem</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">Feedback</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#meniu {
	border-top:1px solid #ccc;
	margin:50px;
	width:10em;
	font-family:Arial, Verdana, Sans-serif;
}
	#meniu li {
		position: relative;
		width:10em;
		border: 1px solid #ccc;
		border-top:none;
		list-style:none;
		background-color:#fff;
	}

În cele ce urmează afişăm doar primul nivel al listei, restul find ascuse.

1
2
3
4
5
6
7
8

#meniu li ul {
	position: absolute;
	left:9.5em;
	top:.2em;
	border-top:1px solid #ccc;
	z-index: 2;
	display:none;
}

(Mai mult…)

După ce am văzut cum funcţionează selectorii şi event-urile în jQuery, putem trece la pasul următor: efectele. Mulţi folosesc o librărie JS (jQuery, Prototype sau orice altceva) aproape exclusiv pentru efecte.

jQuery include câteva efecte simple dar majoritatea sunt doar variaţii ale unei singure funcţii: animate(). Toate efectele au un parametru pentru o funcţie callback. Efectele built-in sunt:

• show() / hide() -  folosite fără niciun parametru doar schimbă display:none în display:block sau display:inline (în funcţie de tipul elementului) şi invers. Cu un parametru numeric (ex: $('div').show(500) ) va genera un efect de redimensionare şi transparenţă de durată 500 ms;
• slideUp() / slideDown() – ascunde/arată un element printr-un efect de „alunecare”. Acceptă ca parametrii: durată, callback şi easing (nu ştiu cum aş putea traduce asta, dar voi explica mai jos ce face);
• toggle() / slideToggle() – dacă un element este vizibil îl ascunde şi viceversa. La fel ca la exemplul anterior, poţi specifica durata şi o funcţie callback;
• fadeIn() / fadeOut() – schimbă opacitatea unui element şi îi setează display:block / display:none. Parametrii: durată şi callback;
• fadeTo(durata, opacitate, callback) – schimbă opacitatea unui element fără a-i afecta vizibilitatea. Spre deosebire de fadeOut(), fadeTo(300, 0) doar setează opacitatea la 0, fără a ascunde elementul. Este asemănător cu  display:none VS. visibility:hidden.

Explicaţii

• funcţia callback rulează după ce efectul este terminat şi arată cam aşa:

  $('div').slideUp(500, function(){ alert('Ascuns')})

  desigur, se poate folosi şi combinaţia:

  var callback = function() {
   alert('Ascuns');
  };
  $('div').slideUp(500, callback)

• Easing – reprezintă un calcul matematic ce adaugă un… efect la efect. În cazul în care animaţia vrei să se desfăşoare liniar (cu aceeaşi viteză de la început până la sfârşit), nu ai nevoie de aşa ceva. În schimb, dacă vrei ca un slideUp să înceapă brusc şi să se termine încet, poate ar trebui să foloseşti plugin-ul ce adaugă ceva opţiuni în plus (pe lângă liniar şi swing, disponibile implicit). Acesta, pe baza unor formule matematice (scrise într-o limbă complet necunoscută mie) îţi adaugă o multitudine de opţiuni. Pe pagina sus amintită vei găsi o listă cu toate opţiunile.

Efecte custom

Astea sunt cele mai drăguţe deoarece singura limită ţine de imaginaţia fiecăruia. Ce se poate anima? Păi… Cam orice proprietate CSS în afară de z-index (IE face figuri). Atenţie însă, dacă vrei să schimbi poziţia unui element, nu uita să-l poziţionezi absolut mai întâi! Dimensiunile sunt specificate în pixeli dar, dacă le pui în ghilimele, poţi specifica unitatea de măsură preferată.

$('p:eq(0)').css({position:'absolute'}).animate({
	bottom:0,
	fontSize:'2em',
	opacity: 0.5,
	left:	'50%',
	width:'50%'
}, 1500, 'swing',  function(){
	alert('Animat!');
});

Poţi încerca diverse efecte folosind consola în pagina demo:

Mai multe efecte!

Dacă nu îţi place/nu ai timp/chef să experimentezi (sau orice alt motiv) poţi încerca jQuery UI. Este o librărie asemănătoare scriptaculous ce adaugă câteva funcţionalităţi mai deosebite pentru jQuery: drag&drop, mai multe efecte, slidere, datepicker, etc. Aici ai demo cu efectele jQuery UI.

Ce urmează?

Momentan o pauză de o săptămână-două, după care voi reveni cu un exemplu practic cu ce am învăţat până acum şi un  tutorial despre cum putem modifica DOM-ul cu jQuery. Nu uita să alegi ce tutorial vrei să fie exemplul final!

Nu, nu este vorba despre un tutorial. După ce terminăm un crash-course în jQuery, facem o mică aplicaţie. Problema este că nu ştiu cam ce ar fi interesant pentru cursanţii mei (moah, cum sună ), aşadar m-am gândit să fac un poll. Am pus câteva variante, dar dacă alegerea ta nu se regăseşte în listă, adaugă într-un comentariu.

[poll id="5"]

Cam toate aplicaţiile conţin efecte, ajax, modificare DOM, etc, deci toate sunt destul de avansate pentru a uni toate cunoştinţele asimilate într-un singur exemplu.