Silke Schümann wrote this 13:54:
Manchmal will man auf der Seite aufräumen, z.B. wenn man per iFrame sich bereits sehr komplexe zwei Seiten gegenüberstellt, wie google-Transation und ein Formular das in diversen Sprachen ausgefüllt werden soll. In meinem Fall waren das dann 22 iFrames jeweils 11 Mal gegenübergestellt. Also habe ich nach Tab-Navigation im Netz gesucht. Rausgekommen ist:
Nachdem unter den Treffern schon 25 Treffer über eine Tabnavigation-Sammlung in einem Blog ist und unter den Suchtreffern auch noch andere die Liste wiederholen, konnte ich schon nach der ersten Ergebnisseite aufhören zu suchen.
Zwei aus der Liste mit den 25 Varianten gibt es zwei die mich besonders beeindruckt haben. Zum Einsatz ziehe ich für meinen Fall aber nur eines in Betracht.
Nodetraveller hat unter Module Tabs eine beeindruckende Funktionalität der Tabs aber ohne Javascript zickte die Seite bei mir und war so gar nicht unobtrusive.
Einfach, übersichtlich, valide, funktional und vor allem unobtrusive erwies sich DOMTab – Navigation tabs with CSS and DOMscripting auf Onlinetools.org
Das hier noch aufgeführte Tab-Menu YETTII fehlt in der Liste der 25, wurd in Smashing Magazin unter 75 really useful Javascript techniques gefeatured, weil es von der Funktionalität ebenfall durchaus beeindruckt, aber wie auch schon die Tabnavigation von Nodetraveller nicht wirklich auf sein Javascript verzichten kann und fällt damit bei meinen strengen Vorgaben durch.
Ebenfalls beeindruckend, um seine Navigation rassig und nützlich (weil informativ) aufzumotzen fand ich übrigens das Beispiel von Dynamic Drive unter DD Tab Menu (5 styles) Das zublenden von Linkerläuterungen ohne die Informationen in die Linkliste reinzupressen macht es für die meisten CMS-Tools leicht integrierbar.
Nachtrag: Seufz – nehmen wir noch die Liste mit den 37+ Great Ajax, CSS Tab-Based Interfaces hier auf … auch wenn sich der eine oder andere Link natürlich wiederholt und dann lass ich es aber besser gut sein und implementiere die DOMTABs in mein 11-sprachiges SPRD-Design-Publikations-Monstrum.
Nachtrag 2: Manche nachteile zeigen sich erst, wenn man die Demo im echten Leben umsetzen will, so verschluckt das DOMtab nested DIVs. DAs ist natürlich ein böses nogo. Aktuell arbeite ich wenig erfolgreich daran, das “getElmenetByID(DIV)” mit der Funktion getElementByClassName(el,class) (Fundstelle: Your Favourite getElementsByClassName) im Script zu ersetzen. um nur noch DIVs auszublenden, die eine entsprechende Klasse mitführen. Das Ergebnis stelle ich dann hier vor. Natürlich könnte man auch im Netz eine fertige Lösung suchen, aber hey … ein Skript überarbeiten schult ungemein. Da will ich mich ein wenig mit Javascript quälen, zwischen all den anderen Aufgaben, die meine Zeitplanung aktuell bestimmen. 
Nachtrag 3: Planänderung: nachdem ich mich erst wieder in objektorientiertes Javascript einarbeiten müsste und das Netz nicht selten irgendwo, Probleme längst gelöst hat, habe ich mich dann doch noch einmal umgesehen und wurde fündig. Unbtrusive und eine Klasse bestimmt was zum Inhalt der Registerkarte zählt. Auch wenn ich noch nicht den Test gemacht habe. Der erste Eindruck ist jedenfalls beeindruckend und einen Linktipp wert:
… and the winner is …
Standalone Unobtrusive Tabs Script: SimpleTabs By Komrade.
öps … öh … dieser Winner muss auch überarbeitet werden. Siehe Kritik im nachfolgenden Artikel “Unobtrusive JavaScript Rules”. Jajajaja ….
Filed under: 1001 Linktipp, Programmierung
1 Comment
.
