Lexi Help
Partner
www.forumieren.com

Tab Tabelle

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Tab Tabelle

Beitrag von Traiceheart am Do 8 Nov 2012 - 13:11

Hallo,
ich habe im I-net eine Tolle Tab tabelle gefunden und dazu gab es mehrere Codes die alle eingesetzt werden mussten. (HTML/Javascript/Css)
Ich zeige euch eben die Codes und sage euch dann mein problem C:
HTML Code (schon abgeändert von mir):
Code:
<div class="tabber">

    <div class="tabbertab">
    <h2><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></h2>
    <p>INHALT</p>
    </div>


    <div class="tabbertab">
    <h2><img src="http://www.abload.de/img/dppeu2owbguia.png"></h2>
    <p>INHALT</p>
    </div>


    <div class="tabbertab">
    <h2><img src="http://www.abload.de/img/btfbaexz9wudl.png"></h2>
    <p>INHALT</p>
    </div>

</div>

Hier der Javascript Code:

Code:
function tabberObj(argsObj)
{var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}
tabberObj.prototype.init=function(e)
{var
childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false;}
if(e.id){this.id=e.id;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1;}}}
DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title='';}
if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"");}
break;}}}
if(!t.headingText){t.headingText=i+1;}
DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId;}
DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li);}
e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this});}
return this;};tabberObj.prototype.navClick=function(event)
{var
rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}
self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event;}
rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};tabberObj.prototype.tabHide=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};tabberObj.prototype.tabShow=function(tabberIndex)
{var div;if(!this.tabs[tabberIndex]){return false;}
this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex});}
return this;};tabberObj.prototype.navSetActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className=this.classNavActive;return this;};tabberObj.prototype.navClearActive=function(tabberIndex)
{this.tabs[tabberIndex].li.className='';return this;};function tabberAutomatic(tabberArgs)
{var
tempObj,divs,i;if(!tabberArgs){tabberArgs={};}
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad();}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions);}}

/*CODE (c) BY 2006 Patrick Fitzgerald */

Hier der CSS Code:

Code:
.tabberlive .tabbertabhide { display:none;}


/*--------------------------------------------------
  ul.tabbernav = Die Tab Naviliste
  li.tabberactive = Der aktive Tab
  --------------------------------------------------*/
ul.tabbernav{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;}

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

