Tabs mit Mootools

mootoolsNach 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.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

8 Kommentare zu "Tabs mit Mootools"

jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign)

Mootools … FX.Slide, wie auf ende einer animation warten?…

Ist zwar schon alt, aber f……

Stefan 18. Sep 2009 um 02:04 Uhr

Hallo Andre,

schau mal hier : http://digitarald.de/project/simple-tabs/

ciao, Stefan

André 19. Sep 2009 um 10:30 Uhr

Hi Stefan,
die Simple-Tabs kenn ich. Ich wollte nur darstellen wie man es händisch selbst entwickeln kann. Viele haben Lust die volle Kontrolle über ihren eigenen Code zu haben.
Trotzdem vielen Dank für den Link!

Gruß

Florian 26. Nov 2009 um 09:32 Uhr

Hallo André,
danke für die einfache Erklärung. Finde ich persönlich sehr nützlich, kann man häufig gebrauchen wenn man gerade nicht auf etwas vorgefertigtes zurück greifen will!
Gruß
Florian

Daniel 10. Mrz 2010 um 08:32 Uhr

Hallo André,

danke auch von mir. Ich habe das Problem das beim anklicken
eines tabs die Browseransicht wieder nach oben, an den Seitenanfang springt.
Wie kann ich das lösen?

Maik 11. Jun 2010 um 17:37 Uhr

Ich sehe bei deiner und vielen anderen Lösungen einen gravierenden Mangel: Die Semantik der zugrunde liegenden Information geht völlig verloren. Wie soll ein Textreader (=>Google) oder auch ein Mensch mit Screenreader als Hilfe den Zusammenhang zwischen Titel eines Bereichs und dessen Inhalt herstellen? Durch die Fixierung auf das Ergebnis (Tabs) anstelle des Markups entstehen leider immer wieder solche Lösungen…

Yokohama 05. Nov 2010 um 17:03 Uhr

Ich suche ein Plugin für so etwas. Irgendjemand eine Ahnung was gut funktioniert? Bei der Integration der Motools habe ich die Befürchtung, dass es wieder die Ladezeit der Seite verlängert.

Martin 02. Dez 2010 um 22:06 Uhr

Danke, hat mir geholfen :)

Kommentar schreiben