Použití knihovny Scriptaculous a efektů SlideUp a SlideDown

Knihovna „Scriptaculous-js“ 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? 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">
     BoxUpDown = function(idElement,idObr)
         {
           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 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 už 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.