{

Tobias Scheible
Autor, Referent & IT-Sicherheitsexperte
jQuery - User Interface

Datum: Montag, 13. Juni 2011

Autor: Tobias Scheible

Kommentar(e): 3 Kommentare

Kategorie: Web Development

Tags: JavaScript, jQuery, RIA, Rich Internet Application, jQuery UI, user interface

Akkordeon Effekt mit jQuery UI

Informationen übersichtlich zu strukturieren ist ein wichtiger Bestandteil der Usability. Besonders geeignet ist der Akkordeon Effekt. Mit dem jQuery UI Widget Accordion lässt sich dieser leicht realisieren. Das nachträgliche Ändern benötigt allerdings einen kleinen Trick.

Der Aufbau des HMTL-Gerüsts des Akkordeons von jQuery UI ist sehr einfach:

<div id="accordion">
<h3><a href="#">Bereich 1</a></h3>
<div>
<p>Text 1</p>
</div>
<h3><a href="#">Bereich 2</a></h3>
<div>
<p>Text 2</p>
</div>
<h3><a href="#">Bereich 3</a></h3>
<div>
<p>Text 3</p>
</div>
</div>

Anschließend erfolgt die Initialisierung per JavaScript mit jQuery:

$( "#accordion" ).accordion();

Ein neuer Bereich kann mit der jQuery Funktion .append()(http://api.jquery.com/append/) hinzugefügt werden:

$('#accordion').append('<h3><a href="#">Bereich 4</a></h3><div><p>Text 4</p></div>');

Allerdings wird dieser neue Bereich nicht korrekt angezeigt und kann nicht aufgeklappt werden, weil jQuery diese Elemente noch nicht kennt. Ein einfaches neues Initialisieren mit .accordion() funktioniert nicht, da die entsprechenden Klassen für die HTML-Elemente schon gesetzt sind. Stattdessen muss das Akkordeon komplett zurückgesetzt (zerstört) werden und wieder neu initialisiert werden:

$( "#accordion" ). accordion('destroy').accordion();
  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Burkhardt

Beachtenswerter Post.Habe einige tolle Denkanstoesse bekommen. Warte auf neue Beitraege zum Thema.

Litus

Sehr nützlich!

Piano

Ein super interessanter Post. Sehr cool!!

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben