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

Klíčová slova: JAVASCRIPT, Scriptaculous, SlideUp, SlideDown
Rubrika: Javascript

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

Autor: Jiří Provazník
Datum vydání: 02.02.2008 | Zobrazeno: 13229
Permanentní odkaz: Použití knihovny Scriptaculous a efektů SlideUp a SlideDown

Komentáře (1)
ahoj ses trapnej
Autor:pavel
Přidej vlastní komentář:
Následující (běžně neviditelná) pole slouží pro vnitřní identifikaci systému. Pokud je vyplníte nebude možné váš požadavek na straně serveru zpracovat:
URL:
contents:
Website:
Pro odeslání vašeho komentáře použijte tlačítko "Odeslat". Toto tlačítko nepoužívejte:

Následující položky je vhodné vyplnit:
Jméno :
Email :
Web :
Místo :
Hodnocení:
Hodnocení jako pomocí hvězdiček
1/5= nejhorší, 5/5=nejlepší