Peter Kröner, Webdesigner & Frontendentwickler - Weblog und Portfolio von Peter Kröner, einem Webdesigner und Frontendentwickler aus Westerkappeln bei Osnabrück.

Wenn ein Nicht-Techie beabsichtigt, mit einem CMS-WYSIWYG-Editor längere Texte zu schreiben, macht es Sinn, etwas für die Navigation innerhalb des Dokuments zu tun. Neben (ggf. mitscrollenden) Inhaltsverzeichnissen lohnen sich da vor allem Sprunglinks innerhalb des Texts und je nachdem wie Nicht der Nicht-Technie ist, bietet es sich durchaus an, entsprechende Links mittels Javascript automatisch einzufügen. Um das etwas zu vereinfachen, habe ich mir eine entsprechende Mootools-Klasse gebastelt – wenn ich in Zukunft zum Beispiel über jeder H2-Überschrift Sprunglinks haben will, reicht dieser kleine Schnipsel:

window.addEvent('domready', function(){
	new Autolinks('h2');
});

Das Ergebnis sieht dann so aus. Mit den Autolinks kann man einen immergleichen Link über, unter oder in einem oder mehreren beliebigen Elementen platzieren. Den Link kann man natürlich anpassen. Ein Aufruf mit allen Schikanen (und den Standardwerten) sieht so aus:

new Autolinks('h2', {
	where: 'before',
	options: {
		href: '#seitenanfang',
		html: 'Zum Seitenanfang'
	},
	wrapper: {
		tag: 'p',
		options: {
			'class': 'autolink'
		}
	}
});

Das sollte für den geneigten Mootooler eigentlich selbsterklärend sein. Wichtig ist vielleicht nur, dass man wrapper, wenn man kein den Link umschließendes Element braucht, auch auf false setzen kann. Andernfalls gehören hier ein Tag und Optionen hin. Die möglichen Werte bei where sind die gleichen wie bei Element.inject. Statt mit einem CSS-Selektor kann man die Autolinks bei Bedarf auch direkt mit Elementen füttern:

window.addEvent('domready', function(){
	new Autolinks($$('h2'));
});

Das Ganze ist zwar nur eine Kleinigkeit, aber zumindest ich brauche diese Funktion letztens oft genug, dass es sich lohnte, daraus eine anständige Klasse zu machen.

• Unkomprimiert (1,1 kb)
• Komprimiert (0,9 kb)

Ich wollte heute etwas bauen, das wie bei imageRollover (unter anderem) ein Element größen- und positionsgetreu durch ein anderes ersetzt. Da hätte ich also einfach den Code kopieren und in meine neue Klasse einfügen können, aber mit der Mootools-Philosophie im Hinterkopf kann man das eleganter lösen. Ich habe also zwei neue Funktionen in Element implementiert, die das Ersetzen übernehmen.

Benutzung:

element.replace(zuErsetzendesElement);

oder

zuErsetzendesElement.replaceWith(element);

Das ersetztende Element übernimmt alle Positionierungs-Styles vom zu ersetzenden Element und wird an seine Stelle ins Dokument gesetzt. Hier in Aktion. Diese Funktionen kann ich jetzt sowohl bei meinem alten imageRollover als auch in meinem neuen Script verwenden. Ich muss jetzt nur noch imageRollover so umbauen, dass es diese neue Funktion verwendet. Das wird dann der PTP-Post für nächste Woche.

Download:

• Komprimiert (465 Byte)
• Unkomprimiert (635 Byte)

Zu beachten ist noch, dass das zu ersetzende Element aus dem DOM entfernt, aber nicht gelöscht wird. Das bedeutet einerseits, dass man es bei bedarf bequem weiter verwenden kann, andererseits es aber auch per destroy() endgültig auslöschen sollte wenn man nicht mehr braucht. Sowohl replace() als auch replaceWith() geben das zu ersetzende Element (bzw. dann ja bereits ersetzte) Element zurück.

PTP ist eine neue Rubrik, in der ich ab heute (wie immer unter MIT-Lizenz) alle Mootools-Klassen ablade, die im Laufe der Zeit so bei meiner Arbeit anfallen. Und wenn man Mootools mit Verstand einsetzt, sind das ja so einige. Heute: imageRollover. Der Effekt ist nichts neues, aber ich brauchte etwas, das beim Ersetzen von Bildern die Positionierung (float, position etc) nicht vergisst und sowohl mit Strings als auch mit HTML-Elementen zu füttern ist. Download:

• Komprimiert (2 kB)
• Unkomprimiert (3 kB)

Benutzung:

new imageRollover({
	image,
	content
});

• image muss ein img-Element sein
• content kann ein String oder ein beliebiges Element sein

Farben und so weiter sind nicht fest einprogrammiert, man kann einfach das Element .imageRollover-rollover mit CSS stylen. Was ich mir noch als sinnvolle Features für die Zukunft vorstellen könnte, wären konfigurierbare Effekte und die Möglichkeit, die Klasse mit Collections statt nur mit Einzelelementen zu füttern. Vielleicht eines Tages …