© 2013 All rights reserved.
8

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.



example

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

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.



example

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

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



example

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

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.

Comments (8)

Rozhodne bych zajem o dalsi ukazky mel :)
A rozhodne by me zajimalo to jak by vypadal priklad "Messages" s tim ze by doslo k ostraneni treba z db tak aby nedochazelo k obnoveni stranky.. Snad jsem se vymacknul srozumitelne ;)

Jo, vypada to pekne. taky by jsem urcite bral nejake dalsi ukazky.

koukam ze te jquery oslovilo ;)

Oslovilo, to ano.
Pokud mate zaklady JavaScriptu tak je urcite dobre zacit pouzivat nejakou hotovou knihovnu a ulehcit si tim slozitou praci, hlavne co se tyka cross-browser programovani (i kdyz v jQuery jsem resil problemy s Operou).
JQuery je velice, co se tyka implementace, jednoducha a je to pro me zmena.
Nakonec jsem se rozhodl, ze na ni postavim dalsi internetovy projekt, ktery pripravuji.

Paráda, díky.
Rozhodně pokračuj!
Pavel

nechybí na řádku

06. $(this).next(".hideClass").slideToggle(200)

u druhého příkladu středník?

Tam byt nemusi.

Smím se zeptat proč?

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836