Hin und wieder nutze ich Dirk Ginaders Skript „Accessible Tabs„, das auch YAML beiliegt. Bislang habe ich mich dabei ganz ideenlos auf die normale Tab-Optik beschränkt. Doch das ist gar nicht nötig. Mit ein wenig CSS habe ich aus der traditionellen Tab-Optik eine kleine Slideshow gemacht.
Das Skript transformiert aus einer gegebenen Struktur eine Liste mit Links, die Inhalte ein- und ausblenden. Im Normalfall werden in einen Container Überschriften und darauffolgende DIV-Container geschachtelt. Die Überschriften werden zu Links in einer Liste, die DIV-Container umfassen den Inhalt, der mittels jQuery ein- und ausgeblendet wird. Die Grundstruktur kann folgendermassen aussehen:
<div class="tabs">
<h2>Überschrift</h2>
<div class="tabcontent">Inhalt</div>
<h2>Überschrift</h2>
<div class="tabcontent">Inhalt</div>
</div>Die Überschriftenhierarchie ist dabei flexibel. Man kann auch an Stelle einer Überschrift jeglichen anderen Tag (mit oder ohne Klasse) nutzen. Mir scheint der Sinn dieser Konstruktionen nach einer Überschrift zu verlangen.
Dirks jQuery-Skript transformiert den Code nun. Die Überschriften werden in eine Liste gepackt und mit Links versehen. Diese Links sorgen dafür, dass die zugehörigen Inhalte ein- und ausgeblendet werden können. Da es sich hierbei also nur um eine Liste handelt, können wir sehr viel mehr mit ihr anfangen, als sie nur als horizontale Reiter zu formatieren.
Ich habe mir mal den Spass gemacht, die Tabs neben die Inhalte zu platzieren. Die Bedienung erinnert an Slideshows. Allerdings ist diese Slideshow zugänglich und kann auch als Tab-Skript genutzt werden.
Die beiden, durch das Skript neu enstandenden Container „.tabs-list“ und „.content“ lasse ich floaten. Dadurch werden die Inhalte nebeneinander platziert. Der Container „.tabs“ umfasst mittels der Klasse „clearfix“ die Floats und bekommt einen leichten Schatten. Wenn ich auf diesen Schatten verzichten kann, kann ich an Stelle des clearfix-Hacks auch „overflow: hidden“ nutzen.
Ein Blick in den Quellcode der Testdatei dürfte alle Details erklären.
19. Juli 2011 um 10:41 Uhr
Hallo Jens,
ich bin gerade verblüfft, dass ich Dir zu diesem Beitrag den ersten Kommentar schreibe, denn ich finde Deinen Ansatz wirklich extrem spannend. Ich kenne genügend JavaScript-Slider, die allesamt Ihre Funktion vollständig verlieren, wenn JS ausgeschalten ist.
Die „Accessible Tabs“ als Ansatz für eine Slider-artige Darstellung zu verwenden, ist daher richtig Klasse, denn dessen Inhalte sind sowohl mit als auch ohne JavaScript auf Zugänglichkeit und sinnvolles Markup getrimmt. Und man braucht noch nichtmal ein neues Plugin, da die Modifikation bisher vollständig CSS-basiert ist.
Wir müssen uns dazu möglichst bald nochmal intensiver austauschen. Für den Moment, vielen Dank, dass Du diese Idee hier veröffentlicht hast.