Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 18. Juni 2009

Baumnavigation mit jQuery

Kein Beitragsbild

Die Baumnavigation ist jedem aus unzäh­li­gen Programmen bekannt, in denen sie haupt­säch­lich zur Dateiverwaltung ver­wen­det wird. Im Web wird sie eher sel­ten ver­wen­det und dann meist mit PHP erzeugt, was bei lan­gen Ladezeiten die Navigation sprö­de macht. Es geht aber auch anders, mit Hilfe von jQuery lässt sich ein­fach eine anspre­chen­de Baumnavigation erstel­len, die auch bei deak­ti­vier­tem JavaScript funk­ti­ons­fä­hig bleibt. Live Demo im neu­en Fenster

Die Baumstruktur

Die Baumansicht in Konqueror
Eine Baumansicht in Konqueror

Ein Baum ist, grob gesagt, eine Liste, in der jeder Eintrag belie­big vie­le Unterpunkte haben kann, die meist durch Klicken des Eintrages auf- oder zuge­klappt wer­den. Somit liegt es nahe eine Baumnavigation im Web als unsor­tier­te Liste zu struk­tu­rie­ren.

<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 ange­legt, meh­re­re Ebenen sind natür­lich nach dem glei­chen Schema ergän­zungs­fä­hig.

Um den Baum mit CSS ein­deu­tig anspre­chen zu kön­nen„ bekommt er die id=“baum”. Die Ebenen, die Unterpunkte ent­hal­ten und aus­ge­klappt wer­den kön­nen, sind durch einen span-Tag gekenn­zeich­net.

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

So erhal­ten wir eine Baumansicht im „Ausgeklappten Zustand“ auch für Nutzer mit deak­ti­vier­tem JavaScript.

Baum als Unsortierte Liste ohne Formatierung
Baum als unsor­tier­te Liste ohne Formatierung

Einsatz von JQuery

Bevor wir jQuery ein­set­zen kön­nen, müs­sen wir es  her­un­ter­la­den. Die aktu­el­le Version gibt es bei Google Code. Wir erhal­ten der­zeit die Datei jquery-1.3.2.min.js, die hier in den Ordner /js des Arbeitsverzeichnisses kopiert wird. Eingebunden wird jQuery nun durch fol­gen­den Befehl im head-Bereich ein­ge­bun­den.

<!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 begin­nen mit unse­rer Baum-Funktion.

Die Baum-Funktion

Wir erstel­len die Datei “Baumnavigation.js”, spei­chern sie im Ordner /js ab und bin­den sie mit fol­gen­dem 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 die­ser Zeile wird der Span-Tag aus­ge­wählt, den wir den auf­klapp­ba­ren Ebenen zuge­wie­sen haben, aus­ge­wählt, mit .next() das nächs­te Element im DOM und mit .hide() die­se ver­steckt. Somit wer­den nur noch die 1. Ebenen ange­zeigt.

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

Hier wird wie­der der Span-Tag aus­ge­wählt und mit .prepend(„+ “) ein Plus Zeichen INNERHALB die­ses Tags ein­ge­fügt. Hier kann auch eine Grafik ein­ge­fügt wer­den.

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

Um die aus­klapp­ba­ren Ebenen als sol­che bes­ser erkenn­bar zu machen, wird wie oben der Span-Tag aus­ge­wählt und für die­sen mit .css(„cursor“,“pointer“) der Mauszeiger auf die gewohn­te Hand mit zei­gen­dem Finger wie bei einem Link umge­stellt, sobald man mit der Maus dar­über­fährt.

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

