Sie sind nicht angemeldet.

[Codeschnipsel] Simple Base Tabs

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 460

Aktivitätspunkte: 34 945

Wohnort: Dinkelsbühl City

Beruf: Anwendungsentwickler

  • Nachricht senden
720

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


.:: B4U Twitter ::.

Ähnliche Themen

Verwendete Tags

JavaScript, JQuery, JQuery Plugin, Register, Simle Base, Simple, Tab, Tabs

Zum Seitenanfang