Tab Script

Hallöle ihr Lieben,

ich habe da ein Forum gefunden, das eine sehr interessante Art und Weise hat den Inhalt in einer Tabelle zu verarbeiten. Mit Tabs können mehrere Seiten aufgeschlagen werden, ohne, dass die Seite springt. Sogar die Chatbox wurde dort perfekt eingefasst.

Da ich seit laaanger langer Zeit versuche auch in meinem Forum diese Art von Inhaltsvermittlung einzuführen habe ich einige Tutorials durchprobiert. Leider alle ohne Erfolg.

Irgendwie scheine ich nicht ganz begriffen zu haben wo ich was einfügen kann/ muss. In einem Tutorial beispielsweise habe ich einen HTML - Code, den habe ich wahlweise unter Adminindex > Anzeige > Allgemeines aber auch Adminindex > Allgemeines > Bekanntmachungen eingesetzt, dann gibt es natürlich das CSS das über den Adminindex > Anzeige > Farben > CSS Stylesheet einzusetzen ist und zuletzt das JQuery, das ich sowohl als Javascript als auch ohne und eigentlich überall eingefügt habe. 

Das ganze scheint im Prinzip so simpel und doch komme ich nicht dahinter, wie und wo ich das einsetze, damit es auch funktioniert.

Meine Beispiele führe ich hier mal eben an und hoffe, dass mir jemand helfen kann.

TUTORIAL
FORUM

Liebe Grüße Jay

Hallo,

einen solchen Code für eine "Organic-Tabs-Tabelle" findest du mit genauer Erklärung auch hier bei uns:
http://hilfe.forumieren.com/t34498-punbb-tabelle#225929

Ich kann dir aber gerne auch anhand des Tutorials, das du dazu gefunden hast, zeigen, an welchen Stellen du den Code einsetzen musst.

1. Den HTML-Code kannst du in die Startseitennachricht, als Bekanntmachung, in ein Portalmodul ... einsetzen:

Code:

<ul class="tabs">
 <li class="active" rel="tab1">Tab-Name 1</li>
  <li rel="tab2">Tab-Name 2</li>
  <li rel="tab3">Tab-Name 3</li>
  <li rel="tab4">Tab-Name 4</li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
  <p>
   <strong>
   Tab-Inhalt 1
   </strong>
    </p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
  <p>
   <strong>
   Tab-Inhalt 2
   </strong>
    </p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
  <p>
   <strong>
   Tab-Inhalt 3
   </strong>
    </p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
  <p>
   <strong>
   Tab-Inhalt 4
   </strong>
    </p>
</div><!-- #tab4 -->
</div> <!-- .tab_container -->

Die Anpassung sollte klar sein: Bei "Tab-Name" setzt du jeweils die Bezeichnung des Tabs ein und bei "Tab-Inhalt", was dann beim Auswählen des entsprechenden Tabs in der Tabelle angezeigt wird.
Möchtest du zusätzliche Tabs hinzufügen, musst du zuerst im oberen Bereich folgende Zeile vervielfachen (dabei immer auf die Durchnummerierung achten!):

<li rel="tab5">Tab-Name 5</li>

Und anschließend im unteren Bereich dasselbe (auch hier auf die fortlaufende Nummerierung achten!):

<div id="tab5" class="tab_content">
<p>
<strong>
Tab-Inhalt 5
</strong>
</p>
</div><!-- #tab5 -->

2. Das CSS fügst du in dein CSS-Stylesheet unter
AB -> Anzeige -> Bilder & Farben -> Farben -> Reiter "CSS Stylesheet"
ein:

Code:

ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999999;
 border-left: 1px solid #999999;
 width: 100%;
 }
 ul.tabs li {
 float: left;
 margin: 0;
 cursor: pointer;
 padding: 0px 21px ;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999999;
 border-left: none;
 font-weight: bold;
 background: #EEEEEE;
 overflow: hidden;
 position: relative;
 }
 ul.tabs li:hover {
 background: #CCCCCC;
 }