ul.tabbernav li a{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover{
 color: #000;
 background: #AAE;
 border-color: #227;}

ul.tabbernav li.tabberactive a{
 background-color: #fff;
 border-bottom: 1px solid #fff;}

ul.tabbernav li.tabberactive a:hover{
 color: #000;
 background: white;
 border-bottom: 1px solid white;}

/*--------------------------------------------------
  .tabbertab = Die einzelnen Tabseiten (Box mit Ibhalt)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;}

.tabberlive .tabbertab h2 {
 display:none;}
.tabberlive .tabbertab h3 {
 display:none;}


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

/*CODE (c) BY 2006 Patrick Fitzgerald */

So und wie es aussieht liegt mein Problem in CSS Code,ich möchte nähmlich gerne das die Tabs nicht aussehen wie 1,2,3 sondern wie die Bilder die ich schon im HTML Code eingesetzt habe.
Auf meiner seite sieht man es gleich bei der startseite: http://magicofwolves.ohmyforum.net/

Info: Ich habe nur den HTML Code umgeändert,die anderen Codes nicht!

Ich hoffe ihr könnt mir helfen Very Happy

Lg,
Traiceyy


Zuletzt von Traiceheart am Do 8 Nov 2012 - 14:25 bearbeitet, insgesamt 1 mal bearbeitet

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Günther am Do 8 Nov 2012 - 13:16

Hallo,

du müsstest das Script bearbeiten, da dadurch diese Zuweisungen entstehen. Einfacher wäre es für dich aber auf Dauer, wenn du einen simpleren und leichter anpassbaren Code verwendest. Wink

Hier findest du eine sehr gute Tab-Tabelle:
Tab-Ansicht - ChangeOnglet Spalten/Menüs werden falsch angezeigt
Im Spoiler des ersten Beitrags befinden sich der CSS-Eintrag und das Script und in Franks Beitrag gleich darunter befindet sich der richtiggestellte HTML-Code für die Startseitennachricht.

Diese Codekombination wurde hier bereits von mehreren Usern erfolgreich verwendet und kann wesentlich einfacher geändert und angepasst werden. Smile

Liebe Grüße
Günther

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Traiceheart am Do 8 Nov 2012 - 13:27

hmmm also i-wie habe ich etwas wahrscheinlich übersehen,denn in meinem forum ist es unter einander geschrieben.

Hier mein Verwendeter Code:
Code:
    <div id="mes_onglets">
        <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"</li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"</li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"</li>
                <div class="clear"><div id="mes_contenus">
            <div id="co_1" class="mon_contenu">Das ist der Text des ersten Fensters.</div>
            <div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
            <div id="co_3" class="mon_contenu" style="display: none;">Das ist der Text des dritten Fensters.</div>
        </div></div></ul></div>

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Günther am Do 8 Nov 2012 - 13:34

@Günther schrieb:Im Spoiler des ersten Beitrags befinden sich der CSS-Eintrag und das Script...
Du hast das Script noch nicht (korrekt) eingesetzt. Wink

Dazu gehst du zu
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung,
klickst dort auf "Ein neues Javascript erstellen", wählst einen beliebigen Titel und die Platzierung "Auf der Startseite". Ins große Eingabefeld fügst du jenen Code ein, den du im verlinkten Thread im 1. Beitrag innerhalb des Spoilers findest (Überschrift "Javascript").
Danach klickst du auf "Bestätigen".

Das CSS hast du genauso wenig eingesetzt. Dieses findest du ebenfalls im Spoiler des 1. Beitrags, unter "CSS".
Nur den HTML-Code solltest du nicht aus dem 1. Beitrag verwenden, sondern jenen aus Franks Beitrag.

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Traiceheart am Do 8 Nov 2012 - 13:59

knock Ich doof!-Hab die beiden sachen total übersehen!

Naja,ich hab bei mir soweit alles angeglichen,aber es gibt noch eine sache die mir nicht so gut gefällt.

Wenn ich auf einen Tab klicke,wir der Inhalt immer unter Rollenspiel angezeigt,wie mache cih das es unter jedem richtigen feld ist?

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Günther am Do 8 Nov 2012 - 14:05

Das kann schon mal passieren. Wink

@Traiceheart schrieb:Wenn ich auf einen Tab klicke,wir der Inhalt immer unter Rollenspiel angezeigt,wie mache cih das es unter jedem richtigen feld ist?
Das kommt daher, dass dein HTML-Code fehlerhaft war.

Ich habe ihn für dich richtig angepasst, versuche es mal damit:
Code:
<div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></li>
                    <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"></li>
                    <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"></li>
                    <div class="clear"><div id="mes_contenus">
                <div id="co_1" class="mon_contenu">Das ist der Text des ersten Fensters.</div>
                <div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
                <div id="co_3" class="mon_contenu" style="display: none;">Das ist der Text des dritten Fensters.</div>
</div></div></ul></div>

Du solltest dich nochmals mit dem Bildelement auseinandersetzen. Wink Sieh mal, was du ständig vergessen hast:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/ybupzxkf7bukq.png"></li>
<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/dppeu2owbguia.png"></li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://www.abload.de/img/btfbaexz9wudl.png"></li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Das ist der Text des ersten Fensters.</div>
<div id="co_2" class="mon_contenu" style="display: none;">Das ist der Text des zweiten Fensters.</div>
<div id="co_3" class="mon_contenu" style="display: none;">Das ist der Text des dritten Fensters.</div>
</div></div></ul></div>

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Traiceheart am Do 8 Nov 2012 - 14:19

Ja das mit dem Bildelementen ist mir dann auch von alleine aufgefallen xD

haha,des kann passieren wenn ich mal nicht richtig hin gucke Very Happy


jedenfals:

Danke Günther,jetzt ist alles so wie ich es haben wollte C:

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Tabelle

Beitrag von Günther am Do 8 Nov 2012 - 14:20

Das freut mich, bitte. Smile

Denke bitte noch daran, das -Icon zu setzen.
-done-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten