Das Resultat ist visuell unaufdringlich und per jQuery leicht gebaut. Für ein aktuelles Projekt musste ich sowas eben zusammenstellen.

Erstmal das HTML

Als Grundgerüst dient eine einfache, unsortierte Liste:

<ul id="rotate">
    <li>Meldung Nr. 1</li>
    <li>Meldung Nr. 2</li>
    <li>Meldung Nr. 3</li>
</ul>

Man kann hier durchaus semantischer auszeichnen, aber für ein Beispiel reicht es erstmal.

Das Minimal-JavaScript

Wir brauchen jetzt eine rotate()-Funktion, die folgende Arbeit übernehmen soll:

1. Die Elemente für die Ein- und Ausblendung werden ermittelt
2. Wird ein bereits aktives Element gefunden, wird das nächste Element aktiviert
3. Kein aktives Element gefunden (=Ursprungszustand): Erstes Element ermitteln
4. Alle Elemente (einzeln) ausblenden
5. Ermitteltes, aktives Element einblenden
6. Die Funktion ruft sich selbst wieder auf

Eigentlich mag ich diese selbstaufrufenden Dinger nicht, wer weiss, wie gross der Workload für den Browserspeicher ist. Aber bei einer solchen Sache läßt sich die Rekursivität nicht verhindern. Starten wir also mit dem Grundgerüst, wir nutzen jQuery zum Selektieren, Traversieren und für die Animation.

Zunächst müssen wir das eventuell aktive Element ermitteln:

function rotate()
{
    // aktives element ermitteln
    var active_elem = $('#rotate li:visible');
}

Wir prüfen, ob exakt ein aktives Element vorhanden ist und ob das aktive Element das letzte seiner Reihe ist. Ist dem so, ist unser aktives Element für das Ein- und Ausblenden automatisch das erste Element der Liste:

    ...
    // mehr als ein aktives Element oder letztes Element
    if (active_elem.length != 1 ||
        $(active_elem).next('li').length == 0) {
        // das erste element ist das aktive
        active_elem = $('#rotate li:first');
    } else {
        // das naechste element ist das aktive
        active_elem = $(active_elem).next('li');
    }
    ...

Prima, wir haben das Element ermittelt, welches wir als nächstes einblenden wollen. Vorher blenden wir aber noch brav alles aus – unabhängig davon, ob es der erste oder n-te Durchlauf der Funktion ist:

    ...
    // alle elemente ausblenden
    $('#rotate li:visible').hide();
    // aktives element einblenden
    $(active_elem).fadeIn('slow');
    ...

Schliesslich darf die Funktion sich noch selbst aufrufen:

    ...
    window.setTimeout('rotate()', 2000);
    ...

Häppchenweise Verbesserung

Jetzt kann man noch ein paar kleine Verbesserungen einführen. Z. B. möchte ich beim Aufruf des Tickers gerne die Millisekunden übergeben, die zwischen den Blende-Vorgängen vergehen sollen. Weitere Verbesserungen sind denkbar:

• Das Skript läuft nur ab, wenn das Element auch im DOM vorhanden ist
• Das Skript erlaubt nicht nur die Millisekunden, sondern auch das ID-Attribut des zu rotierenden Elementes als Parameter im Funktionsaufruf
• Die Funktion blendet auch langsam aus (dazu muss man Aus- und Einblenden verketten)
• Man will natürlich noch eine No JavaScript-Variante, so dass per CSS das Layout auch mit mehreren News funktioniert.
• News müssen nicht zwangsweise bereits im Dokument vorhanden sein, News können natürlich auch per AJAX nachgeladen werden.

Es gibt sicherlich noch weitere, intelligente Verbesserungen, für den Beispielansatz hier belasse ich es aber dabei. Hier die Funktion, komplett mit dem entsprechenden Aufruf nach dem Laden des Document Object Models:

