JQuery Kochbuch (German Edition)

type="text/css" href="preload.css" />');
/* ]]> */








    Akkordeon – jQuery-Code
// Initialisieren
function init_accordion() {

// Ist das Element vorhanden?
if (!$('dl.accordion').length) {

    // Wenn nicht, beenden
    return;
}

// Alle Akkordeons selektieren
$('dl.accordion').each(function() {

    // Erstes Akkordeon-Element anzeigen
    $(this).find('dt:first a').addClass('accordion_expanded')
     .end().find('dd:first').show();

    // Für runde Ecken per CSS
    $(this).find('dt:last').addClass('last');
});

// Event Listener für Click
$('dl.accordion dt a').click(function() {

    // Eltern-

holen
    var $dl = $(this).parents('dl:first');

    // Nächstes

holen
    var $dd = $(this).parent('dt').next('dd');

    // Letztes

    function findLast() {
     if ($dl.find('dd:last').is(':hidden')) {
     $dl.find('dt:last').addClass('last');
     }
    }

    // Ist es sichtbar?
    if ($dd.is(':hidden')) {

     //

erweitern, andere verbergen
     $dd.slideDown('fast').siblings('dd:visible').slideUp('fast', findLast);

     // Pfeil-Status ändern, class="last" für

entfernen.
     $(this).addClass('accordion_expanded').parent('dt')
     .removeClass('last').siblings('dt').find('a')
     .removeClass('accordion_expanded');
    }

    // Nicht folgen
    this.blur();
    return false;
});
}

// Los geht's
$(document).ready(function() {
init_accordion();
});
    Diskussion
    Diese Funktion selektiert zunächst alle Definitions-Listen mit der Klasse
accordion
und wendet dann die jQuery-Methode
.each()
aufsie an. Innerhalb jeder Definitions-Liste erhält der erste

-Eintrag die Klasse
accordion_expanded
und das erste

-Tag wird angezeigt (der Rest bleibt verborgen, weil wir im CSS
display: none
definiert haben). Zusätzlich erhält das letzte

-Element das Attribut
class="last"
, wodurch wir es mit runden Ecken versehen können (sofern der Browser es unterstützt). Das ist ein Unterschied zum Baum-Beispiel, in dem wir die Browser speziell behandelt haben, die kein
:last-child
kennen. Beim Akkordeon wird
class="last"
abhängig von den Benutzer-Aktionen entfernt beziehungsweise wieder zugewiesen.
    Der zweite Teil des Codes kümmert sich um das entscheidende Verhalten des Akkordeons. Alle Links innerhalb der Akkordeon-

s erhalten einen Click-Event Listener. Wenn einer dieser Links angeklickt wird, arbeiten wir uns im DOM zum übergeordneten

-Element nach oben und wechseln dann zum nächsten

. Wenn dieses

verborgen ist, bringen wir es als Animation mit Hilfe der jQuery-Methode
.slideDown()
zur Anzeige,während wir gleichzeitig für alle anderen Geschwister-

die Methode
.slideUp()
aufrufen. Danach wird die Callback-Funktion
findLast
aufgerufen, die ermittelt, ob wir dem letzten sichtbaren

das Attribut
class="last"
zuweisen, falls das dazugehörige

verborgen ist.
    Ist dieses letzte

sichtbar, geschieht nichts, da das

selbst schon per CSS abgerundet ist (über
:last-child
). Auch hier wundert sich der aufmerksame Leser vielleicht: »Warum patchen wir nicht die Internet Explorer 6 und 7, da diese
:last-child
nicht verstehen?« IE 6 und 7 kennen zwar
:last-child
nicht, aber sie unterstützen auch keine abgerundeten Ecken per CSS, daher müssen wir uns darum sowieso nicht kümmern.
    Schließlich wird dem angeklickten

-Link noch die Klasse
accordion_expanded
zugewiesen und von allen anderen

-Links entfernt. Dadurch zeigen alle Pfeile in den

-Elementen nach rechts (sie sind also eingeklappt), abgesehen vom gerade angeklickten

-Link.

Registerkarten in einem Dokument
    Problem
    Sie haben eine Seite mit einer Menge Daten, die zusammengehören. Es ist nicht sinnvoll, sie auf unterschiedliche Seiten zu verteilen. In solch einem Fall müssen Sie nicht unbedingt ein langes Dokument mit Überschriften und Absätzen erstellen. Stattdessen kann eine Benutzeroberfläche mit Registerkarten eine bessere Idee sein. Hier verhalten sich die Reiter wie man es