Sie sind nicht angemeldet.

[Codeschnipsel] Simple Base Tabs

Lieber Besucher, herzlich willkommen bei: BASE4U. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

1

Mittwoch, 11. Januar 2012, 16:02

Simple Base Tabs

Mit diesem PlugIn ist es ganz leicht Tabs darzustellen. Die Logik dahinter ist ganz leicht. Es lässt sich ganz schnell und einfach mit CSS/HTML anpassen. Ich habe versucht das PlugIn so leicht wie möglich zu halten und dabei versucht die Konfigurierbarkeit sehr groß zu gestalten. Denn ein PlugIn ohne viele Konfigurationsmöglichkeiten ist nicht viel Wert.



Im großen und ganzen gibt es folgende Optionen/Parameter:



Name Typ Standardwert Beschreibung
selected Ganze Zahl (integer) 0 Welcher Tab soll beim laden selektiert/ausgewählt werden! Startindex: 0
tabContent Zeichenkette (string) .tab-content In welchem Element befindet sich der Tab-Inhalt der einzelnen Tabs
activeClass Zeichenkette (string) active CSS-Klasse, wenn ein Tab ausgewählt/aktiv ist
listElement Zeichenkette (string) ul:first Liste die als Tabs/Reiter dargestellt werden soll (z. B. Erste UL-Element)
callback Funktionsname/Methodenname null Callback-Funktion: Wenn ein Tab aktiviert wird, wird diese aufgerufen (um z. B. Inhalt Dynamisch nachzuladen). WICHTIG: Funktionsname ohne Anführungszeichen und ohne Klammern angeben



Um eine Instanz der Tabs zu erzeugen kann man folgenden Code einsetzen:

Javascript-Quelltext

1
2
3
4
$(document).ready(function()
{
    $(".tabs").sbTabs(); //Erstellt eine neue Tab-Instanz
});


Dazu muss folgendes HTML-Gerüst vorliegen:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="tabs">
    
    <ul class="tabnavigation">
   	 
   	 <li class="active">
   		 <a href=".firsttab">
   			 <span>First Tab</span> <!-- Tab-Subject -->
   		 </a>
   	 </li>
   	 <li>
   		 <a href=".secondtab">
   			 <span>Second Tab</span> <!-- Tab-Subject -->
   		 </a>
   	 </li>
   	 
    </ul>
    
    <div class="tab-content">
    
   	 <div class="firsttab">
   		 First Tab Content
   	 </div>
   	 
   	 <div class="secondtab">
   		 Second Tab Content
   	 </div>
    
    </div>
   	 
</div>


Eine Online Demo wird noch eingefügt


PS: Momentan gibt es keine CSS-Datei die das ganze schön macht. Wer das PlugIn also verwendet, muss selbst designen. Wenn ich die Demo gemacht habe, kommt ein CSS-File dazu ;)


Voraussetzung ist natürlich JQuery



Ähnliche Themen