Tutorial jQuery VI – Exemplu practic

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:


#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.

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


Afișăm nivelul doi al listei (adică submeniul). Dacă #meniu are clasa .ready, nivelul doi rămâne ascuns :

#meniu li:hover ul {
	display:block;
}
#meniu.ready li:hover ul {
	display:none;
}
	#meniu li a {
		display:block;
		line-height:24px;
		padding:0 5px;
		color:#686d8a;
		font-size:.8em;	
		font-weight:700;
		text-decoration:none;
		outline:none;
	}
		#meniu li a:hover {
			color:#000	
		}
#meniu .arrow {
	background:url(niceMenuArrow.png) no-repeat 90% center;
}

La toate elementele ce au submeniu adăugăm o săgeată (să dea bine):

#meniu .arrow {
	background:url(niceMenuArrow.png) no-repeat 90% center;
}

Până în acest moment, meniul funcționează corespunzător fără pic de javascript (mai puțin pe IE6; rezolvarea pentru acesta se face strict cu JS):

Tutorial jQuery - Exemplu

În continuare urmează… „magia”:

Adăugăm clasa .arrow pentru elementele ce conțin submeniuri:

$('#meniu li ul').parent().addClass('arrow');

După care adăugăm clasa .ready pentru a elimina „efectele” pseudoclasei :hover:

$('#meniu').addClass('ready');

După acești doi pași, restul este… fantezie (cum spuneau Țapinarii):

$('#meniu > li').hover(function(){
	$(this).find('ul').fadeIn();
}, function(){
	$(this).find('ul').fadeOut();
});

Desigur, poți folosi orice efect (slide, animate, etc) în locul fadeIn(). Poți folosi fadeIn() combinat cu slideUp(), de exemplu.

Încearcă și tu!

IMPORTANT!

M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să știu dacă explic bine și pe înțelesul tuturor, deoarece, având o oarecare experiență îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.

13 Comentarii

Kinny a scris

Sal,
Misto ca gasesc si pe site-uri romanesti tutoriale JQuery.
Am eu o propunere … incearca sa scri un tutorial despre cum sa faci un plugin, de la ceva simplu fara defaults si pana la ceva mai complex in care sa se foloseasca valori default pe care sa le poti suprascrie (astea bineinteles in JQuery 1.3 … daca tot a aparut ;))
Bravo!

Staicu Ionuț Bogdan a scris

Salut Kinny, mulțumesc pentru comentariu.
Momentan sunt prins cu ceva proiecte și nu prea am timp să mai scriu tutoriale (îmi ia cel puțin două ore pentru a scrie un tutorial). Dar, în curând (1-2 săptămâni sper), voi reveni în forță :D

La un tutorial despre cum se scriu plugins nu m-am gândit, dar mulțumesc pentru sugestie. Cu siguranță voi ține cont ;)

De la jquery 1.1 până la 1.3 nu au fost schimbări în modul de scriere al plugin-urilor (probabil nici înainte, dar nu am folosit), deci nu este important pentru ce versiune voi face tutorialul :P

Te mai aștept cu comentarii ;)

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter