von Georg Ringer, 02.12.2007

Schicke und nützliche Effekte leicht gemacht: Ajax für TYPO3

Aus dem
t3n Magazin Nr. 10

Beispiel 3: Einbindung eines einfachen Newstickers

Für Mootools gibt es zahlreiche fertige Beispiele, die per Suchmaschine oder im Mootools-Forum gefunden werden können. Der Newsticker in diesem Beispiel stammt aus diesem Forum [3].

Die Übertragung des Beispiels in die eigene TYPO3-Website ist auch in diesem Fall sehr einfach. Nach der Einbindung der nötigen JavaScript-Dateien wird die Klasse mit den notwendigen Parametern aufgerufen.

JavaScript

window.addEvent('domready', function() {
	var myTicker = new Ticker('eventsticker','toggle_eventsticker',{interval:6000});
	});

Listing 6

Spannend und interessant wird es, wenn es darum geht, die Inhalte für den Newsticker zu generieren: Hier kann seine Stärken voll ausspielen. Dafür muss man zunächst einen Blick auf die notwendige Syntax werfen:

HTML

<div id="eventsticker">
	<ul>
		<li>News 1</li>
		<li>News 2</li>
	</ul>
</div>

Listing 7

Diese Struktur muss beibehalten werden, andernfalls müsste der JavaScript-Code angepasst werden, da er diese Struktur voraussetzt. Es ist jedoch nicht relevant, wie die Struktur zustande kommt – hier können alle Möglichkeiten von TYPO3 verwendet werden, etwa das Content-Element „HTML“. Das ist zwar simpel, jedoch wenig elegant. Alternativ kann eine Extension die gewünschte Struktur generieren: Jede Extension, die Datensätze im Frontend in einer Liste ausgibt (etwa tt_news), kann verwendet werden, um Elemente für den Newsticker zu kreieren – einfach das Template auf das Notwendige reduzieren.

Seite:  1 2 3 4 5 6