webthreads.de - Web 2.0, Web-Entwicklung und Netzkultur von Markus Kühle

Akkordeon Effekt mit der Yahoo! User Interface Library

Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt.
Einige Bibliotheken bieten diesen Effekt schon von Haus aus an und mann kann ihn direkt einsetzen. Mit der Yahoo! User Interface Library (YUI) muss man sich diesen Effekt erst noch “bauen”. Im folgenden wird erläutert was zu diesem Effekt benötigt wird und wie das Ergebnis aussehen kann. Wie schon im Artikel zu dem WM Info Mashup angekündigt hier nun also das erste Tutorial.

Gliederrung:



Live Beispiel
Das fertige Akkordion Beispiel sieht am Ende wie folgt aus:


Benötigte YUI Library Komponenten

Die YUI Library kann bei SourceForge heruntergeladen werden. Anschließend die entsprechenden Komponenten aus dem build Verzeichnis in ein geeignetes Unterverzeichnis kopieren (hier wird das Verzeichnis js verwendet) und in die HTML Seite einbinden:

<!-- Yahoo! User Interface Library --> <script type="text/javascript" src="js/yahoo/yahoo.js"></script> <script type="text/javascript" src="js/yahoo/event.js"></script> <script type="text/javascript" src="js/yahoo/dom.js"></script> <script type="text/javascript" src="js/yahoo/animation.js"></script>


Aufbau des HTML für die Akkordion Elemente

Ein Akkordion hat immer eine Überschrift und den eigentlichen Inhalt. Im folgenden accordion header und accordion body gennant. Somit wird jeweils ein <div> Element für den accordion header und accordion body benötigt und auch gleich ein entsprechender CSS-Klassenname für das Design und zur späteren Identifikation definiert. Ein Accordion Element (also accordion header und accordion body) wird wiederum mit einem weiteren <div> Element gekapselt und auch wieder mit einem entsprechendem CSS-Klassenname versehen.

Ein vollständiges Accordion Element sieht nun wie folgt aus:

<div class="accordionItem"> <div class="accordionHeader">accordion header</div> <div class="accordionBody">accordion body</div> </div>

Eine letzte Kapselung wird bei einer Menge von accordion items erstellt um dem JavaScript Aufruf zu vereinfachen.
Der vollständige HTML Code für ein Accordion mit drei Elementen sieht wie folgt aus:

<div id="myAccordion" class="accordion"> <div class="accordionItem"> <div class="accordionHeader">accordion header 1</div> <div class="accordionBody" style="height:100px;">accordion body</div> </div> <div class="accordionItem"> <div class="accordionHeader">accordion header 2</div> <div class="accordionBody" style="overflow:auto">accordion body</div> </div> <div class="accordionItem"> <div class="accordionHeader">accordion header 3</div> <div class="accordionBody">accordion body</div> </div> </div>

Durch die Angabe der Höhe des ersten accordion body mit style=”height:100px” wird die Höhe der Akkordion Elemente konfiguriert und gleichzeit das initial geöffnete Element definiert.

CSS Definitionen

Die CSS Klassennamen sind für die jeweiligen Element schon definiert – nun fehlen nur noch die entsprechenden CSS Klassendefinitionen. Generell muss natürlich die Gesamtbreite des Akkordions angegeben werden sonst erscheint dieser über die gesamte verfügbar Breite der Seite. Aber auch der accordion header sowie der accordion body müssen mit Höhen ausgestattet werden, wobei zu beachten ist, dass bei dem accordion body nur das initial aktive Element eine Höhe direkt angegeben bekommt und per default alle anderen eine Höhe von 0 Pixel haben.

