Baumnavigation mit jQuery

Kein Beitragsbild

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Die Baumnavigation ist jedem aus unzähligen Programmen bekannt, in denen sie hauptsächlich zur Dateiverwaltung verwendet wird. Im Web wird sie eher selten verwendet und dann meist mit PHP erzeugt, was bei langen Ladezeiten die Navigation spröde macht. Es geht aber auch anders, mit Hilfe von jQuery lässt sich einfach eine ansprechende Baumnavigation erstellen, die auch bei deaktiviertem JavaScript funktionsfähig bleibt. Live Demo im neuen Fenster

Die Baumstruktur

Die Baumansicht in Konqueror
Eine Baumansicht in Konqueror

Ein Baum ist, grob gesagt, eine Liste, in der jeder Eintrag beliebig viele Unterpunkte haben kann, die meist durch Klicken des Eintrages auf- oder zugeklappt werden. Somit liegt es nahe eine Baumnavigation im Web als unsortierte Liste zu strukturieren.

<ul id=“baum“
	<li><span class="ausklappen">Ebene 1 Punkt 1</span>
		<ul>
			<li><span class="ausklappen">Ebene 2 Punkt 1</span>
				<ul>
					<li><a href="#">Ebene 3 Punkt 1</a></li>
					<li><a href="#">Ebene 3 Punkt 2</a></li>
					<li><a href="#">Ebene 3 Punkt 3</a></li>
				</ul>
			</li>
			<li><a href="#">Ebene 2 Punkt 3</a></li>
			<li><a href="#">Ebene 2 Punkt 4</a></li>
		</ul>
	</li>
	<li><span class="ausklappen">Ebene 1 Punkt 2</span>
		<ul>
			<li><a href="#">Ebene 2 Punkt 1</a></li>
			<li><a href="#">Ebene 2 Punkt 2</a></li>
			<li><a href="#">Ebene 2 Punkt 3</a></li>
		</ul>
	</li>
	<li><a href="#">Ebene 1 Punkt 3</a></li>
	<li><a href="#">Ebene 1 Punkt 4</a></li>
</ul>

Ich habe hier 3 Ebenen angelegt, mehrere Ebenen sind natürlich nach dem gleichen Schema ergänzungsfähig.

Um den Baum mit CSS eindeutig ansprechen zu können,, bekommt er die id=”baum”. Die Ebenen, die Unterpunkte enthalten und ausgeklappt werden können, sind durch einen span-Tag gekennzeichnet.

    <span class="ausklappen"></span>

So erhalten wir eine Baumansicht im „Ausgeklappten Zustand“ auch für Nutzer mit deaktiviertem JavaScript.

Baum als Unsortierte Liste ohne Formatierung
Baum als unsortierte Liste ohne Formatierung

Einsatz von JQuery

Bevor wir jQuery einsetzen können, müssen wir es  herunterladen. Die aktuelle Version gibt es bei Google Code. Wir erhalten derzeit die Datei jquery-1.3.2.min.js, die hier in den Ordner /js des Arbeitsverzeichnisses kopiert wird. Eingebunden wird jQuery nun durch folgenden Befehl im head-Bereich eingebunden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €

E-Book Bundle von Andreas Hecht
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Baumnavigation mit jQuery</title>
	<!-- Hier der Befehl zum einbinden von jQuery -->
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>
<body>

Nun steht uns jQuery zur Verfügung und wir beginnen mit unserer Baum-Funktion.

Die Baum-Funktion

Wir erstellen die Datei “Baumnavigation.js”, speichern sie im Ordner /js ab und binden sie mit folgendem Befehl im head-Bereich ein.

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

Die Datei BaumNavigation.js sieht so aus:

$(function() {
	$('span.ausklappen').next().hide();
	$("span.ausklappen").before("<span>+ </span>");
	$("span.ausklappen").css("cursor", "pointer");
	$("span.ausklappen").click(function() {
		$(this).next().slideToggle("slow");
		if ($(this).prev(this).text() == "+ " )
			$(this).prev(this).replaceWith("<span>- </span>");
		else if ($(this).prev(this).text() == "- " )
			$(this).prev(this).replaceWith("<span>+ </span>");
	});
});
$('span.ausklappen').next().hide();

In dieser Zeile wird der Span-Tag ausgewählt, den wir den aufklappbaren Ebenen zugewiesen haben, ausgewählt, mit .next() das nächste Element im DOM und mit .hide() diese versteckt. Somit werden nur noch die 1. Ebenen angezeigt.

