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) ]);
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 }); }
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'
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.
Kairosz.hu-n láttam ilyen effekteket. Tényleg nagyon látványos! Fantasztikus lehetőség van a laptervezők előtt…
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…
vmikki: És kaphatnánk egy linket ehhez a csodához? 🙂
Sajnálatosan, nem működik semmi sem, sem Chromiumban, sem Palemoon alatt, sem Firefoxban. Miért?
Gondolom azért mert ez egy több mint 10 éves cikk…