mootools – “SmartTabs” : Tab-Klasse / Tabbing für semantisch korrekt ausgezeichnetes XHTML

Ich habe mit mootools 1.0 eine kleine Tab-Klasse geschrieben, welche Tabs auch aus Listen erzeugen kann, damit das XHTML semantisch korrekt bleibt und somit auch für Screenreader der Inhalt schlüssig angeordnet ist.

Andere Scripts die ich bis jetzt fand, funktionierten meist überhaupt nicht, wenn Javascript ausgeschalten war oder die Überschriften und zugehörige Inhalte waren semantisch nicht korrekt angeordnet.

Ich prüfe momentan noch, ob die Klasse unter mootools 1.1 läuft und dann werde ich sie hier für jedermann verfügbar veröffentlichen. Die Klasse läuft problemlos ab mootools 1.0 :)

Kurzinfo:

  • Tabs mit Javascript/mootools
  • Größe: ca. 4,3 kB
  • basiert auf Framwork: mootools 1.0/1.1
  • Lizenz: MIT

Features:

  • Tabs aus Listen erzeugen
  • mehrere Tabs auf einer Seite problemlos
  • onActive und onBackground Callback Funktionen für z.B. Animation beim Tabwechsel
  • Klasse “json” kann als Javascript-Flag an den Body gehangen werden, um per CSS die Inhalte auch ohne Javascript fein darstellen zu können
  • Tabbing auch per Links in den Tabs möglich

ToDo’s:

  • Tabs in Tabs schachteln
  • Links außerhalb der Tabs steuern Tabbing
  • Links die Tabbing steuern generell verbessern/erweitern

Download:

Initialisierung:

var props = {scope: ".highslide-html",baseulSelector: ".tabbed",contentSelector: ".tabcontent",togglerSelector: ".tabbed li.tabtoggler",activeTabClass: "active", insertAsListItem: "li",addJsFlag: true};
var tabnow = new tabs(props);

Eine kleine Doku sowie Beispiele folgen demnächst. Wer findig ist, kann die Klasse schon nutzen oder schreibt mir einfach.

Es würde mich freuen wenn Du einen Kommentar hinterlässt wenn Du SmartTabs verwendest.
Ansonsten sind Verbesserungsvorschläge gern willkommen.

2 Kommentare

  1. mediavrog
    mediavrog Januar 9, 2008 9:49   Antworten

    Hallo Axel,

    du hast natürlich Recht mit Kommentaren und Doku.. die Klasse ist eben nebenbei entstanden und ich hab leider sehr wenig Zeit momentan um mich um diese Skripte zu kümmern.

    Wegen dem Problem mit dem ContentType schau ich mich mal um…danke für den Hinweis.

    Grüße
    Maik

  2. Axel Januar 9, 2008 7:43   Antworten

    Doku und Beispiele wären schon sehr hilfreich gewesen…

    Hier ein kleines Beispiel:

    Tab 1xxx
    Tab 2yyy

    Wird die Seite als “Content-type: application/xhtml+xml;” statt “Content-type: text/html;” ausgeliefert, funktioniert die Klasse nicht (auch nicht in den Browsern, die ansonsten mit diesem Typ keine Probleme haben…)

Einen Kommentar hinterlassen