function rotate(mseconds)
{
    var active_elem = $('#rotate li:visible');
    if (active_elem.length != 1 ||
        $(active_elem).next('li').length == 0) {
        active_elem = $('#rotate li:first');
    } else {
        active_elem = $(active_elem).next('li');
    }
    $('#rotate li:visible').hide();
    $(active_elem).fadeIn('slow');
    window.setTimeout('rotate('+mseconds+')', mseconds);
}
$(function()
{
    rotate(6000);
});

Ich habe ausserdem eine kleine Demo ins Netz gestellt, wo man sich alle Komponenten (HTML, CSS und Skript) einmal in Aktion ansehen kann. Also, klicken und Firebug, bzw. Quelltextanzeige anwerfen.

Ich hatte mich schon öfters hier im Blog mit jQuery beschäftigt – immer häppchenweise. Es wird also Zeit für einen Artikel mit ausführlicheren Angaben zu Quellen und Resourcen zum Thema.

Dokumentationen

Neben der offiziellen Dokumentation gibt es einige herausragende Seiten und Blogs im Internet, die sich mit jQuery beschäftigen. Auf visualjquery.com findet sich eine wunderschön animierte und auf den schnellen Zugriff ausgerichtete Dokumentationsvariante.

Tutorials

Gerade für Einsteiger sind Tutorials fantastisch, um die ersten Hürden zu überwinden. Natürlich darf der obligatorische Getting started-Beitrag im offiziellen Wiki nicht fehlen. Auf themeforest.net existiert ausserdem eine ausführliche Videoreihe, die in 15 Videos nachvollziehbar die ersten Schritte bis hin zum eigenen Styleswitcher vorstellt. Im Code-Magazine wird jQuery in eigenen Worten noch einmal von Grund auf vorgeführt – wobei ich da die offizielle Einführung von jQuery-Erfinder John Resig vorziehe. Im offiziellen Wiki gibt es auch eine kleine Liste von deutschsprachigen Tutorials.

Für Entwickler, die über die Einstiegsthemen hinaus sind, ist sicherlich das Tutorial auf webdesignerwall.com interessant. Hier wird an 10 Anwendungsbeispielen die Funktionsweise und der Aufbau erklärt. Auch Simon Willisons “jQuery for JavaScript programmers” richtet sich zwar im Prinzip an Anfänger, bietet aber auch für Fortgeschrittene einen guten Einblick über die Einbettung von jQuery in JavaScript. Vom gleichen Autor existiert auch eine Präsentation online, die er auf der xtech 2008 über “Unobtrusive JavaScript with jQuery” gehalten hat – sehr sehenswert.

Ein Beitrag, der die wichtigsten Tipps (vor allem hinsichtlich der Performance) auf den Punkt bringt, ist “Improve your jQuery – 25 excellent tips” von Jon Hobbs-Smith. Jedem, der intensiver mit jQuery arbeiten möchte, sei dieser Beitrag ans Herz gelegt!

Werkzeuge

Bei einer beliebten Bibliothek dürfen die Werkzeuge nicht fehlen. Für mich wichtig war das TextMate-Bundle für jQuery. Dies macht natürlich nur Sinn, wenn man TextMate und einen Mac besitzt. Über das Blog von Jens Grochtdreis bin ich auf eine Firefox-Extension für die Dokumentation gestossen.

Ausserdem dort verlinkt sind die beiden grossartigen Online-Werkzeuge auf codylindley.com, die es einfach machen, Selektoren und Manipulationen zu erlernen und auszuprobieren.

Cheatsheets

Ob Anfänger oder Fortgeschrittene, Cheatsheets bieten auf den ersten Blick den Zugriff auf sämtliche Funktionen. Auch für jQuery existiert ein übersichtliches Cheatsheet (als PDF), das sich auf einer Seite ausdrucken und unter das Kopfkissen legen lässt.

Wo finde ich Plugins?

