script.aculo.us

{{#if: script.aculo.us | script.aculo.us | {{#invoke:WLink|getArticleBase}} }} {{#if: |
colspan="2" class="notheme" style="text-align:center; background:#Vorlage:Standardfarbe; color:#202122;" | | {{#if: {{#invoke:Wikidata|claim|P154}} |
[[Datei:{{#invoke:Wikidata|claim|P154}}|150px]] }} }}{{#if: |
{{#if: JavaScript-Bibliothek | JavaScript-Bibliothek }}| }}
Basisdaten {{#if: |
Hauptentwickler	{{#if: {{#invoke:Wikidata|claim|P126}} |
Maintainer	claim|P126|parameter=link|references=ja|list=, }} }} }}{{#if: Thomas Fuchs |
Entwickler	{{#if: {{#invoke:Wikidata|claim|P178}} |
Entwickler	claim|P178|parameter=link|references=ja|list=, }} }} }}{{#if: |
Erscheinungsjahr	{{#if: {{#invoke:Wikidata|claim|P577}} |
Erscheinungsjahr	claim|P577|references=ja|list=, }} | {{#if: {{#invoke:Wikidata|claim|P571}} |
Erscheinungsjahr	claim|P571|references=ja|list=, }} }} }} }}{{#ifeq: 1.9.0 | KEINE_ANGABE || {{#if: 1.9.0 |
Aktuelle Version	({{#if: |	format	23. Dezember 2010 | {{#timefl:now|date}}}}	{{{2}}} | T._Monat JJJJ}}	lang= {{#switch:	-|=de	#default=de-AT }} }} }}) }}	{{#if: {{#invoke:Wikidata|claim|P348|P548|!Q3295609,Q51930650,Q2122918,Q21727724,Q1072356,Q6736813}} |
Aktuelle Version	claim|P348|P548|!Q3295609,Q51930650,Q2122918,Q21727724,Q1072356,Q6736813|references=ja}} {{#if: {{#invoke:Wikidata|claim|P348|P548|!Q3295609,Q51930650,Q2122918,Q21727724,Q1072356,Q6736813|qualifier=P577}} | ({{#invoke:Wikidata|claim|P348|P548|!Q3295609,Q51930650,Q2122918,Q21727724,Q1072356,Q6736813|qualifier=P577}}) }}}}}} }}{{#ifeq: | KEINE_ANGABE || {{#if: |
Aktuelle Vorabversion	({{#if: |	format	| {{#timefl:now|date}}}}	{{{2}}} | T._Monat JJJJ}}	lang= {{#switch:	-|=de	#default=de-AT }} }} }}) }}	{{#if: {{#invoke:Wikidata|claim|P348|P548|Q1072356,Q51930650,Q3295609,Q2122918,Q21727724}} |
Aktuelle Vorabversion	claim|P348|P548|Q1072356,Q51930650,Q3295609,Q2122918,Q21727724|references=ja}} {{#if: {{#invoke:Wikidata|claim|P348|P548|Q1072356,Q51930650,Q3295609,Q2122918,Q21727724|qualifier=P577}} | ({{#invoke:Wikidata|claim|P348|P548|Q1072356,Q51930650,Q3295609,Q2122918,Q21727724|qualifier=P577}}) }}}}}} }}{{#if: |
Ausführungsumgebung	{{#if: plattformunabhängig |
Betriebssystem	plattformunabhängig | {{#if: {{#invoke:Wikidata|claim|P306}} |
Betriebssystem	claim|P306|parameter=link|references=ja|list=, }} }} }} }}{{#if: JavaScript |
Programmier­sprache	JavaScript | {{#if: {{#invoke:Wikidata|claim|P277}} |
Programmier­sprache	claim|P277|parameter=link|references=ja|list=, }} }} }}{{#if: |
Kategorie	}}{{#if: MIT-Lizenz |
Lizenz	MIT-Lizenz | {{#if: {{#invoke:Wikidata|claim|P275}} |
Lizenz	claim|P275|parameter=link|references=ja|list=, }} }} }}{{#if: |
deutschsprachig	faculty|}} | ja | nein }} }}{{#if: |
Sonstiges	{{{Sonstiges}}}Vorlage:Infobox Software/Wartung/Sonstiges }}{{#if: script.aculo.us |
script.aculo.us | {{#if: {{#invoke:Wikidata|claim|P856|notdeprecated=1}} |
{{#invoke: WLink | formatURL | {{#invoke:Wikidata|claim|P856|parameter=link|notdeprecated=1}}}} }} }}{{#if: |
Dateien	[[c:Category:Created with {{{Dateien}}}|{{{Dateien}}}]] }}

script.aculo.us ist eine JavaScript-Bibliothek, die auf dem JavaScript-Framework Prototype aufbaut. Sie bietet dynamische visuelle Effekte und GUI-Elemente über das Document Object Model (DOM). Dadurch wird die Erstellung dynamischer GUIs für Internetseiten stark vereinfacht.

Ganz besonders ist es in Ruby on Rails integriert, wird allerdings auch separat angeboten, damit es mit anderen Web Application Frameworks und Scriptsprachen zusammenarbeitet.

script.aculo.us wurde von Thomas Fuchs aus dem Tool fluxiom entnommen, einem webbasierten Digital-Asset-Management-Tool der Designerfirma wollzelle.<ref name="interview-thomasf">Thomas Fuchs: Audible Ajax Episode 12 Ajaxian</ref> Der Öffentlichkeit wurde es erstmals im Juni 2005 vorgestellt.

Merkmale

script.aculo.us erweitert das Prototype JavaScript Framework durch visuelle Effekte, GUI-Elemente und andere Funktionen.

Visuelle Effekte

Es gibt fünf Kerneffekte, script.aculo.us bietet: Opacity, Scale, MoveBy, Highlight, und Parallel. Durch diese Effekte ergeben sich über 16 zusätzliche Effekte, die Kombinationen der Kerneffekte nutzen. Programmierer können diese Effektpalette auch noch erweitern und neue Effekte hinzufügen.

Um einen Effekt zu aktivieren, muss man dem jeweiligen Element eine ID-Bezeichnung zuordnen und eine Zeile Code für den Effekt hinzufügen. Nachfolgend ist ein Beispiel des Effekts Effect.Fade, der auf ein DOM-Element mit der ID 'id_of_element’ angewandt wird: <syntaxhighlight lang="javascript"> new Effect.Fade('id_of_element'); </syntaxhighlight>

Dadurch wird das Element mit der Ziel-ID ausgeblendet und am Ende die CSS-Eigenschaft display-Eigenschaft auf none gesetzt.

Es können einige Einstellungen, wie z. B. die Dauer und Reichweite des Effekts eingestellt werden: <syntaxhighlight lang="javascript"> new Effect.Fade('id_of_element',

   { duration:2.0, from:0.0, to:0.8 });

</syntaxhighlight>

Dadurch wird das Element eingeblendet, der Effekt stoppt allerdings, wenn er 80 % fertig ist (bei einer Deckkraft von 20 %).

Controls

Controls bieten GUI-Elemente, darunter:

• Drag And Drop
  • Draggables
  • Droppables
  • Sortables
  • Slider
• Autocompletion
• In Place Editing

Builder

Durch den Builder können DOM-Elemente dynamisch erzeugt werden. Durch Benutzung des unteren Beispielcodes … <syntaxhighlight lang="javascript"> 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')
   ])
 ])

]); </syntaxhighlight>

… wird folgender HTML-Code erzeugt (ohne neue Zeilen):

<syntaxhighlight lang="html">

Ghost Train

   testtext234

• Record

</syntaxhighlight>

Siehe auch

• jQuery

Literatur

• javascript Bibliotheken. In: c’t, 8/2010, S. 154

Weblinks

• Offizielle Webpräsenz
• Dokumentation (Wiki)
• Cheat Sheet
• Deutschsprachige Effekte-Einführung
• Google Code developer guide

Einzelnachweise

<references />