JQuery Kochbuch (German Edition)

, dann zum nächsten

und gelangen schließlich in dessen Kind-Elemente. Jedes Kind-Element mit
class="tree_trigger"
erhält die Klasse
trigger_expanded
und jedes folgende


erhält die Klasse
tree_expanded
. Diese Klassennamen entsprechen den CSS-Regeln, die für das Erscheinungsbild zuständig sind. Bei Trigger-Links führt das zu einem Symbol für einen ausgeklappten Unterbaum. Wie die Liste selbst erhalten sie nun
display: block
anstatt
display: none
.
    Der »Live«-Event Listener lauscht auf Klicks irgendwo im Baum. Dabei wird auf den gesamten Bereich von


geachtet. Wurde geklickt, wird ermittelt, ob dies auf einem Link mit
class="trigger"
geschehen ist. Dann wird der entsprechende Code ausgeführt. Der Vorteil von
.live()
gegenüber dem Hinzufügen eines Click-Handlers an jeden Link ist der, dass der Code mit allen bestehenden und zukünftigen Elementen verbunden ist, die den Kriterien entsprechen. Dadurch verschwenden Sie keine Zeit mit dem massenhaften Hinzufügen von Event Listenern und dynamisch über Ajax eingefügte Inhalte werden auch gleich mit behandelt.
    Nun fügen wir per JavaScript jedem

• 
  ein Attribut
  class="last"
  hinzu, dass das
  :last-child
  seines Eltern-Elements ist. Damit können wir ein Hintergrundbild platzieren, das die Verbindungen im Baum über eine dünne graue Linie simuliert. Schließlich durchlaufen wir noch das DOM, falls ein abhängiges
  
  
  von Anfang an durch
  class="tree_expanded"
  sichtbar sein soll, und fügen dem vorigen Trigger-Link ein
  class="tree_trigger_expanded"
  hinzu.
  
  Ein Akkordeon aufziehen
      Problem
      Die Situation, in der ein Akkordeon nützlich sein kann, ähnelt durchaus der von Bäumen. Die Muster sind gleich – bei beiden werden Informationen zunächst verborgen und sind erst dann sichtbar, wenn ein Anwender tätig wird. Allerdings enthält ein Akkordeon im Allgemeinen keine umfangreiche Informationsstruktur, sondern es wird meist dafür genutzt, die verschiedenen Facetten einer Site oder eines Produkts in neuartiger Form zu präsentieren. Solch ein Beispiel finden Sie unter http://www.apple.com/iphone . Dabei können Informations-Panels auf Wunsch des Anwenders aufgezogen werden, ohne dass der gesamte vertikale Raum eingenommen wird. Das Verhalten ähnelt durchaus den verschiebbaren Regalen in einer Bibliothek, bei denen immer nur ein Gang zur Verfügung steht und man nicht gleichzeitig an alle Regale herankommt.
      Es gibt durchaus ein Akkordeon-Widget von jQuery UI, das sich umfassend konfigurieren lässt und dem man ein Theme oder einen Skin verpassen kann, damit es den anderen UI-Widgets ähnelt. Sie finden es unter http://jqueryui.com/demos/accordion im Einsatz. Der Vorteil des offiziellen Widgets ist der, dass es von der jQuery UI-Community unterstützt wird und auch noch weiter wachsen und robuster werden wird. Der Nachteil ist eventuell der zusätzliche Code, den man braucht, wenn Sie eigentlich nur ein einfaches Akkordeon benötigen. Es kann also auch sein, dass Sie eine eigene Akkordeon-Komponente bauen, weil Sie weniger Code einsetzen wollen. Allerdings ist die Animation dann nicht bis auf den letzten Pixel exakt. Schauen Sie sich beide Optionen an und entscheiden Sie, was für Ihr Projekt das Beste ist.
      Lösung
      Mit den ausgezeichneten Fähigkeiten von jQuery zum Durchlaufen des DOM, insbesondere den Selektoren für Geschwister-Elemente, ist es möglich, ein Skript zu schreiben, das allgemein genug ist, um mehrere Akkordeon-Elemente zu verwalten. Zudem kann dieses Skript auch mit Elementen umgehen, die eventuell erst später zum Akkordeon hinzugefügt wurden. Figure 13-3 zeigt ein Akkordeon, das noch nicht aufgezogen wurde, während in Figure 13-4 der Inhalt zu sehen ist.
      Figure 13-3. Akkordeon, das noch nicht aufgezogen wurde
      Figure 13-4. Das aufgezogene Akkordeon
      Akkordeon – HTML-Code
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">