jQuery Tools – Teil 1: Tabs

jQuery ist mit Mootools und Prototype zusammen wohl die mächtigste und beste JavaScript Library die es momentan gibt. Damit alleine sind schon sehr schöne DOM (Document Object Model) Effekte möglich, jedoch für die meisten nicht so leicht einsetzbar, da doch etwas weitreichendere JavaScript Kenntnisse nötig sind.

Und genau da setzt jQuery Tools an – einmal als eigenständige Datei oder als Komplettpaket in Verbindung mit der jQuery Library auch wahlweise auf einem, von den Entwicklern bereitgestellten CDN (Content Distribution Network). So kann innerhalb von wenigen Sekunden jede Website durch schöne und sinnvolle Effekte aufgewertet werden.

Die jQuery Tools können hier heruntergeladen werden und bieten viele verschiedene Elemente um die eigene Seite durch Features in der Usability zu verbessern und optisch aufzuwerten – Tabs, Tooltips, Scrollable, Overlay, Expose und Flash Embed sind die Funktionen, welche die Library mit sich bringt. Was sich hinter den ganzen Begrifflichkeiten versteckt erläutere ich in dieser Reihe. Heute angefangen mit den Tabs, werde ich jeden Tag ein weiteres Element der jQuery Tools mitsamt Programmierbeispielen erläutern.

Tabs – für platzsparenden Content

Tabs sind seit einigen Jahren voll im Trend. Angefangen mit dem Mozilla Firefox welcher Tabs dazu nutzt um in nur einem Browserfenster möglichst viele Websites zu öffnen, ist es mittlerweile auch auf Websites gängig Tabs zu nutzen, um möglichst viel Content platzsparend unterzubringen.

Beispiele dafür findet man im Internet genug – Einsatzgebiete sind bevorzugt Klappmenüs oder aber um News, Suche und weiteres in einem Container zu verstecken und dem User nur das zu zeigen was er gerade benötigt.

Beispiele

tinto
Tintometer.de – Tabs werden hier genutzt um sehr viele Menüpunkte in einem Klappmenü unterzubringen.

aqua
AQUALYTIC.de – Hier werden mithilfe der Tabs die Suche, die News und die Produkte geschickt in einem Container versteckt. Der User bzw. Kunde hat schnellen Zugriff auf weitere Informationen.

ard
Sportschau.de – Die Programminformationen für die kommenden Tage sind durch Tabs in Szene gesetzt und somit sind die Informationen schnell und leicht abrufbar.

spox
Spox.com – Auch Spox benutzt Tabs um die vielen verschiedenen Sportarten zu unterteilen und dem jeweiligen Bereich die News schnell zur Verfügung zu stellen.

Der Einsatz von jQuery Tools

Durch jQuery Tools können die Tabs sehr leicht umgesetzt werden. Nur wenige Zeilen Code sind nötig und man hat ein wunderbares Ergebnis mit vielen Möglichkeiten der Individualisierung.

HTML
Der HTML Aufbau ist ziemlich einfach. Wir benötigen nur 2 Container. Einen mit den Links (Tab Buttons) und einen mit dem Inhalt der Tabs.

<ul class='tabs'>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tab-content">
<div>Tab 1 content</div>
<div>Tab 2 content</div>
<div>Tab 3 content</div>
</div>

JavaScript
Aber auch der JavaScript Teil ist nicht viel schwieriger. Nur eine einzige Funktion reicht um die Tabs umzusetzen. Es wird lediglich dem DOM Selektor mitgeteilt auf welchen Bereich er die Funktion anwenden soll. In diesem Beispiel dem HTML Element ul mit der Klasse tabs für die Navigation und die Container für das HTML Element div mit der Klasse tab-content und allen unterhalb liegenden div Containern.

$("ul.tabs").tabs("div.tab-content > div");

Aber auch weitere Parameter sind ohne weiteres möglich, so dass die Tabs den eigenen Wünschen sehr gut angepasst werden können.

$("ul.tabs").tabs("div.tab-content > div", {current: 'active', event: 'mouseover', effect: 'slide', fadeInSpeed: '500'});

In der geschwungenen Klammer {} werden die Parameter übergeben. Current gibt die Klasse bekannt die genutzt werden soll, wenn ein Tab aktiv ist. Event wird in diesem Fall genutzt um der Funktion mitzuteilen das sie bei einem Mouseover funktionieren soll und nicht bei einem Klick, wie gewöhnlich.

Effect stellt verschiedene Effekte aus der jQuery Library bereit, die der Programmierer nutzen kann um ein Tab zum Vorschein zu bringen. Standardmäßig wird hier nur zeigen und verstecken genutzt, aber alternativ können auch fade, slide und horizontal als Effekt hinzugefügt werden um eine schöne Animation zu zaubern. Der Parameter fadeInSpeed gibt die Dauer der Millisekunden an mit der die Animation durchgeführt werden soll. Dieser Wert sollte nach den eigenen Erfahrungen ausgefüllt werden.

Das ganze kann dann noch mithilfe von CSS optisch aufgewertet und den eigenen Wünschen weiter angepasst werden. Weitere Informationen und Parameter können der Entwickler-Seite entnommen werden.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

Kommentar schreiben