Kategorien
JavaScript & jQuery Programmierung

Tabulous.js: Beliebige Inhalte in Tabs organisieren per jQuery

Aaron Lumsden aus der englischen Grafschaft West-Yorkshire liebt jQuery. Erst vor vier Wochen stellten wir hier bei Dr. Web sein Plugin Progression.js vor, das das Ausfüllen unvermeidlicher Formulare erleichtert. Heute fiel mir ein weiteres nützliches Plugin aus seiner Feder in den Schoß. Mit Tabulous.js kann beliebiger Content auf einfache Weise in Tab-Containern untergebracht und mit zeitgemäßen Effekten zur Anzeige gebracht werden.

tabulous-js-start

Tabulous.js: Vielfältige Effekte, einfache Verwendung

Ob man die Herangehensweise Lumsdens mag oder nicht ist sicherlich Geschmackssache. Manch einer verwendet lieber ausgewachsene Frameworks, die mehr Features bieten, als man in einem normalen Projekt benötigt, dafür aber eine homogene Umsetzung gewährleisten. Andere, wie Lumsden (und ich), setzen auf kleine spezialisierte Tools, die man im Zweifel kumuliert einsetzt, bis das Funktionalitäts-Level erreicht ist, das dem Projektziel entspricht.

tabulous-action

Tabulous.js erfüllt genau einen einzigen Zweck. Es erlaubt, beliebige Inhalte in div zu organisieren und mit Karteireiter-Navigation versehen zu präsentieren. Verschiedene Effekte sorgen für eine moderne Anmutung. So lassen sich Inhalte etwa von der Seite her einschieben oder per Flip-Effekt wechseln.

Die Einbindung ist jQuery-typisch simpel. Da es lediglich eine einzelne Variable, nämlich den effect gibt, gerät der Funktionsaufruf nicht zur Scripting-Orgie. Nachdem jQuery und das Plugin nebst zugehörigem CSS eingebettet sind, gilt es ein mehrfach verschachteltes div zu erstellen, dessen oberste Ebene die ID tabserhält.

So kann das aussehen:


Danach gilt es dann lediglich noch, den Funktionsaufruf zu starten:

$('#tabs').tabulous({
    	effect: 'scale'
    });	

In diesem Beispiel habe ich die Variable effect verwendet, die dafür sorgt, dass der Content in unterschiedlicher Weise ein- und ausanimiert wird. Die Variable ist optional. Mehr gibt es nicht zu sagen.

Tabulous.js ist ein einfaches, kleines Tool, das in nahezu idealer Weise den selbstgesetzten Zweck erfüllt und bei mir bereits spontan in einem Projekt Verwendung gefunden hat. Tabulous.js steht kostenfrei auf Github zum Download bereit und kann privat, wie kommerziell unter MIT-Lizenz eingesetzt werden.

Links zum Beitrag