<style type="text/css" media="screen"> .accordion { width: 300px; border: 1px solid #999999; font-family: Helvetica,Arial,sans-serif; font-size: 12px; color: #000000; } .accordionHeader { height: 16px; background-color: #CFD8E4; border: 1px solid #999999; font-size: 14px; padding: 1px 0px 1px 3px; cursor: pointer; } .accordionBody { height: 0px; overflow: hidden; padding: 0px 2px; background-color: #EEEEEE; } </style>

Per default ist der accordion body bei meinem Beispiel mit dem style overflow:hidden gesetzt. Das bedeutet, dass auch bei einer größeren Datenmenge für einen accordion body kein Scollbalken erscheint. Möchte man einen Scrollbalken haben so muss der style entweder nur für das entsprechende Akkordion Elemement oder generell in der CSS-Klasse auf overflow:auto gesetzt werden. In meinem Beispiel hat das zweite Akkordion Element einen Scrollbalken.
Es sei noch erwähnt, dass die CSS Definitionen zwecks des guten Stils natürlich in eine eigene CSS Datei ausgelagert werden sollten. In diesem Beispiel werden der Übersicht wegen die CSS Definitionen nicht ausgelagert um den HTML Code direkt mit den dazugehörigen CSS Angaben sehen zu können.


Akkordion JavaScript

Das JavaScript für die Akkordion Effekt kann in drei Teile aufgeteilt werden.

Der JavaScript Code der nun erstellt wird sollte so allgemein wie nur möglich sein, damit er einfach wiederverwendet werden kann. Aus diesem Grund wurden bei dem Erstellen des HTMLs eindeutige Klassennamen verwendet, die zum einen den Zweck haben eine einheiltiche Gestaltung zu gewährleisten und zum anderen eine einfache Identifikation zu ermöglichen. Zudem wurde dem gesamten Akkordion eine eindeutige ID vergeben. Diese Id wird verwendet um ein Akkordion Objekt zu erstellen.

Wem die kompletten JavaScript Erläuterungen zu viel sind, der kann sich nur das folgende JavaScript Grundgerüst sowie die Erstellung ein solches Akkordion Objektes anschauen und gleich zu den Resourcen springen um entweder nur die accordion.js oder das gesamte Beispiel herunterzuladen. Generell reichen die bisherigen Erläuterungen und das accordion.js aus um ein Akkordion Effekt zu erstellen.

Grundgerüst des Akkordion JavaScript

Es wird eine Accordion Funktion erstellt, die als Parameter die Id des Akkordion Rahmen <div> Elements erhält. Schöner Stil ist natürlich, wenn der JavaScript Code in eine separate Datei ausgelagert wird. In diesem Beispiel heisst diese Datei accordion.js. Das Grundgerüst für die Accordion Funktion sieht wie folgt aus:

function Accordion(id) {
  // Akkordion JavaScript Code
}

Um für den oben beschriebenen Akkordion HTML Code den Akkordion Effekt zu geben wird folgender Code genutzt:

<script type="text/javascript" src="js/accordion.js"></script>

<script type="text/javascript">
var  myAccordions;

  function init() {
    accordionWMCities = new Accordion("myAccordion");
  }
  YAHOO.util.Event.addListener(window, 'load', init);
</script>

Dabei wird die YUI Event Funktionalität genutzt um das Akkordion Objekt nach dem Erstellen des DOMs mit dem onLoadzu erzeugen.


Über alle gegebenen Akkordion Elemente iterieren

Nachdem das Erstellen eines Akkordion Objektes geklärt ist werden nun als erstes anhand der übergebenen Akkordion Id die Akkordion Elemente geholt und lokal gespeichert.
In der YUI Library besteht seit der Version 0.10.0 die Möglichkeit Dom Elemente anhand ihres CSS-Klassennamens zu selektieren. Die Funktion ist in er Dom Komponente zu finden (siehe auch JSDoc der DOM-Funktion) und lautet:

Array YAHOO.util.Dom.getElementsByClassName( className,  tag,  root)

Es würde reichen wenn nur der CSS-Klassenname angegeben wird. Für eine Verbesserung der Performance sollte allerdings der Tag Name der Elemente nach denen gesucht wird (in unserem Fall ist das ein <div>) und ein Start Knoten angegeben werden.

function Accordion(id) {
  // Speicher das Element der übergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
     YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body Höhe definieren
  this.accItemBodyHeight = 0;

  // Über alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    ...
  }
}


Jedes Akkordion Element speichern und das aktive Element finden

