Javascript zum Generieren von Tabs

von Oliver Richter (Kommentare: 0)

Das Bild zeigt die Tabs. Das erste Tab ist aktiv und wird angezeigt, die anderen sind ausgeblendet

Dieses Javascript, basierend auf Mootools Version 1.3.1, erzeugt eine Tabs aus Elementen mit einer bestimmten CSS-Klasse  und dazu das zugehörige Listen-Menü zum Durchklicken bzw. Aktivieren des jeweiligen Tabs.

Es wird immer nur der aktive Tab angezeigt, die anderen bleiben in der Zeit ausgeblendet. Zwischen den Tabs kann durch Klick oder durch Setzen des Fokus auf den Tab-Menüpunkt gewechselt werden. Die Steuerung mit der Tastatur sollte also gegeben sein.

Beachten Sie bitte: Ich benötigte auf die Schnelle ein einfaches Javascript zum Erstellen von Tabs. Das ist nun die hier vorliegende Version und sie ist sehr schlicht und einfach umgesetzt: Es werden beispielsweise keine "ordentlichen" Event-Handler definiert beim Erstellen der Link-Funktionen im Tab-Menü. Hier sollte Markup und Funktionalität besser getrennt werden.

Voraussetzungen

Mir war es hier wichtig, dass die Handhabung sehr einfach wird und man eigentlich nur noch die entsprechenden CSS-Klassen für die Tab-Elemente setzen muss. Der Rest, wie die Generierung des nötigen Tab-Menüs und der Funktionalitäten, sollte im Nachhinein druch das Skript passieren.
Das Markup muss folgende Struktur (achten Sie auf die vergebenen CSS-Klassen) aufweisen:

<p class="tab">Duis autem vel eum iriure dolo</p>

<p class="tab">Stet clita kasd gubergren, no sea</p> 

<p class="tab"> Duis autem vel eum iriure dolor</p>

Weiterhin benötigen Sie MooTools mindestens in der Version 1.3.1 oder höher. Binden Sie anschließend die Javascript-Klasse tabErsteller (tabersteller.class.js) und die Javascript-Datei (scripts.js) ein und auch ggf. die CSS-Datei, da in dieser CSS-Angaben definiert wurden.

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/mootools-core-1.3.1-full-compat.js"></script>
<script type="text/javascript" src="js/mootools.tabErsteller.js"></script> 
<script>
window.addEvent('domready', function() 
    { 
        var objInstanz = new tabErsteller.initialisieren( 
            { 
                tabActive: 3,
                tabNameArr: new Array ( "Details zum Produkt", "Bestellen" )
            });
    });
</script>

Demoseite und Code herunter laden

Sie finden die aktuellste Version der JavaScript-Klasse, sowie ein funktionstüchtiges Beispiel auf GitHub. 

Zurück

Einen Kommentar schreiben

Bitte rechnen Sie 1 plus 6.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.