A scriptaculous egy a prototype keretrendszerre épülő JavaScript keretrendszer, ami segíti a webfejlesztőket, hogy könnyedén adhassanak hozzá a projectjeikhez vizuális efekteket, és ajax alapú megoldásokat. Ebben az első részben az efektekkel ismerkedünk meg.
A scriptaculous keretrendszer modulokból áll, az egyes modulok használhatók magukban, vagy együtt is. Használatához a html fejlécben be kell linkelni a prototype keretrendszert és magát a scriptaculous keretrendszert.

<script type="text/javascript" src="eleresi/ut/prototype.js">
</script>
<script type="text/javascript" src="eleresi/ut/scriptaculous.js">
</script>

Ha nincs szükségünk minden modura, akkor a load paraméterrel meghívhatjuk külön külön a használni kívántakat.

<script type="text/javascript"
   src="eleresi/ut/scriptaculous.js?load=effects,dragdrop">
</script>

Vizuális efektek

Ezek használatához nem kell belinkelnünk a teljes keretrendszert, csupán az effects modult.

<script type="text/javascript" src="eleresi/ut/prototype.js">
</script>
<script type="text/javascript" src="eleresi/ut/effects.js">
</script>

Azt hiszem, hogy ezekről nem érdemes sokat írni, aki akarja megnézheti a scriptaculous demo oldalán egy-egy katt után már világossá is válik, hogy melyik efekt mit csinál. Pár megjegyzésem azonban van.

• A SlideDown és SlideUp efekt esetén egy plusz html div elemet kell használnunk az efekt helyes működéséhez. A lenti példa például nem fog helyesen működni a kiegeszito class-ú div nélkül.

  <div onclick="new Effect.SlideDown(this)" id="des">
    <div class="kiegeszito">
      Itt a lényegi tartalom
    </div>
  </div>
  

• Az Element.hide() és az Element.show() esetében csak inline definícióval lehet a kezdeti rejtett állapotot biztosítani (<div style="display: none">). Ezt nem lehet egy css class-szal helyettesíteni, ha ezt tesszük akkor az elem nem fog megjelenni.
• Az IE némileg problémás ha az efekteket táblázatokra akarjuk alkalmazni. Ilyenkor a <tr> és <td> elemek esetében érdemes leellenőrizni, hogy nem hiányzik-e <tbody> vagy esetleg a <thead> vagy <tfoot>

Párhuzamosan futó efektek

Ha egy elemre egynél több efektet akarunk ráakasztani, akkor nem lesz elegendő, hogy a kódban simán egymás után meghívjuk a két efektet, mivel ebben az esetben az egyik efekt még javában futni fog amikor az elemre ráhívjuk a másikat. Ennek a problémának a megoldására az Effect.Parallel eljárás használható. Például ha azt szeretnénk, hogy ez elem elmozduljon a helyéről és közben növekedjen a mérete akkor a következő kódot kell használnunk.

new Effect.Parallel([
   new Effect.MoveBy('para1', -15, 100),
   new Effect.Scale('para1', 175)
   ]);

Katt és lásd!

Tetszőleges átalakítás – Effect.Morph

Az Effect.Morph segítségével egyik css osztályból a másikba nyomhatjuk át az elemünket. Ezzel az eljárással igen látványos hatásokat érhetünk el. Használhatunk a stílus meghatározásához stringet (lásd a példát), egy hash objektumot, vagy css osztálynevet.

function effectMorphDemo(){
   new Effect.Morph('goramorph',{
      style:'background:#f00; color:#fff;
         border: 20px solid #f88; font-size:2em',
      duration:0.8
      });
   }

function effectMorphDemoReset(){
   new Effect.Morph('goramorph',{
      style:'background:#fff; color:#f00;
         border: 1px solid #f00; font-size:1.2em',
      duration:0.4
      });
   }

Katt és lásd!Állítsd vissza

Oda-vissza – Effect.toggle()

Gyakran előfordul, hogy egy becsukott, vagy eltüntetett elemet szeretnénk újra kinyitni, vagy megjeleníteni. Az ilyen efekt párok kezelésében segédkezik nekünk az Effect.toggle().

Effect.toggle('t1','blind');   // 'blind' vagy 'appear' vagy 'slide'

Becsukom / Kinyitom

Remélem mindenkinek megjött az étvágya, megmozdult a fantáziája és hamarosan sok sok weblapon szembesülhetünk a fent bemutatott efektek alkalmazásával.