Anzeige
Tutorialbeschreibung

jQuery - Tabs/Registerkarten anlegen

jQuery - Tabs/Registerkarten anlegen

Auf immer mehr Webseiten findet man die sogenannten Tabs. Solche Tabs sind nichts anderes als Registerkarten, über die verschiedene Inhalte ein- und ausgeblendet werden können. Das Besondere an der in diesem Tutorial vorgestellten Lösung: Die Inhalte, die sich hinter den jeweiligen Registerkarten verbergen, sind bereits geladen. Somit kann zwischen den einzelnen Tabs hin- und hergewechselt werden, ohne dass die Webseite neu geladen werden muss. Neben einem klassischen Skript wird in diesem Tutorial auch eins gezeigt, das für solche Webseite interessant ist, die sich der Zugänglichkeit verpflichtet haben, die also barrierefrei arbeiten.


Dass Registerkarten bzw. Tabs auf Webseiten immer beliebter werden, hat gute Gründe. Denn schließlich kann man auf diese Weise Inhalte übersichtlich und vor allem platzsparend präsentieren.

Bilder



 
Solche Registerkarten lassen sich mit einer Kombination aus HTML, CSS und jQuery vergleichsweise einfach erstellen. Als Basis dient dabei eine ungeordnete Liste, in der die einzelnen Registerkarten definiert sind. Unterhalb dieser Liste kann man dann die Inhalte der eigentlichen Tabs anlegen.

Im einfachsten Fall sieht das Ganze folgendermaßen aus:

[Beispiel anzeigen]
<div class="tabs">
   <ul class="navi">
     <li><a href="#eins">Registerkarte 1</a></li>
     <li><a href="#zwei">Registerkarte 2</a></li>
     <li><a href="#drei">Registerkarte 3</a></li>
     <li><a href="#vier">Registerkarte 4</a></li>
   </ul>
   <div id="eins">
     <p>Inhalt des ersten Registers.</p>
   </div>
   <div id="zwei">
     <p>Inhalt des zweiten Registers.</p>
   </div>
   <div id="drei">
     <p>Inhalt des dritten Registers.</p>
   </div>
    <div id="vier">
     <p>Inhalt des vierten Registers.</p>
   </div>
</div>

Sieht man sich das Ergebnis jetzt im Browser an, erinnert zunächst einmal nicht allzu viel an Registerkarten.

Bilder



 
Um das Ganze zu gestalten, fehlt einiges an CSS-Syntax. Im vorliegenden Fall könnte diese folgendermaßen aussehen:

[Beispiel anzeigen]
<style type="text/css">
 <!--
 ul.navi {
             list-style: none;
             margin: 0;
             padding: 0;
 }
 ul.navi li {
             display: inline;
 }
 ul.navi li a {
             padding: 3px 5px;
             background-color: #ccc;
             color: #000;
             text-decoration: none;
 }
 ul.navi li a.selected,  ul.navi li a:hover {
             background-color: #333;
             color: #fff;
             padding-top: 7px;
 }
 ul.navi li a:focus {
             outline: 0;
 }
 div.tabs > div {
             padding: 5px;
             margin-top: 3px;
             border: 2px solid #333;
 }
 #eins {
             background-color:#00FF66;
 }
 #zwei {
             background-color:#CC3366;
 }
 #drei {
             background-color:#CCCC99;
 }
 #vier {
             background-color:#FFFFCC;
 }
 -->
 </style>

 
Wenn Sie sich das Ergebnis im Browser ansehen, werden Sie erkennen, dass das jetzt bereits an Registerkarten erinnert. Allerdings werden momentan noch alle Inhalte bzw. Registerkarteninhalte untereinander und parallel angezeigt.

Bilder



Um das zu ändern, wird auf jQuery zurückgegriffen. Binden Sie dafür zunächst das Framework auf die bekannte Art und Weise ein.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Anschließend wird das Skript definiert. Im einfachsten Fall könnte das folgendermaßen aussehen:

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
     var bereich = $('div.tabs > div');
     
     $('div.tabs ul.navi a').click(function () {
         bereich.hide().filter(this.hash).show();
         
         $('div.tabs ul.navi a').removeClass('selected');
         $(this).addClass('selected');
         
         return false;
     }).filter(':first').click();
 });
 /* ]]> */
 </script>

 
Entscheidend sind die hier beiden Anweisungen hide() und show(). Denn diese sorgen dafür, dass Bereiche ein- und ausgeblendet werden. Das geschieht jeweils in dem Moment, in dem ein Hyperlink (also eine Registerkarte) angeklickt wird. Über removeClass() wird die Klasse selected von den nicht aktiven Tabs gelöscht. Über addClass() wird diese Klasse dem aktiven Tab hinzugefügt.

Bilder



 
Im Zusammenhang mit den Registerkarten taucht früher oder später die Frage nach der Zugänglichkeit auf. Denn leider sind nur die wenigsten Registerkarten-Skripte tatsächlich barrierefrei, können also beispielsweise mit einem Screenreader gelesen werden. Mittlerweile gibt es verschiedene Plug-ins für jQuery, mit denen man tatsächlich zugängliche Tabs umsetzen kann. Eines der bekanntesten (und sicherlich auch besten) dieser Plug-ins ist Accessible Tabs.

