Chtěli byste na vašich stránkách nějaké pěkné vizuální efekty pomocí java-scriptu. V tomto týdnu jsem dostal od jednoho ze svých kolegů (StefanoCZ) typ na dobře vypadající knihovnu scriptaculous-js (aktuální verze 1.8.1 na stránce http://script.aculo.us/) .
Je postavena jako ADD-ON knihovny „prototype“ a její použití je opravdu jednoduché. Zvládne to i začínající uživatel. Ihned jsem implementoval efekty SlideUp/ SlideDown na úvodní stránce mého webu http://www.provaz.cz/sector02/ .
A jak vypadá výsledná implementace? Podívejte se sami. Nejdříve je nutné přidat knihovnu do stránky. Provedete například tímto způsobem:
| <script language="JavaScript" src="js/prototype.js" type="text/javascript"></script> <script language="JavaScript" src="js/effects.js" type="text/javascript"></script> |
Následuje zapsání jednoduché funkce, kterou budete volat ze stránky. V případě funkce Effect.SlideUp/ Effect.SlideDown jsem použil následující zápis:
| <script type="text/javascript"> { if( $(idElement).visible() ) { new Effect.SlideUp( $(idElement) ); … } else { new Effect.SlideDown( $(idElement) ); … } } </script> |
Funkce BoxUpDown má kromě parametru „idElement“ ještě parametr „idObr“. Ten je použit například pro změnu obrázku v kódu který zde pro zjednodušení neuvádím.
Poslední věc, která nám chybí, je implementace na nějaký objekt stránky. V tomto případě jde o jednoduché zasunutí/vysunutí boxu s novinkami. Funkce BoxUpDown je implemtována v kliknutí na obrázek. Implementace je tedy např. následující:
| <div id="headnews"> Novinky <a href="#" onClick=" BoxUpDown ('news-programing', 'menu_icon_01'); false;"> <img src="images/icon_menu_up.gif" alt="" name="menu_icon_01" id="menu_icon_01" width="15" height="15" border="0"> </a> </div> <div id="news "> <div>text xxxxx</div> </div> |
A to je opravdu vše. Je to opravdu jednoduché! Jen připomínám že knihovnu můžete stáhnout na drese http://script.aculo.us/ . Knihovna obsahuje i framework prototype.js. Popis implementace zde uvedený najdete také dostupný na stránce http://www.provaz.cz/sector02/clanky-172.html
Jiří Provazník
Žádné komentáře:
Okomentovat