3x bewertet

JavaScript Tabifier

von Papierherz  |  28.03.2010 um 05:56 h
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Einfach
Ein neues Tutorial mit dem ich einen Wunsch erfülle (ich hoffe zufriedenstellend) (:

Was Du brauchst:
Die Datei von barelyfitz.com


Nachdem ihr die Datei runtergeladen habt binden wir folgenden teil in den Head bereich unserer Seite ein :

<script type="text/javascript" src="tabber.js"></script>

Kommen wir nun zum CSS Teil indem wir das Aussehen unserer Tabs anpassen ;)

/****** Tabbertab style */

.tabberlive .tabbertabhide {
display:none;}

.tabber {}
.tabberlive {margin-top:1em;}


/*******Horizontale Linie*/
ul.tabbernav{
margin:0;
padding: 2px 0;
border-bottom: 0px solid #fff;
font: 7pt verdana;}

ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;}


/*******Tabber nicht ausgewählt*/
ul.tabbernav li a{
padding: 2px 0.5em;
margin-left: 4px;
font: 7pt verdana;
background-color: #eaead8;
border: 1px solid #e1e1be;
text-decoration: none;}


/*******Links*/
ul.tabbernav li a:link { color: #cb7206; text-transform: none;}
ul.tabbernav li a:visited { color: #cb7206; text-transform: none;}
ul.tabbernav li a:hover{ color: #5f4801; text-transform: none;}


/*******Tabber aktuell*/
ul.tabbernav li.tabberactive a{
color: #cb7206;
font: 7pt verdana;
background-color: #eaead8;
border: 1px solid #e1e1be;}


/*******Tabber-Hover*/
ul.tabbernav li.tabberactive a:hover{
color: #5f4801;
font: 7pt verdana;
background: #eaead8;
border: 1px solid #e1e1be;}


.tabberlive .tabbertab {
padding:5px;
border-bottom:0px;}


.tabberlive .tabbertab h2 {
display:none;}

.tabberlive .tabbertab h3 {
display:none;}


.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;}

Ich denke die Kommentare in der CSS erklären alles notwenige, solltet ihr euch die Zip Datei runtergeladen haben habt ihr dort auch die example.css Datei indem ihr euch die Codes nochmal genauer anschauen könnt.

Nun müssen wir das ganze nur noch einbauen, der Code dazu sieht folgendermaßen aus :

<div class="tabber">

<div class="tabbertab" title="Tab 01">
Hier kommt der Inhalt von Tab Nummer 1 rein.
</div>

<div class="tabbertab" title="Tab 02">
Hier kommt der Inhalt von Tab Nummer 2 rein.
</div>

<div class="tabbertab" title="Tab 03">
Hier kommt der Inhalt von Tab Nummer 3 rein.
</div>

</div>

Eine Demo dessen könnt ihr euch HIER anschauen Smilie



7 Kommentare




Maron

Wirklich gut beschrieben und ich find den Effekt auch schön
Auch schön, wie du ihn auf deiner Seite angewendet hast.
am 28.03.2010 um 16:22 Uhr


SmaX

Ein bisschen mehr hättest Du dazu schon erklären können! Außerdem hat schon jemand zuvor ein ähnliches Tutorial gepostet.
am 28.03.2010 um 20:29 Uhr


PascalErorr

@Smax wie du schon sagtest ein "Ähnliches" was mir nicht gefällt weils so viel code ist, hier sieht man das es auch mit weniger geht. Gut erklärungen fehlen aber das Gefällt mir besser ;D

Lg Pascal
am 29.03.2010 um 17:56 Uhr


SmaX

@pascalerorr: in diesem Beispiel ist sogar mehr Code, denn im vorherigen wurde der jQuery code mitgepostet und wurde der Javascriptcode nicht mitgepostet. "das Gefällt mir besser" - ja jeder wie ′ers meint.

MfG SmaX
am 29.03.2010 um 18:06 Uhr


SmaX

*ich meinte hier wurde der Javascriptcode nicht mitgepostet.
am 29.03.2010 um 18:06 Uhr


Papierherz

Dankeschön für Lob & Kritik ˆ_ˆ Das es schon ein ähnliches Tutorial gibt wusste ich aber wie schon zu Anfang des Tutorials geschrieben wollte ich hiermit einen Wunsch aus Wishlist erfüllen Smilie

Was das posten des Javascriptcode bringen soll verstehe ich ehrlich gesagt nicht, denn diese Datei wird runtergeladen und dann wie beschrieben im Head Bereich eingefügt.
am 02.04.2010 um 23:50 Uhr


Miss_Jennii

Danke danke danke *-* Mein tutorialwunsch *-*
am 02.09.2010 um 23:50 Uhr