Der Einsatz von jQuery-Plugins ist gefährlich. Zu schnell wird der Code aufgeblasen und man konfrontiert Benutzer mit einem Download von einem MegaByte nur für das JavaScript. Die Verwendung von Plugins sollte also gut überlegt sein. Zusätzlich packt man den Code zusammen, der zuvor sogar noch aus unzähligen Dateien in einer zentralen Datei zusammengefasst worden ist. So etwas lässt sich leicht mit einer zweiten Scriptsprache (z. B. PHP) zur Laufzeit oder auf Anfrage machen.

Ein guter, aber überwältigender Einstieg bei der Suche nach Plugins ist ajaxrain.com. Eine weitere Liste findet man beim Bookmark-Dienst delicious.com mit der Suche nach den beiden Tags jquery und plugin.

Eine kleine, aber feine Liste von Plugins findet sich auch auf bassistance.de/jquery-plugins/ von Jörn Zaefferer.

Update 08.01.09

In den Kommentaren verlinkt Thorsten jQuery for Designers. Auch dort werden einige Tutorials veröffentlicht. Irgendwie habe ich in dem Blog das Problem, ein vernünftiges Archiv zu finden, aber über die Tagcloud und die Recent Posts kommt man schon weiter. Frisch aus deutschen Landen ausserdem ein weiterer Post von Jens Grochtdreis auf F-LOG-GE mit ein paar Links zu weiteren Artikeln.

Alle Links im Überblick und weitere Resourcen

• Offizielle Dokumentation
• visualjquery.com (Online-Tool für Schnellzugriff auf die Doku)
• Getting started (Tutorial)
• 15 jQuery-Videos
• Einsteiger-Artikel im Code Magazine
• Offizielle Einführung in jQuery von John Resig
• Liste von deutschsprachigen Tutorials
• 10 Anwendungsbeispiele erläutert auf webdesignerwall.com
• jQuery for JavaScript programmers von Simon Willison
• Unobtrusive JavaScript with jQuery von Simon Willison (Präsentation)
• Improve your jQuery – 25 excellent tips
• TextMate-Bundle für jQuery
• jQuery-Dokumentation als Firefox-Extension
• Online-Werkzeug: Selektoren
• Online-Werkzeug: Manipulation
• Cheatsheet jQuery im PDF-Format
• Delicious.com: Tags jquery und plugin
• bassistance.de: jQuery plugins
• 15daysofjquery.com – ein Blog zum Thema jQuery
• jQuery – write less, do more auf dev.opera.com
• 15 amazing jquery examples (Part 1) auf noupe.com
• jQuery plugins auf der offiziellen Seite

Sollte ich etwas wichtiges übersehen haben, schreibt’s mir in die Kommentare. Ansonsten viel Spass mit diesem tollen Framework.

So hatte ich in einem aktuellen Projekt die Anforderung, aus einem Kind-Element im DOM das Eltern-Element anzusteuern und zu einer Handlung zu zwingen. Ich habe lange gesucht, bin aber schliesslich auf eine sehr einfache Lösung gestossen. Der Trick ist, die Möglichkeit der Aneinanderreihung von Anweisungen zu nutzen, um durch das DOM zu traversieren.

$(".post> .entry").click (function()
{
    $(this)
        .next(".image")
        .slideToggle()
        .parent()
        .siblings('div')
        .find('.image:visible')
        .slideUp();
});

Was macht das Ding? Die Funktionsweise ähnelt dem bekannten Akkordeon-Effekt. Klickt man das das innere Element des post-Elementes an, wird das darin eingebettete Bild ausgefahren (slideToggle()). Danach springt die Anweisung auf das parent-Element, sucht alle divs, schaut nach, ob dort sichtbare Bilder drinstecken (identifiziert durch das Klassenattribut .image) und läßt diese einfahren.

Es gibt natürlich auch eine jQuery-Erweiterung für den Effekt von Jörn Zaefferer, die war mir jedoch für meinen Anwendungsfall zu viel Kanone auf Spätzchen.

Wenn das Projekt veröffentlicht wird, poste ich mal einen Nachtrag.