Bilder



 
Was aber macht dieses Tab-Skript zu etwas Besonderem? Bei herkömmlichen Tab-Skripten gibt es quasi keinerlei Rückmeldung an den Benutzer. Meistens wird lediglich das Aussehen der Tabs und deren Sichtbarkeit geändert, für die Anwender selbst ändert sich jedoch nichts. Genau hier setzt Accessible Tabs an. Dieses Plug-in liefert an Newsreader eine Rückmeldung, wenn auf einen Link/Tab geklickt wird. Denn jeder Link führt hier tatsächlich zu einem Inhalt. Zusätzlich wird auf den jeweiligen Tabs ein Text untergebracht, der die Anwender darüber informiert, auf welchem Tab sie sich gerade befinden.

Das Plug-in ist sehr einfach nutzbar. Zunächst braucht man eine (übrigens sehr einfache) HTML-Struktur.

[Beispiel anzeigen]
<div class="tabs">
         <h2>eine Beispielüberschrift</h2>
         <div class="tabbody">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
             <h3>Lorem ipsum</h3>
             <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
         </div>
         <h2>noch eine Beispielüberschrift</h2>
         <div class="tabbody">
             <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
             <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
         </div>
         <h2>alles andere</h2>
         <div class="tabbody">
             <p>Hier könnte Ihr Inhalt stehen</p>
         </div>
</div>

Innerhalb der h2-Elemente stehen jeweils die Tab-Überschriften. Die Inhalte der jeweiligen Registerkarten werden innerhalb der div-Elemente angegeben. Auch das muss natürlich wieder mit entsprechender CSS-Syntax gestaltet werden. (Wie das funktioniert, wurde eingangs dieses Tutorials bereits anhand eines anderen Beispiels gezeigt. Zusätzlich finden Sie unter http://blog.ginader.de/dev/jquery/tabs/1.7/index.php zahlreiche Beispiele, die das notwendige Vorgehen noch einmal zeigen.)


Wie üblich, muss nun zunächst jQuery eingebunden werden. Anschließend ruft man das Plug-in auf.
<script src="jquery-1.3.1.js" type="text/javascript"></script> 
<script src="jquery.tabs.js" type="text/javascript"></script> 

Im einfachsten Fall wird das Plug-in folgendermaßen eingesetzt:
$(document).ready(function(){
 $('.tabs').accessibleTabs();
});
  

Neben dieser Standardkonfiguration hält das Plug-in noch zahlreiche Parameter bereit, über die sich das Plug-in-Verhalten detailliert steuern lässt. Hier die zur Verfügung stehenden Optionen.
 $('.tabs').accessibleTabs({
     // Der Name der Klasse, die dem Div zugewiesen 
     // welche um das Markup herumgeschrieben wird
     wrapperClass: 'content', 
     // Der Name der Klasse, die das aktuelle Tab markiert
     currentClass: 'current', 
     // Tag oder valider Query Selector der Elemente,  
     // aus denen die Tabs-Navigation erzeugt wird 
     // (die Originale werden entfernt)
     tabhead: 'h4', 
     // Tag oder valider Query Selector der Elemente, die 
     // als Inhalte der Tabs genutzt werden sollen
     tabbody: '.tabbody', 
     // Anzeigeeffekte:  'fadeIn', 'slideDown' oder 'show'
     fx:'show',
     // Geschwindigkeit (String|Number): 'slow', 'normal', oder 'fast')
     // oder die Milisekunden, die die Anzeigeeffekte dauern sollen
     fxspeed: 'normal',
     // Text um Screenreadern anzuzeigen, welches der ausgewählte Tab ist 
     currentInfoText: 'current tab: ',
     // Definition, wo der Text eingefügt wird
     // Entwender 'prepend' oder 'append'
     currentInfoPosition: 'prepend', 
     // Klasse des span mit dem Infotext
     currentInfoClass: 'current-info' 
 });

Wenn Sie sich für den Einsatz dieses Plug-ins interessieren, finden Sie unter http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.php ausführliche Informationen. Dort wird auch beschrieben, was genau die Entwickler zum Programmieren dieses Plug-ins bewegt hat und welche technischen Innovationen sich außerdem in diesem Plug-in verbergen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Crivens
  • 13.06.2011 - 21:22

Super Tutorial! Hab schon ewig nach einer solchen Lösung gesucht! Vielen Dank!

Portrait von S_A_M
  • 25.09.2010 - 09:40

Gutes Tut - besonders die "Lösung" bzgl. der Barrierefreiheit. Danke.

Portrait von hampipower
  • 19.09.2010 - 12:08

Sehr gutes Tutorial. Vielen Dank

Portrait von websmurf
  • 17.09.2010 - 14:23

Gutes Tutorial. Der Ansatz von Accessible Tabs gefällt mir sehr gut.

Portrait von tooz4di
  • 14.09.2010 - 08:51

Hallo, ich bin zwar ein blutiger Anfänger im PHP Bereich, aber ich finde es ein tolles Tutorial. Super...

Portrait von fcbfan
  • 13.09.2010 - 18:25

Schönes Tutorial. Trotzdem vermisse ich die Arbeitsdateien :(

Portrait von mistab
  • 13.09.2010 - 14:55

Ah perfekt! Genau was ich gesucht habe. Vielen Dank!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.09.2010 - 11:28

Tolle Sache! Ich hatte schon vor in ein paar zukünftigen Seiten diese Mezhode der Inhaltsdarstellung zu verwenden und werde somit demnächst dieses Tutorial genauer studieren. Schön das hier mal jemand dieses Thema aufgreift!

x
×
×