Das Skript ist recht groß, hat aber seine Vorzüge! Nachdem ich es im neuen Xobor (v6) und den anderen Templates ausprobiert und gesehen habe was es macht, wollte ich es hier nochmal hervorheben und genauer beschreiben! Es ermöglicht auch den minimalen Aufbau des TAB-Menüs! Durch hinzufügen der fehlenden Hintergrundfarben für TAB und Titelleiste, sieht es richtig gut aus! Für die Templates (v2-4) sind Korrekturen notwendig, damit die TABs in allen Bereichen der Iconbar an der richtigen Position stehen und nicht zu hoch oder zu weit links stehen! Im Standard-Template und Xobor (v6) sind so gut wie keine Änderungen erforderlich! Die CSS ist nochmals minimiert, um auch farbliche Änderungen leichter durchzuführen!
Was kann das Skript:
Minimierte und einfachste Gestaltung der Foren-Codes (BB-Codes)! Abstände zwischen den Foren-Codes verändern in keinster Weise die Struktur des TAB-Menüs und verbessern somit die Übersicht!
Unbegrenzte Anzahl der TABs und Menüs auf einer Seite!
Animation beim Wechseln der TABs auswählbar!
Kann überall da eingesetzt werde, wo die Iconbar installiert ist!
TAB 1 ist beim Start immer geöffnet!
Funktioniert in allen Templates!
Installation: Zusammenfassung aller Templates
HTML
Neue Foren-Codes
CSS
JavaScript
Bilder
Um sich einen Eindruck zu verschaffen, wie das TAB-Menü aufgebaut ist, hier das HTML-Script! Das komplette Skript mit CSS und JavaScript kann zum Testen in die Fußzeile kopiert werden! Soll das Skript außerhalb vom Forum getestet werden, wird "jQuery" benötigt. Hierzu Zeile 70 freigeben!
Das komplexe JavaScript ermöglicht ein im Aufbau einfaches und übersichtliches TAB-Menü (Zeile 71-178)!
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> --> <script> /* * tabmenu Tabbed Menu Script * version 1.0.2 * info @ http://zenverse.net/tabmenu-tabbed-menu/ * by Zen @ http://zenverse.net/ * License : GPL * Free for any purpose */
/* Animation für Tab Menü (fade, slide oder none) */ var tabmenu_animation_style = 'slide';
/* Animationsgeschwindigkeit für Tab Menü (fast, normal, slow oder in Millisekunden) - Nur für fade und slide /* Beim Eintrag in Millisekunden, ohne Häkchen */ var tabmenu_animation_speed = 'slow';
(function($tabmenu) {
$tabmenu(document).ready(function() { var nth_tabmenu = 0; var tabmenu_firsttab = [];
if (!tabmenu_animation_speed) { tabmenu_animation_speed = 'fast'; }
$tabmenu('.tabmenu').each( function() { var gettabtitle = [],gettabcontent = []; tabmenu_firsttab[nth_tabmenu] = 0; var loop = 0;
$tabmenu(this).find('.tab').each( function () { if ($tabmenu(this).hasClass('firsttab')) { tabmenu_firsttab[nth_tabmenu] = loop; } loop++; });
$tabmenu(this).find('.tab').find('.tabtitle').each( function () { gettabtitle.push($tabmenu(this).html()); });
$tabmenu(this).find('.tab').find('.tabcontent').each( function () { gettabcontent.push($tabmenu(this).html()); });
if (gettabtitle.length > 0) { var htmlcodes = '<ul class="tabmenu_ul">';
for (var i=0;i<gettabtitle.length;i++) { htmlcodes += '<li><a href="javascript:void(null)" class="t'+i+'">'+gettabtitle[i]+'</a></li>'; }
$tabmenu(this).find('.tabcontent').not(':eq('+tabmenu_firsttab[nth_tabmenu]+')').hide(); $tabmenu(this).find('.tabmenu_ul li a').eq(tabmenu_firsttab[nth_tabmenu]).addClass('current'); }
nth_tabmenu++; });
$tabmenu('.tabmenu_live').find('.tabmenu_ul > li > a').click( function(event) { var currzentab = $tabmenu(this).parent('li').parent('ul').parent('.tabmenu_live'); var currid = currzentab.attr('id').replace('tabmenu_id_','');
var currnth = $tabmenu(this).attr('class').replace('t',''); var childnum = parseInt(currnth); if (tabmenu_firsttab[currid] == childnum) { event.preventDefault(); return false; }
currzentab.find('.tabmenu_ul li a').removeClass('current');
if (currzentab.find('.tabcontent').is(':animated')) { currzentab.find('.tabcontent').is(':animated').stop(true,true); }
Wird der Foren-Code nicht umgesetzt, kann es an der Reihenfolge liegen!
Hier den Wert "0" wählen und ausprobieren!
Schließen
Mit den CSS-Einträgen kann die Farbe an die Foren angepasst werden!
Der minimierte CSS-Eintrag passt für alle Template, nur fürs Gaia-Template ist ein spezieller Eintrag Zeile 18 notwendig! Der Eintrag kann für die anderen Templates gelöscht werden (Breite TAB-Menü).
Wenn notwendig muss noch die Hintergrundfarbe in Zeile 7 + 43, die Randfarben in Zeile 13, 34, 45 und die Schattenfarbe in Zeile 33 an das Forum angepasst werden!
Die CSS kann für die Templates (v1-4) mit dem nachfolgenden JavaScript in die Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert werden!
Für die neue Xobor (v6) Templates wird die CSS zusammen mit dem nachfolgenden JavaScript in Eigenes Javascript kopiert!
Für die Templates (v1-4) wird dass JavaScript und die CSS in die Fußzeile" oder besser als PIugin in "Untere Leiste - header" kopiert! Für das neue Xobor (v6) wird beides in Eigenes Javascript kopiert!
Das Skript ist so eingestellt, dass beim Start TAB 1 geöffnet ist!
In Zeile 12 kann man die Art der Animation einstellen, in Zeile 16 die Schnelligkeit!
<script> /* * tabmenu Tabbed Menu Script * version 1.0.2 * info @ http://zenverse.net/tabmenu-tabbed-menu/ * by Zen @ http://zenverse.net/ * License : GPL * Free for any purpose */
/* Animation für Tab Menü (fade, slide oder none) */ var tabmenu_animation_style = 'slide';
/* Animationsgeschwindigkeit für Tab Menü (fast, normal, slow oder in Millisekunden) - Nur für fade und slide /* Beim Eintrag in Millisekunden, ohne Häkchen */ var tabmenu_animation_speed = 'slow';
(function($tabmenu) {
$tabmenu(document).ready(function() { var nth_tabmenu = 0; var tabmenu_firsttab = [];
if (!tabmenu_animation_speed) { tabmenu_animation_speed = 'fast'; }
$tabmenu('.tabmenu').each( function() { var gettabtitle = [],gettabcontent = []; tabmenu_firsttab[nth_tabmenu] = 0; var loop = 0;
$tabmenu(this).find('.tab').each( function () { if ($tabmenu(this).hasClass('firsttab')) { tabmenu_firsttab[nth_tabmenu] = loop; } loop++; });
$tabmenu(this).find('.tab').find('.tabtitle').each( function () { gettabtitle.push($tabmenu(this).html()); });
$tabmenu(this).find('.tab').find('.tabcontent').each( function () { gettabcontent.push($tabmenu(this).html()); });
if (gettabtitle.length > 0) { var htmlcodes = '<ul class="tabmenu_ul">';
for (var i=0;i<gettabtitle.length;i++) { htmlcodes += '<li><a href="javascript:void(null)" class="t'+i+'">'+gettabtitle[i]+'</a></li>'; }
$tabmenu(this).find('.tabcontent').not(':eq('+tabmenu_firsttab[nth_tabmenu]+')').hide(); $tabmenu(this).find('.tabmenu_ul li a').eq(tabmenu_firsttab[nth_tabmenu]).addClass('current'); }
nth_tabmenu++; });
$tabmenu('.tabmenu_live').find('.tabmenu_ul > li > a').click( function(event) { var currzentab = $tabmenu(this).parent('li').parent('ul').parent('.tabmenu_live'); var currid = currzentab.attr('id').replace('tabmenu_id_','');
var currnth = $tabmenu(this).attr('class').replace('t',''); var childnum = parseInt(currnth); if (tabmenu_firsttab[currid] == childnum) { event.preventDefault(); return false; }
currzentab.find('.tabmenu_ul li a').removeClass('current');
if (currzentab.find('.tabcontent').is(':animated')) { currzentab.find('.tabcontent').is(':animated').stop(true,true); }
Fehlersuche: TAB-Menü nur mit CSS für Foren-Beiträge
Hallo Mato, besten Dank fürs Ausprobieren und Testen.
Da Du ja auf das neue "Xobor (v6)" umgestiegen bist, muss der gesamte Eintrag nach "Eigenes Javascript" und nicht in die "Eigene Fußzeile". Sonst war alles bestens! Habe die Farbe noch ein wenig angepasst! Ich denke, ich werde die Beiträge noch genauer nach (v1-4) und (v6) aufteilen!