In der for Schleife wird nun über jedes Akkordion Element (CSS Klasse accordionItem) iteriert und jedes Element sowie deren accordion Header und accordion Body soll gespeichert werden. Gleichzeitig soll geprüft werden ob das aktuelle Element das aktive Element ist. Das aktive Element hat als einzigstes Element eine Höhe im accordion body definiert.

  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    ...
  }


Jedem Element die Akkordion Animation als Click-Event registieren

Als letztes muss nur noch die Animation für das Zusammenfahren des aktiven Elements und das Ausdehnen des selektierten Elements definiert werden. Dies wird mit Hilfe der Animation und Event Kompontente der YUI Library implementiert. Auf die Animation Komponente wird in diesem Tutorial nicht weiter eingegangen. Dieses Thema wird separat in einem weiteren Tutorial behandelt.

  for (var i=0; i<this.accItems.length; i++) {
    ...

    // Einen Click Event Listener für jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
          return;
      }

      // Für das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
      height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // Für das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
      height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);

  }


Vollständiger JavaScript Code

Der gesamte JavaScript Code für den Accordion Effekt ist im folgenden Listing zu erkennen. Dieser ist ausführlich kommentiert und sieht auf den ersten Blick evtl. komplexer aus als er wirklich ist. Die Hälfte des Listings besteht aus Kommentaren. Das JavaScript für den Akkordion Effekt kann auch direkt als Datei heruntergeladen werden (siehe Ressourcen).

function Accordion(id) {
  // Speicher das Element der ?bergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
    YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body H?he definieren
  this.accItemBodyHeight = 0;

  // ?ber alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    // Einen Click Event Listener f?r jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
        return;
      }

      // F?r das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
        height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // F?r das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
        height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);
  }

  // Letzte Prüfung, falls mehrere Elemente eine Höhe angegeben haben. Es wird 
  // nur das aktive Element offen gelassen. Alle anderen Akkordion Elemente 
  // erhalten die Höhe 0 Pixel.
  for(var i=0; i<this.accItems.length; i++){
    if(this.activeItem != this.accItems[i]){
      this.accItems[i].body.style.height = 0 + "px";
    }
  }
};


Ressourcen

Das hier beschriebene Beispiel kann noch einmal separat auf einer eigenen HTML Seite angesehen werden: Link
Zudem kann das gesamte Beispiel komplett zum entpacken heruntergeladen werden: AkkordionBeispiel.zip
Oder auch nur der Akkordion JavaScript: accordion.js

Viel Spass beim Ausprobieren.

Ähnliche Artikel, die dich interessieren könnten:

    None Found

15 Kommentare zu 'Akkordeon Effekt mit der Yahoo! User Interface Library' »»


Kommentare

  1. Kommentar by Thomas | 25.08.2006 at 10:13:36

    Leider ist der Inhalt mit deaktivierten Javascript nicht erreichbar …

  2. Kommentar by Markus | 27.08.2006 at 11:35:13

    Mmmhh.. ich hab das eben getestet und mein JavaScript ausgeschaltet aber bei mir sehe ich noch alles und der Artikel ist abrufbar. Evtl. könntest du mir noch deinen Browser verraten.

  3. Kommentar by Thomas | 13.09.2006 at 09:55:35

    Ich meine das Accordion… ohne Javascript kann ich die geschlossenen Divs nicht sehen

    Browser ist Firefox

  4. Kommentar by Markus | 13.09.2006 at 15:01:05

    Die geschlossenen Divs werden mit JavaScript gesteuert. D.h. ohne JavaScript funktionieren die Akkordions nicht. Ich würde auch behaupten, dass man ohne JavaScript auch keinen Akkordeon Effekt hinbekommt. Auch ohne die Animation beim Öffnen und Schließen eines Divs – also zwischen visibility=”hidden” und visibility=”visible” wirst du nicht ohne JavaScript hinbekommen.

    Daher ist es auch verständlich warum du die geschlossenen div Blöcke nicht sehen kannst.

  5. Kommentar by Thomas | 14.09.2006 at 17:50:14

    Ich möchte ja auch nicht, dass der Accordion Effekt an sich ohne Javascript funktioniert. Aber für Leute, die Javascript deaktiviert haben ist der Inhalt nicht zugänglich … am besten wäre es wenn alle Divs ohne Javascript einfach geöffnet sind. (wenn das möglich ist)

  6. Kommentar by corpore | 17.11.2006 at 10:38:08

    Vielen Dank für das ausführliche und saubere Tutorial. Mir ist allerdings aufgefallen, daß es im IE v7 Probleme gibt. Die div height proerty scheint nicht richtig gesetzt zu werden und die Quetschkomode fällt auseinander. Alles top in Firefox.

    Grüße!!

    P.S. @Thomas
    Wer heutzutage Javascript und Cookies disabled ist es selber Schuld wenn Inhalte nicht rüberkommen… da hab ich kein Mitgefühl.

  7. Kommentar by Michael Rölle | 04.04.2007 at 15:36:06

    Cooler Effekt, werde ich auch mal ausprobieren. Vielen Dank für das Tut!

  8. Kommentar by Marc | 05.04.2007 at 11:31:39

    @corpore: Damit das Beispiel auch im IE 7 richtig funktioniert, muss der DOCTYPE geändert werden. Erste Zeile in der index.html einfach durch z.B. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> ersetzen.

    Vielen Dank für dieses ausführliche Tutorial!

  9. Kommentar by Markus | 05.04.2007 at 11:42:52

    @Marc: Vielen Dank für diesen Hinweis!! Bin bisher leider nicht dazu gekommen das ganze nochmal im IE7 durchzutesten.