$("span.ausklappen").before("<span>+ </span>");

Hier wird wieder der Span-Tag ausgewählt und mit .prepend(„+ “) ein Plus Zeichen INNERHALB dieses Tags eingefügt. Hier kann auch eine Grafik eingefügt werden.

$("span.ausklappen").css("cursor", "pointer");

Um die ausklappbaren Ebenen als solche besser erkennbar zu machen, wird wie oben der Span-Tag ausgewählt und für diesen mit .css(„cursor“,“pointer“) der Mauszeiger auf die gewohnte Hand mit zeigendem Finger wie bei einem Link umgestellt, sobald man mit der Maus darüberfährt.

$("span.ausklappen").click(function() {

Nun kommen wir zur Ausklappfunktion, die mit .click(function(), wie sich vermuten lässt, ausgeführt wird, wenn man auf den Span-Tag klickt.

$(this).next().slideToggle("slow");

Innerhalb dieser Funktion greifen wir mit $(this) auf den Span-Tag mit der Klasse “aufklappen” zu. Mit next() wählen wir das nächste Element im DOM aus, da dieses angezeigt oder ausgeblendet werden soll. Die slideToggle()-Funktion lässt nun die Unterpunkte langsam nach unten „gleitend“ erscheinen. Mit dem Wert „slow“ wird die Geschwindigkeit dieses Effekte festgelegt. Mögliche Werte hier sind “slow”, “normal”, oder “fast”, sowie eine Angabe in Millisekunden (Bsp.: 1000 ).

if ($(this).prev(this).text() == "+ " )
			$(this).prev(this).replaceWith("<span>- </span>");
		else if ($(this).prev(this).text() == "- " )
			$(this).prev(this).replaceWith("<span>+ </span>");

Mit $(this) wird auf den Span-Tag zugegriffen, .prev(this) wählt von den Tag vor diesem Span-Tag aus, also hier den Span-Tag mit dem Plus-Zeichen und mit .text() greifen wir auf den Text innerhalb dieses Tags zu.
Wenn dieser Text “+ ” ist, so wird mit

$(this).prev(this).replaceWith("<span>- </span>");

der gesamte Tag ersetzt.

Durch das Entfallen der .text()-Funktion wird hier auf den gesamten Tag samt Inhalt zugegriffen und durch einen neuen Tag ersetzt, so wird aus dem Plus ein Minuszeichen. Der Rest der Schleife ist, denke ich, selbsterklärend, wenn der Text “+” ist, dann ersetze ihn durch “–”,  wenn der Text “–” ist, ersetze ihn durch “+”.

Das war schon alles, um den Baum zu „animieren“. Nur die Darstellung ist nicht wirklich ansprechend, deshalb erweitern wir das Beispiel noch um ein bisschen CSS.

Baumansicht mit jQuery im Ausgeklappten Zustand ohne CSS Formatierung
Baumansicht mit jQuery im ausgeklappten Zustand ohne CSS-Formatierung

CSS

#baum
{
margin:0 0 0 0;
list-style-type:none;
padding:0 0 1em 0;
width:25em;
font: .9em/1.5em Arial, Tahoma, Verdana, sans-serif;
}
#baum  li
{
margin:0.5em 0.5em 0.5em 0.5em;
list-style-type:none;
background:#F0F0F0;
padding:0.1em;
}
#baum  li li
{
margin:0.5em 0.5em 0.5em 1.5em;
background:#FFFFFF;
}
#baum  li li li
{
background:#F0F0F0;
}
#baum a
{
text-decoration:none;
}

Über die ID „baum“ können wir nun per CSS einfach auf den Baum zugreifen und die einzelnen Elemente gestalten. Auf diese Weise erhalten wir eine einfache Baumnavigation die beliebig formatiert und gestaltet werden kann und die auch ohne JavaScript und CSS  funktionsfähig bleibt. ™

Baumnavigation mit CSS und jQuery teilweise ausgeklappt
Baumnavigation mit CSS und jQuery teilweise ausgeklappt

Vollständig ausgeklappter Baum
Baumnavigation mit CSS und jQuery teilweise ausgeklappt

Material zum Download

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Sortiert nach:   neueste | älteste | beste Bewertung
hieblmedia
Gast

Das jQuery Plugin Treeview macht dies auch mit einigen zusätzlichen Optionnen.

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

gnoffo
Gast

“die auch bei deaktiviertem JavaScript funktionsfähig bleibt”

funzt irnkwie nich

gnoffo
Gast

ah sorry funzt doch

ich = doof

nuberg
Gast

@hieblmedia:
Dass Sie unter dem Beitrag eines Autors, der sich viel Mühe mit ausführlichen Erklärungen gemacht hat, mit keinem einzigen Wort darauf eingehen, sondern nur besserwisserisch auf einen anderen Beitrag und auf Ihre eigene Website verweisen (und das auch noch als *erster* Beiträger), ist in meinen Augen sehr schlechter Stil und zeugt von wenig Fingerspitzengefühl. Tut mir leid, aber das musste mal raus.

@Marcel Weber:
Vielen Dank für den interessanten Artikel!
Das einzige, was ich vermisse, ist die Möglichkeit, die Ebenen mit Unterpunkten auch über die Tastaturnavigation zu erreichen, um volle Zugänglichkeit zu gewährleisten.

FaustFührung
Gast

@nuberg

Ein Artikel über die Features und wie man das Basisstance Plugin einbindet, was es kann oder wie es läuft wäre hilfreicher als die ganze Sache (mal wieder) neu zu erfinden.

Christian
Gast

Ich finde diesen Artikel für Einsteiger sehr geeignet. Er ist sehr ausführlich, praktisch alles wird erklärt und ist meines Erachtens auch verständlich. Gleichzeitig lernt man hier noch etwas jQuery, auch wenn grundlegende Kenntnisse bereits vorausgesetzt werden, da z.B. auf das Chaining Prinzip von jQuery nicht eingangen wird.

Ich freue mich auf die künftigen Beiträge von Herrn Weber, wenn er diesem ausführlichen Stil treu bleibt. Und lassen Sie sich nicht von den hier anwesenden Miesepetern unterbuttern, der Großteil sind Feiglinge.

Gast
Gast

Schließe mich meinem Vorredner an.
Ein Plugin zu erklären ist nicht zu vergleichen mit einem Grundlagenartikel über Baumnavigation – und dann wird der Thread gleich zur Eigenwerbung missbraucht – geht’s noch ??

Herr Weber – weiter so, fundiert, ausführlich und verständlich. Nur nicht unterkriegen lassen ! :)

@nuberg: Wenn alle Leute so denken würden wie sie, wäre das Rad doch nie erfunden worden !

Brummel
Gast

Die Lösung in diesem Beispiel hier ist allerdings ziemlich umständlich.

Was ist wenn die Seite neu geladen wird? Dann muss der Benutzer alle Ebenen neu aufklappen. Besser wäre es den Zustand direkt in einem Cookie zu speichern.

Außerdem ist es umständlich beim erzeugen der HTML Listen vorher wissen zu müssen ob es Unterebnen gibt oder nicht.

Sowas sollte direkt vom Script übernommen werden. Da gibt es schon seit Jahren bessere Lösungen.

Sam
Gast

@hieblmedia – danke für den Link. Witzig, dass ich hier zu einem gar-nicht-bass-thema auf ein solches Blog stosse :-)

dude
Gast

Schönes Tutorial :) aber mal eine Frage am Rande. warum immer nur jquery tutorials? Klar jquery ist ohne zweifel ein sehr gutes Javascript framework aber es gibt auch andere die gut sind. Wie wäre es mit mootools, Entwickler die darauf angewiesen sind oder die art und weise wie mootools Javascript nativ erweitert und die Ansätze der Sprach weiterverfolgt wird einfach besser finden.

thx vorab :)

Omar
Gast

musste einmal eine ähnliche Aufgabe aber nur mit einer Ebene und mit Ebenen-‘Speicher’ lösen und mit wordpress. Außerdem sollte nur ein Ast gleichzeitig geöffnet sein.

Vielleicht interessiert den ein oder anderen meine Lösung, die hier zu sehen ist:

http://www.edlabquip.com/products/

Für die Speicherung wird natürlich das Backend benutzt..

@dude: in meinen Augen ist jQuery ein sehr guter Ausgleich zwischen Lesbarkeit und einfacher Programmierung und Abstraktion.

@Brummel: ich finde auch, dass die css-Klassen, die vergeben werden müssen einen unnötigen Aufwand darstellen.

trackback

[…] Außerdem habe ich mir auch mal angeschaut wie man eine Baumstruktur-Navigation basteln kann und hab mich gleich daran versucht.  (Anleitung ) […]

wpDiscuz