JQuery Kochbuch (German Edition)

Element
#revealUp
kurz mit einem Pixel Höhe auf, um dann wieder zu verschwinden. Das liegt daran, dass es keine reale Höhe gibt, die man zur Animation nutzen könnte.
    Stattdessen bestimmen wir, ob die Höhe größer als Null ist, um sie dann entsprechend zu animieren. Da das Element in einem anderen Element mit
position: relative
eingebettet ist, können wir ihm eine Höhe von 100% verpassen, so dass es den gesamten Platz einnehmen kann.
    ----
    Warning
    In diesem Rezept haben ich
overflow: hidden
genutzt. Wird die Schriftgröße allerdings durch den Anwender erhöht, dann verbirgt mein Beispiel einen Teil des Inhalts. In Ihrer echten Lösung sollten Sie prüfen, ob der Inhalt immer noch sichtbar ist, wenn die Schriftgrößeerhöht wird. Sorgen Sie dann entweder dafür, dass die auftauchende Box groß genug ist, oder verwenden Sie
overflow: auto
für das Element
#revealUp
.
    ----

Erzeugen eines horizontalen Akkordeons
    Problem
    Die jQuery UI-Bibliothek unterstützt vertikale Akkordeons und es gibt auch ein paar einfache Code-Schnipsel, die für das Erzeugen eines rudimentären Akkordeon-Effekts genutzt werden können. Aber für ein horziontales Akkorden benötigt man speziellen CSS-Code und ein bisschen anderen jQuery-Code.
    Für diese Lösung werden wir die Vorlage nicht verwenden, da sich das Markup für das horizontale Akkordeon deutlich unterscheidet.
    Lösung
    HTML

    CSS
#accordionWrapper {
margin: 10px;
}

#accordionWrapper h3 a {
text-indent: -9999px;
height: 150px;
width: 50px;
float: left;
}

#accordionWrapper .red {
background: #c00 url(images/red.png) no-repeat;
}

#accordionWrapper .green {
background: #0c0 url(images/green.png) no-repeat;
}

#accordionWrapper .blue {
background: #00c url(images/blue.png) no-repeat;
}

#accordionWrapper div.box {
float: left;
height: 150px;
width: 150px;
border: 0;
margin: 0;

/* Bild aus .red usw. verbergen */
background-image: none;
}
    jQuery
$.fn.horizontalAccordion = function (speed) {
return this.each(function () {
    var $accordionHeaders = $(this).find('h3'),
     $open = $accordionHeaders.next().filter(':first'),
     width = $open.outerWidth();

    // Anzeige initialisieren
    $accordionHeaders.next().filter(':not(:first)').css({ display : 'none', width : 0
});

    $accordionHeaders.click(function () {
     if ($open.prev().get(0) == this) {
     return;
     }
     $open.animate({ width: 0 }, { duration : speed });
     $open = $(this).next().animate({ width : width }, { duration : speed });
    });
});
};

$(document).ready(function () {
$('#accordionWrapper').horizontalAccordion(200);
});
    Diskussion
    Der HTML- und CSS-Code legen das Akkordeon so an, dass die enthaltenen Elemente alle nach links geschoben werden. Nutzen Sie dies auf einer Webseite, werden Sie vermutlich direkt hinter dem Akkordeon ein Element einfügen müssen, um die folgenden Inhalte an der richtigen Stelle zu halten.
    Die Elemente gleiten nach links und unser Akkordeon ist mit
h3 > a
als Titel versehen.
    Sind CSS und JavaScript abgeschaltet, wird der Inhalt korrekt angezeigt und ist zum Beispiel auch für die Suchengine von Google lesbar.
    Ist CSS angeschaltet, JavaScript aber nicht, dann sind alle Inhalts-Boxen sichtbar.
    Mit jQuery initialisieren wir die Anzeige so, dass abgesehen von der ersten alle Boxen verborgen werden und wir Click-Handler mit den Headern verbinden, um die Inhalte entsprechend anzuzeigen.
    Das horziontale Akkordeon wurde als jQuery-Plugin geschrieben, insbesondere um zu zeigen, dass wir keine Variablen für den Effekt fest verdrahten müssen. Wir übergeben nur die Ablaufgeschwindigkeit an das Plugin, das dann die Effektdauer berechnet. Wir könnten das Plugin auch leicht so erweitern, dass es eine Easing-Angabe oder einen Callback übernimmt.
    Es ist wichtig, darauf hinzuweisen, dass sich im gesamten Code alle Click-Handler und die Navigation im DOM um das Element

drehen, nicht um das Element

. Dies funktioniert auch, der Code bleibt recht einfach (anstatt vom

-Element zum Eltern-Element

und dann