Script.aculo.us

script.aculo.us

Utvecklare	Thomas Fuchs
Senaste utgåva	1.9.0 (2010-12-23)
Skriven i	Javascript
Webbplats	script.aculo.us

script.aculo.us är ett Javascript bibliotek byggt på Prototype Javascript Framework. Det tillhandahåller dynamiska visuella effekter och användargränssnitt via Document Object Model (DOM).

Framför allt är det en del i Ruby on Rails och Seaside, men tillhandahålls också separat för att användas med andra ramverk för webbapplikationer samt skriptspråk.

script.aculo.us togs fram av Thomas Fuchs som en del av hans arbete med fluxiom, ett webbaserat digital asset management-verktyg av designföretaget wollzelle.^[1] Det publicerades för första gången i juni 2005.

Egenskaper

script.aculo.us utvidgar Prototype Javascript Framework genom att lägga till visuella effekter, kontroller via användargränssnitt samt verktyg.

Visuella effekter

script.aculo.us erbjuder fem grundläggande effekter: Opacitet, Skala, MoveBy, Highlight, och Parallell. Utifrån dessa effekter kan ytterligare 16 effekter kombineras fram. Programmerare kan också utvidga och skapa egna effekter.

Att aktivera en effekt bygger på att en effekt tilldelas ett ID-namn och en kod som genererar effekten. Här är ett exempel på effekten Effect.Fade tillämpad på ett DOM-element med ett ID om 'id_of_element':

new Effect.Fade('id_of_element');

Detta kommer att få mål-ID att gradvis minska opacitet och att sluta med att sätta CSS display property till inget.

Du kan även modifiera diverse inställningar inom effekten såsom hur lång tid effekten pågår samt vilken utsträckning den skall ha:

new Effect.Fade('id_of_element',
    { duration:2.0, from:0.0, to:0.8 });

Detta får elementet att gradvis blekna bort men effekten avstannar när den är 80% genomförd (med en opacitet om 20%).

Kontroller

Kontrollerna erbjuder element för användargränssnitt, inklusive:

Drag och släpp
- Dragbara
- Släppbara
- Sorteringsbara
- Slider
Autokomplettering
Editering på plats

Verktyg

Verktygen ger möjlighet att skapa DOM-element dynamiskt. Används koden nedan:

element = Builder.node('div',{id:'ghosttrain'},[
  Builder.node('div',{className:'controls',style:'font-size:11px'},[
    Builder.node('h1','Ghost Train'),
    "testtext", 2, 3, 4,
    Builder.node('ul',[
      Builder.node('li',{className:'active', onclick:'test()'},'Record')
    ])
  ])
]);

så skapas följande (utan newlines):

<div id="ghosttrain">
  <div class="controls" style="font-size:11px">
    <h1>Ghost Train</h1>
    testtext234
    <ul>
      <li class="active" onclick="test()">Record</li>
    </ul>
  </div>
</div>

Användning

Att införliva script.aculo.us på en webbplats kräver att samtliga Javascript-filer kopieras till en mapp samt att följande rader sätts in i huvudet på ett HTML dokument:

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

Dessa rader måste laddas först innan ett Javascript begär några funktioner för Prototype eller script.aculo.us. När de väl har laddats kan dessa funktioner inklusive skripttaggar och händelsehanterare anropas från valfri giltig Javascript-plats.

Ett alternativ till att kopiera alla Javascript-filer och ladda upp till en webbplats är att använda Google Ajax Libraries API som ger både Prototype och script.aculo.us vilka då kan nås med hjälp av AJAX API eller direkt som ovan:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js" type="text/javascript">
</script>