Beispiel 1: Styling eines Menüs
Das erste Beispiel zeigt ein einfaches Menü, das mit Hilfe von Ajax animiert wird. Zunächst erstellen Sie per TypoScript ein simples Listenmenü, anschließend brauchen Sie nur noch dieses JavaScript einzubinden.
01 window.addEvent('domready', function(){
02 var list = $$('.t3nmenu li');
03 list.each(function(element) {
04 var fx = new Fx.Styles(element, {duration:200, wait:false});
05 element.addEvent('mouseenter', function(){
06 fx.start({
07 'margin-left': 5,
08 'background-color': '#666',
09 color: '#ff8'
10 });
11 });
12 element.addEvent('mouseleave', function(){
13 fx.start({
14 'margin-left': 0,
15 'background-color': '#333',
16 'color': '#888'
17 });
18 });
19 });
20 });
Listing 2
Mit dem Selektor „$$('.t3nmenu li')“ (Zeile 2) erhält man jedes Listen-Element innerhalb der Klasse „t3nmenu“ und weist anschließend jedem Element (Zeile 3) zwei Events zu: „mouseenter“ (Zeile 7) und „mouseleave“ (Zeile 15), die jeweils eine Animation auslösen. Für die Listen-Elemente der 2. Ebene wird ein, bis auf minimale Änderungen, identischer Code verwendet.
Beispiel 2: Resize von Contentelementen
Die Mootools-Bibliothek stellt eine Funktion zur Verfügung, die es erlaubt, Elemente mit der Maus größer und kleiner zu ziehen [2].
window.addEvent('domready', function(){
$('resizable1').makeResizable();
});
Listing 3
In Zeile 2 wird mit dem Selektor „$('resizable1')“ dem Element mit der ID „resizeable1“ die Resize-Funktionalität gegeben.