Trackbacks & Pingbacks »»

  1. Pingback by webthreads.de » WM 2006 hat begonnen – WM Info Mashup | 21.06.2006 at 09:26:01

    [...] Erstellen einen Akkordion Effekts mit der YUI Library [...]

  2. [...] webthreads.de » Akkordeon Effekt mit der Yahoo! User Interface Library Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt. [...]

  3. [...] Neben den Beispielen erläutert er kurz warum die Yahoo User Interface (YUI) Library den Vorzug gegenüber anderen Effekt Bibliotheken erhält. Während zum Beispiel Script.aculo.us viele Effekte schon von Haus aus liefert, müssen mit der YUI Library diese oft erst noch erstellt werden. Als Beispiel dazu siehe auch den bei webthreads beschriebenen Akkordion Effekt mit der YUI Libray, der bei der YUI Library erst noch implementiert werden muss während er bei anderen Bibliotheken schon als fertiger Effekt mitgeliefert wird. Aber genau das ist der große Vorteil der YUI Library denn die YUI Library gibt ein schönes Grundgerüst vor mit dem eigene Effekte einfach erstellt werden können. Aus diesem Grund wird bei der YUI Library auch von Utilities, wie zum Beispiel der YUI Animation utility, gesprochen und es besteht ein Unterschied zwischen den YUI Utilities (z.B. Animation, Event oder Drag and Drop) und Controls (z.B. Calendar, Container oder Slider). [...]

  4. [...] akkordeon-effekt-mit-der-yahoo-user-interface-library/ [...]

  5. Pingback by webthreads.de » Google verwendet YUI JavaScript Library? | 17.04.2007 at 08:47:10

    [...] Komponenten die der Entwickler für eigene Entwicklungen nutzen kann (siehe z.b. mein Tutorial über einen Akkordion Effekt mit der YUI [...]

  6. [...] webthreads.de » Akkordeon Effekt mit der Yahoo! User Interface Library Der Akkordion Effekt ist in der letzten Zeit durch die Verwendung von JavaScript Bibliotheken immer populärer geworden. In dem webthreads WM 2006 Info Mashup wurde dieser Effekt für die Darstellung der WM Stadien sowie der WM Länder genutzt. [...]

Hinterlasse ein Kommentar »»

Bad Behavior has blocked 6058 access attempts in the last 7 days.

cheapest viagra
viagra 100 mg too much
buy discount viagra online
buy line viagra
cheap viagra online canadian pharmacy
cheap price viagra
buy line viagra
free viagra samples
but cheap levitra
cheap viagra online
buy cheap cialis
buy levitra online
buy cheap viagra
free ringtones