Amit a scriptaculousról tudni érdemes 1

scriptaculousA 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)
   ]);
Góranga

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
      });
   }
Góranga

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'
Góranga

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.

3 thoughts on “Amit a scriptaculousról tudni érdemes 1

  1. Helló! Régen jártam már itt és most azt sem tudom hol kezdjem az olvasást 🙂 Amúgy a scriptaculous tényleg jó, elég egyszerűen össze lehet dobni látványos + AJAX-osdolgokat. Éppen most használtam 1 fórum készítésénél…

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.