Hlavní strana   Blog   Práce   Kontakty   Mapa stránek   Filmy  

Podkategorie

C++
Php
Java
JavaScript
Ruby on Rails
Vývoj pro iPhone
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
VlastnÍ projekty
Jen tak mimochodem
Hry

Můžete mě sledovat:

          

Projekty

      

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

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.