ul.tabs li.active{
 background: #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
 }
 .tab_container {
 border: 1px solid #999999;
 border-top: none;
 clear: both;
 float: left;
width: 100%;
 background: #FFFFFF;
 }
 .tab_content {
 padding: 20px;
 font-size: 1.2em;
 display: none;
 }

Hier kannst du Farben & Co anpassen, wenn du dich mit CSS ein wenig auskennst.

3. Das jQuery-Script setzt du über die Javascript-Verwaltung ein. Überprüfe dabei folgende Einstellung unter
AB -> Module -> HTML und JAVASCRIPT -> Javascript Codes Verwaltung:
Die Javascript-Code Verwaltung aktivieren: Ja
und im Script selbst die Platzierung Alle Seiten.

Code:

$(document).ready(function() {

 $(".tab_content").hide();
 $(".tab_content:first").show();

$("ul.tabs li").click(function() {
 $("ul.tabs li").removeClass("active");
 $(this).addClass("active");
 $(".tab_content").hide();
 var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});

Liebe Grüße
Günther

Danke für deine schnelle Antwort!

Ich habe das ganze nun so eingesetzt wie du es beschrieben hast (zuvor habe ich es auch so gemacht). Leider kann ich die Bekanntmachungen nicht sehen, weshalb ich einen Fehler in meinen Templates vermute (denn die Bekanntmachungen sind aktiviert). Wenn ich den HTML Code über AB > Anzeige > Startseite > Allgemeines einfüge, dann sehe ich das Feld nicht, in dem eigentlich der Inhalt zu sehen sein sollte.

Es sieht so aus, dass das Script nicht richtig ausgeführt wird.
Bearbeite es bitte nochmal und wähle diesmal nicht Alle Seiten als Platzierung aus, sondern nur Auf der Startseite. Funktioniert es dann besser?

Leider funktioniert es immernoch nicht O:

Weil das Script immer noch nicht ausgeführt wird.
Soweit ich sehe, wird es in Kombination mit den restlichen Scripts nicht richtig ausgeführt. Ich könnte nun versuchen, die Reihenfolge zu ändern und nachzusehen, wie die Scripte dadurch wieder miteinander kompatibel werden können. Wenn du das möchtest, wäre es am besten, wenn du mir deine Logindaten (Passwort bitte vorher und nachher verändern) per PN sendest und ich das direkt vor Ort untersuchen und ausprobieren kann.

Das wäre super, danke!

Sorry, dass es etwas gedauert hat, ich hatte vorhin keine Zeit mehr.

Die Problemursache befand sich in deinem Indexmodul mit dem Namen "test" (links unten). Darin hast du eine veraltete jQuery-Bibliothek aufgerufen:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Abgesehen davon, dass das nichtmal einen ersichtlichen Grund hatte - erstens befindet sich nämlich abgesehen davon kein weiteres JS im Modul, das jQuery benötigen würde, und zweitens ist die jeweils aktuellste jQuery-Version bereits standardmäßig in Forumieren-Foren integriert - hat das dazu geführt, dass das jQuery der Tab-Tabelle nicht korrekt ausgeführt wurde.
Ich habe diese Zeile nun aus dem Indexmodul entfernt, sodass wieder die neueste jQuery-Bibliothek wirksam wird, die standardmäßig in dein Forum integriert ist. Damit ist das Problem behoben.

Ich bin wieder ausgeloggt und du kannst das Passwort wieder ändern.

Aber nicht doch! Ich bin dir sehr dankbar für deine Hilfe/ Arbeit, denn ohne dich wäre ich NIE dahinter gekommen. Deshalb vielen Dank! : )
Gute Arbeit braucht eben ihre Zeit ; )

Haha, tja, ich frage mich gerade wieso ich das gemacht habe : D Aber naja was solls, das Problem ist ja nun behoben und ich kann in Ruhe meine "Arbeit" fortsetzen. Heeeeeeerzlichen Dank!