Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von Crivens

    Crivens

    13.06.2011 - 21:22

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

  • Portrait von S_A_M

    S_A_M

    25.09.2010 - 09:40

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

  • Alternative Portrait von hampipower

    hampipower

    19.09.2010 - 12:08

    Sehr gutes Tutorial. Vielen Dank

  • Alternative Portrait von websmurf

    websmurf

    17.09.2010 - 14:23

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

  • Alternative Portrait von tooz4di

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

  • Alternative Portrait von fcbfan

    fcbfan

    13.09.2010 - 18:25

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

  • Alternative Portrait von mistab

    mistab

    13.09.2010 - 14:55

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

  • Alternative Portrait

    User hat PSD-Tutorials.de 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!

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.
vBulletin 0.044 • ZF-App 0.571 • Total 0.615