Multiple Actions mit MooTools

Mit MooTools kann man Elementen, also HTML Tags, zum Beispiel Events zuweisen. Aber mit MooTools kann man diesen Elementen auch Attribute zuweisen oder ihre Style Eigenschaften verändern. Wenn man nur je ein Attribut verändern möchte, sagen wir eine Style Eigenschaft, dann macht man das so:

$('foo_id').setStyle('backgroundColor', '#009900');<br /> //ändert die Hintergrundfarbe von dem Element mit der ID 'foo_id<br />

Wenn man aber zum Beispiel die Hintergrundfarbe, die Höhe und die Schriftfarbe des Containers auf einmal ändern möchte, dann braucht man dafür nicht drei mal die setStyle() Funktion aufrufen, sondern kann statt dessen die Multiple Actions Variante verwenden. Mootools hat diese extra für diese Fälle mit ins Programm aufgenommen.

$('foo_id').setStyles(<br /> {<br /> 'backgroundColor': '#009900',<br /> 'color': '#990000',<br /> 'height': '200px'<br /> });<br />

So kann man beliebig viele Styles auf einmal verändern und muss nur einmal, die dafür verantwortliche Funktion aufrufen. Bei setStyles() sieht man noch nicht den Nutzen dahinter. Deutlicher wird das Ganze aber, wenn wir uns die addEvent Funktion ansehen. Wenn man einem Element mehrere Events zuweisen möchte, weil es zum Beispiel ein onClick, ein onMouseOver/onMouseEnter und ein onMouseOut/ onMouseLeave geben soll, dann macht es uns Mootools mit der Multiple Actions Variante sehr einfach.

$('foo_id').addEvents(<br /> {<br /> 'mouseOver': function()<br /> {<br /> $('foo_id').getElement('div.foo_child').setStyle('height', '50px');<br /> },<br /> 'mouseOut': function()<br /> {<br /> $('foo_id').getElement('div.foo_child').setStyle('height', '20px');<br /> },<br /> 'click': function()<br /> {<br /> window.open('/foo/', '_self');<br /> }<br /> });<br />

Durch die Multiple Actions Function sind alle Events, die einem Element zugewiesen werden sollen, einfach zu erkennen und der Code sieht ordentlich aus, so das auch ein anderer Entwickler damit arbeiten könnte. Wenn ihr also an einem Element mehrere Änderungen mit MooTools vornehmen wollt, dann spart euch das Copy Paste und sorgt für ordentlichen Quellcode.