Nach ein paar schönen Tagen im Bayrischen Oberstdorf, stell ich euch nun das nächste Tutorial bereit. Diesmal handelt es sich um eine simple Tab-Navigation mittels Mootools.
Tabs sind im Trend… moderne Browser nutzen sie, Photoshop CS4 nutzt sie und auch viele Websites sind mit dieser platzsparenden Art der Contentverwaltung ausgestattet.

Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.

Die Grundlage

Die Grundlage ist mal wieder Mootools 1.21. Diese muss natürlich im Header eingebunden werden, damit das Framework seine Tat vollziehen kann.

Javascript

Sobald die Seite fertig geladen ist, soll die Klasse .tab mittels CSS versteckt werden (display:none). Die ID #tab_1 soll jedoch erscheinen. Damit ist das erste Tab beim laden aktiv. Ich habe nun 3 Tabs angelegt und damit auch 3 Toggler (Schalter). Beim Klick auf die Toggler 1-3 wird ein Event ausgeführt, welches alle Tabs wieder versteckt und nur den Inhalt des jeweiligen angeklickten Tab anzeigt. Das wiederhole ich für alle Tabs. Sollten mehr Tabs gewünscht sein, müssen noch mehr Events hinzugefügt werden; natürlich mit fortlaufender Zahl beim Toggler und Tab.

window.addEvent('domready', function() {<br />
	$$('.tab').setStyle('display', 'none');<br />
        $('tab_1').setStyle('display', 'block');</p>
<p>        $('toggler_1').addEvent('click', function(a){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_1').setStyle('display', 'block');<br />
        });<br />
        $('toggler_2').addEvent('click', function(b){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_2').setStyle('display', 'block');<br />
        });<br />
        $('toggler_3').addEvent('click', function(c){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_3').setStyle('display', 'block');<br />
        });<br />
    });

HTML

Der HTML Code ist ziemlich einfach. Erst ein paar Links als Toggler für die verschiedenen Tabs und darunter in den div Containern den Content der Tabs.

<ul>
    <li><a href='#' class="toggler" id='toggler_1'>News</a></li>
    <li><a href='#' class="toggler" id='toggler_2'>Kommentare</a></li>
    <li><a href='#' class="toggler" id='toggler_3'>Suche</a></li>
</ul>
<div class="tab" id="tab_1">
    Das sind die News!
</div>
<div class="tab" id="tab_2">
    Und das die Kommentare...
</div>
<div class="tab" id="tab_3">
    Hier kannst du suchen...
</div>
<p>

CSS

Nun machen wir das Ganze noch ein klein wenig hübscher. CSS sei dank ist das ziemlich leicht zu bewerkstelligen. Ich lege in diesem Fall die Links alle durch display:inline nebeneinander, entferne den Listenpunkt und spiele ein wenig mit den Farben und Abständen.

ul li{<br />
    display:inline;<br />
    list-item:none;<br />
    border:1px solid #444444;<br />
    background-color:#cccccc;<br />
    padding:2px;<br />
    margin:1px;<br />
}

Zum Schluss

Die Tabs können natürlich mit allem Möglichen gefüttert werden. Das kann z.B. ein Suchfeld sein, eine MySQL Abfrage zur Ausgabe der News mit PHP oder aber eben auch die letzten Kommentare von Wordpress als Widget.

Tags: CSS, HTML, JavaScript, Mootools, Tabs, Tutorial