Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 19. Juli 2013

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.

Anzeige

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

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

6 Kommentare

  1. Funktioniert eigentlich prima, bis aufs iPhone. Da wird auf den ersten „Fingertap“ kein Inhalt angezeigt. Egal welchen Tab man tappt, erst beim zweiten mal kommt wieder Inhalt? Hat da schon mal jemand eine Lösung gefunden?

  2. Google-Chrome:
    Ich kriege eine Malware-Warnung. Deshalb werde ich die Seite mal nicht öffnen. :) Aber sieht trotzdem sehr hübsch aus! Werde ich mir anschauen, wenn die Warnung weg ist.

  3. Sieht sehr einfach aus, bei mir funktioniert das allerdings nicht.

  4. Ich frage mich wieviele Leute noch auf den „Demo“ Button geklickt haben und dann irritiert waren wieso ein Bild aufgeht.

Schreibe einen Kommentar

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