Nun kom­men wir zur Ausklappfunktion, die mit .click(function(), wie sich ver­mu­ten lässt, aus­ge­führt wird, wenn man auf den Span-Tag klickt.

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

Innerhalb die­ser Funktion grei­fen wir mit $(this) auf den Span-Tag mit der Klasse “auf­klap­pen” zu. Mit next() wäh­len wir das nächs­te Element im DOM aus, da die­ses ange­zeigt oder aus­ge­blen­det wer­den soll. Die slideToggle()-Funktion lässt nun die Unterpunkte lang­sam nach unten „glei­tend“ erschei­nen. Mit dem Wert „slow“ wird die Geschwindigkeit die­ses Effekte fest­ge­legt. Mögliche Werte hier sind “slow”, “nor­mal”, 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 zuge­grif­fen, .prev(this) wählt von den Tag vor die­sem Span-Tag aus, also hier den Span-Tag mit dem Plus-Zeichen und mit .text() grei­fen wir auf den Text inner­halb die­ses Tags zu.
Wenn die­ser Text “+ ” ist, so wird mit

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

der gesam­te Tag ersetzt.

Durch das Entfallen der .text()-Funktion wird hier auf den gesam­ten Tag samt Inhalt zuge­grif­fen und durch einen neu­en Tag ersetzt, so wird aus dem Plus ein Minuszeichen. Der Rest der Schleife ist, den­ke ich, selbst­er­klä­rend, wenn der Text “+” ist, dann erset­ze ihn durch “–”,  wenn der Text “–” ist, erset­ze ihn durch “+”.

Das war schon alles, um den Baum zu „ani­mie­ren“. Nur die Darstellung ist nicht wirk­lich anspre­chend, des­halb erwei­tern wir das Beispiel noch um ein biss­chen CSS.

Baumansicht mit jQuery im Ausgeklappten Zustand ohne CSS Formatierung
Baumansicht mit jQuery im aus­ge­klapp­ten 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ön­nen wir nun per CSS ein­fach auf den Baum zugrei­fen und die ein­zel­nen Elemente gestal­ten. Auf die­se Weise erhal­ten wir eine ein­fa­che Baumnavigation die belie­big for­ma­tiert und gestal­tet wer­den kann und die auch ohne JavaScript und CSS  funk­ti­ons­fä­hig bleibt. (tm)

Baumnavigation mit CSS und jQuery teilweise ausgeklappt
Baumnavigation mit CSS und jQuery teil­wei­se aus­ge­klappt

Vollständig ausgeklappter Baum
Baumnavigation mit CSS und jQuery teil­wei­se aus­ge­klappt

Material zum Download

Marcel Weber

Student der Kommunikations- und Softwaretechnik

11 Kommentare

  1. muss­te ein­mal eine ähn­li­che Aufgabe aber nur mit einer Ebene und mit Ebenen-‘Speicher’ lösen und mit word­press. Außerdem soll­te nur ein Ast gleich­zei­tig geöff­net sein.

    Vielleicht inter­es­siert den ein oder ande­ren mei­ne Lösung, die hier zu sehen ist:

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

    Für die Speicherung wird natür­lich das Backend benutzt..

    @dude: in mei­nen Augen ist jQuery ein sehr guter Ausgleich zwi­schen Lesbarkeit und ein­fa­cher Programmierung und Abstraktion.

    @Brummel: ich fin­de auch, dass die css-Klassen, die ver­ge­ben wer­den müs­sen einen unnö­ti­gen Aufwand dar­stel­len.

  2. Schönes Tutorial :) aber mal eine Frage am Rande. war­um immer nur jque­ry tuto­ri­als? Klar jque­ry ist ohne zwei­fel ein sehr gutes Javascript frame­work aber es gibt auch ande­re die gut sind. Wie wäre es mit moo­tools, Entwickler die dar­auf ange­wie­sen sind oder die art und wei­se wie moo­tools Javascript nativ erwei­tert und die Ansätze der Sprach wei­ter­ver­folgt wird ein­fach bes­ser fin­den.

    thx vor­ab :)

  3. @hieblmedia – dan­ke für den Link. Witzig, dass ich hier zu einem gar-nicht-bass-the­ma auf ein sol­ches Blog stos­se :-)

  4. Die Lösung in die­sem Beispiel hier ist aller­dings ziem­lich umständ­lich.

    Was ist wenn die Seite neu gela­den wird? Dann muss der Benutzer alle Ebenen neu auf­klap­pen. Besser wäre es den Zustand direkt in einem Cookie zu spei­chern.

    Außerdem ist es umständ­lich beim erzeu­gen der HTML Listen vor­her wis­sen zu müs­sen ob es Unterebnen gibt oder nicht.

    Sowas soll­te direkt vom Script über­nom­men wer­den. Da gibt es schon seit Jahren bes­se­re Lösungen.

  5. Schließe mich mei­nem Vorredner an.
    Ein Plugin zu erklä­ren ist nicht zu ver­glei­chen mit einem Grundlagenartikel über Baumnavigation – und dann wird der Thread gleich zur Eigenwerbung miss­braucht – geht’s noch ??

    Herr Weber – wei­ter so, fun­diert, aus­führ­lich und ver­ständ­lich. Nur nicht unter­krie­gen las­sen ! :)

    @nuberg: Wenn alle Leute so den­ken wür­den wie sie, wäre das Rad doch nie erfun­den wor­den !

  6. Ich fin­de die­sen Artikel für Einsteiger sehr geeig­net. Er ist sehr aus­führ­lich, prak­tisch alles wird erklärt und ist mei­nes Erachtens auch ver­ständ­lich. Gleichzeitig lernt man hier noch etwas jQuery, auch wenn grund­le­gen­de Kenntnisse bereits vor­aus­ge­setzt wer­den, da z.B. auf das Chaining Prinzip von jQuery nicht ein­gan­gen wird.

    Ich freue mich auf die künf­ti­gen Beiträge von Herrn Weber, wenn er die­sem aus­führ­li­chen Stil treu bleibt. Und las­sen Sie sich nicht von den hier anwe­sen­den Miesepetern unter­but­tern, der Großteil sind Feiglinge.

  7. @nuberg

    Ein Artikel über die Features und wie man das Basisstance Plugin ein­bin­det, was es kann oder wie es läuft wäre hilf­rei­cher als die gan­ze Sache (mal wie­der) neu zu erfin­den.

  8. @hieblmedia:
    Dass Sie unter dem Beitrag eines Autors, der sich viel Mühe mit aus­führ­li­chen Erklärungen gemacht hat, mit kei­nem ein­zi­gen Wort dar­auf ein­ge­hen, son­dern nur bes­ser­wis­se­risch auf einen ande­ren Beitrag und auf Ihre eige­ne Website ver­wei­sen (und das auch noch als *ers­ter* Beiträger), ist in mei­nen Augen sehr schlech­ter Stil und zeugt von wenig Fingerspitzengefühl. Tut mir leid, aber das muss­te mal raus.

    @Marcel Weber:
    Vielen Dank für den inter­es­san­ten Artikel!
    Das ein­zi­ge, was ich ver­mis­se, ist die Möglichkeit, die Ebenen mit Unterpunkten auch über die Tastaturnavigation zu errei­chen, um vol­le Zugänglichkeit zu gewähr­leis­ten.

  9. ah sor­ry funzt doch

    ich = doof

  10. “die auch bei deak­ti­vier­tem JavaScript funk­ti­ons­fä­hig bleibt”

    funzt irnkwie nich

  11. Das jQuery Plugin Treeview macht dies auch mit eini­gen zusätz­li­chen Optionnen.

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.