Tabs auf die Seite einzubinden ist eine schöne Variante gruppiert Daten darzustellen. Nur stellt sich dabei die Frage wie man das einfach und schnell implementieren kann. Grundsätzlich bestehen zwei Varianten von Tabs. Bei der ersten Variante lädt man die komplette Seite neu und wird oft (oder sollte nur) bei einem Navigationsmenü verwendet (Siehe auch Yahoo User Interface Design Pattern ‘Navigation Tabs‘). Bei der zweiten Variante sind die Daten auf der Seite schon vorgeladen und es kann schnell zwischen den Tabs hin und her gesprungen werden (Siehe auch Yahoo User Interface Design Pattern ‘Module Tabs‘). Natürlich darf man an dieser Stelle Ajax nicht vergessen – bei der zweiten Variante ist es natürlich auch eine sehr schöne Variante wenn die einzelnen Daten der Tabs dynamisch nachgeladen werden.

Für die einzelnen Arten bestehen schon viele Lösungen, wie zum Beispiel bei der Yahoo User Interface Library die TabView Komponente oder für jQuery das Tabs Plugin. Ein weiteres sehr schönes Beispiel für die Implementierung von Tabs und deren Daten direkt auf der Seite liefert uns die JavaScript Bibliothek Control.Tabs, welche wiederum auf Prototype basiert. Im folgenden der Screenshot wie das fertige Tabs Beispiel aussieht, wobei das Layout natürlich von jedem selbst definierbar ist.

Das schöne an dieser Bibliothek ist der wenige Aufwand der betrieben werden muss um solche Tabs zu erstellen. Im folgenden Bild ist Source Code um die Tabs des eben gezeigten Beispiels darzustellen zu sehen und man merkt, dass sehr klein und übersichtlich ist:

Wenn man diese Art Tabs zu erstellen mit anderen vergleicht so ist das doch eine sehr schnelle und einfach Lösung ohne viel dafür tun zu müssen – außer natürlich die Bibliothek einzubinden. Diese kann man direkt hier herunterladen oder einfach die Seite der Bibliothek besuchen. Dort können diese Beispiele auch noch einmal live begutachtet werden.

Insgesamt eine wie ich finde sehr schöne und simple Lösung Tabs zu erstellen.

(Vielen Dank an Jörg Zintel für diese Info)