Lexi Help
Partner
www.forumieren.com

Tab Script

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Tab Script

Beitrag von Jamie Grant am Mo 24 Jun 2013 - 13:28

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


Zuletzt von Jamie Grant am Mo 24 Jun 2013 - 17:30 bearbeitet, insgesamt 1 mal bearbeitet

Jamie Grant
Lehrling
Lehrling

Weiblich Beiträge : 199
Anmeldedatum : 13.08.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Script

Beitrag von Günther am Mo 24 Jun 2013 - 14:00

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 Smile

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

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 Script

Beitrag von Jamie Grant am Mo 24 Jun 2013 - 14:48

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.

Jamie Grant
Lehrling
Lehrling

Weiblich Beiträge : 199
Anmeldedatum : 13.08.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Script

Beitrag von Günther am Mo 24 Jun 2013 - 15:10

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?

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 Script

Beitrag von Jamie Grant am Mo 24 Jun 2013 - 15:18

Leider funktioniert es immernoch nicht O:

Jamie Grant
Lehrling
Lehrling

Weiblich Beiträge : 199
Anmeldedatum : 13.08.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Script

Beitrag von Günther am Mo 24 Jun 2013 - 15:26

Weil das Script immer noch nicht ausgeführt wird. Wink
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.

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 Script

Beitrag von Jamie Grant am Mo 24 Jun 2013 - 15:28

Das wäre super, danke!

Jamie Grant
Lehrling
Lehrling

Weiblich Beiträge : 199
Anmeldedatum : 13.08.09

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Tab Script

Beitrag von Günther am Mo 24 Jun 2013 - 17:25

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. Smile

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

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 Script

Beitrag von Jamie Grant am Mo 24 Jun 2013 - 17:30

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!

Jamie Grant
Lehrling
Lehrling

Weiblich Beiträge : 199
Anmeldedatum : 13.08.09

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