JQuery: Examples 1

Tři jednodušší ukázky použití JavaScriptové knihovny JQuery.

Animation

Vcelku nenáročná ukázka efektů, které knihovna umí, a jejichž implementace je velmi jednoduchá. K odkazu je přidána funkce pro animaci čtverce tvořené jedním divem. Čtverec se, po kliknutí na odkaz „Animate“ začte pohybovat, měnit velikost a mizet.

Pro pochopení si můžete prohlídnout zdrojový kód

  










Animate

Messages

Další jednouchý příklad simuluje čtení a mazání zpráv. Po kliknutí na tlačítko „Read“, tvořené jedním tagem span, bude zpráva pomocí slideToggle zobrazena nebo zavřena, plynulým roztažením.

Zprávu je možné smazat kliknutím na „Delete“, kdy se pomocí nastavení nových stylů a fadeOut zpráva ztratí. Tlačítko pro mazání je obsaženo v divu zprávy a pro přístup k celé zprávě musí být použito parent.

Pro pochopení si můžete prohlídnout zdrojový kód:

  













Read
 Message 1
	


	text text  text
	


	
Delete

	








Read
 Message 2
	

	text text  text
	



	
Delete

	







Read
 Message 3
	

	text text  text
	



	
Delete

	

Photo Album

Třetí ukázka představuje jednoduché fotoalbum, které umožňuje plynulé zobrazení dalších fotografií z výběru.

Při načtení je zobrazena první fotografie použitím selektoru :first. Aktuální fotografie je uložena do proměnné last, abychom k ní mohli při zobrazení další fotografie přistupovat (nastavit zpět opacity, které je při zobrazení změněno).

Pro pochopení si můžete prohlídnout zdrojový kód:

  












Select image

Závěrem

Všechny tři použité ukázky knihovny jsou poměrně jednoduché. Pokud bude zájem, mohu pokračovat složitějšími ukázkami.