Bootstrap3 Tabs mit Grid Elements für TYPO3

Auf Anfrage habe ich nun auch das Tabs-Element aus dem bekannten Bootstrap in eine Grid Elements Version übertragen. Die Durchführung war leider etwas komplizierter, da ein Extra Element für die Navigation oberhalb der eigentlichen Tab-Elemente erstellt werden musste. Ich habe das gelöst indem ich ein „FLUIDTEMPLATE“ für das Rendern des Containers verwendet habe. Aus diesem Grund funktioniert diese Variante auch nur für eine TYPO3-Installation >= 4.5 (ungetestet).

Der Aufbau ist einfach gehalten. Man erstellt einen Tabs-Container in dem man wiederum Tab-Elemente erstellen kann. In diese Tab-Elemente können dann wieder ganz normale Inhaltselemente eingefügt werden. Das gute an dieser Aufbauweise ist, dass es so auch möglich ist, mehrere Inhaltselemente „tabben“ zu lassen.

Ich habe die benötigten Dateien wieder in ein Gist gepackt:
Alle Dateien: Bootstrap3 Tabs mit Grid Elements für TYPO3

Installation

  • Erstelle den Ordner fileadmin/templates/gridelements/bootstrap3_tabs
  • Füge alle Dateien aus dem Gist in diesen Ordner ein (bootstrap3_tabs_container.xml, bootstrap3_tabs_template.html, page_ts.txt, setup.txt)
  • In TYPO3: Füg in das Template der Hauptseite folgenden Code ein:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_tabs/setup.txt">
  • In TYPO3: Bearbeite die Hauptseite und füg in das Feld “Page TSConfig” folgenden Code ein:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/gridelements/bootstrap3_tabs/page_ts.txt">

Erstellt man nun ein neues Inhaltselement, findet man im Reiter „Grid Elements“ die zwei neuen Einträge „Tab Container“ und „Tab Element“.

Bootstrap3 Tabs: Neues Inhaltselement
Bootstrap3 Tabs: Neues Inhaltselement

Man kann im Element „Tab Container“ folgende Einstellungen vornehmen:

  • Aussehen: Tabs oder Pills: siehe Bootstrap Dokumentation
  • Switch Effekt: Ohne oder Einblenden: Beim Aktivieren eines Tabs wird der Inhalt mit einem Blendeffekt eingeblendet.

Innerhalb eines „Tab Containers“ dürfen nur „Tab Elemente“ erstellt werden. Eine genauere Abfrage, ob die Element die richtigen sind, gibt es allerdings nicht.

Die Verschachtelung sieht im TYPO3 Backend etwa so aus:

Bootstrap3 Tabs: Backend
Bootstrap3 Tabs: Backend

 

Viel Spaß beim Verschachteln! Das nächste Projekt wird das „Collapse“ Element von Bootstrap werden (Bootstrap Collapse).
Auch hier gilt: Diese Methode (bzw. Grid Elements) funktioniert nicht mit TemplaVoila.

 

Anmerkung
Abhängig von der Version von Grid Elements und TYPO3 kann es manchmal beim Erstellen des Tab Containers dazu kommen das die Einstellungen nicht angezeigt werden und das in dem Feld „Grid Layout“ der Wert „INVALID VALUE“ erscheint.
Neuer Tab Container Fehler Ich kenne die genaue Ursache nicht (vermutlich hat es was mit Flexforms zu tun), man kann diesen Fehler aber ignorieren, denn speichert man das Element einmal ab, erscheinen die Einstellungen wieder und der Fehler verschwindet.

 

Update
Ich habe die „setup.txt“ Grundlegend verändert, sodass man keine „if“-Anweisung mehr in tt_content braucht. So bleibt „tt_content“ unberührt und es sollte keine Konflikte mit anderen Extensions geben.

 

8 Kommentare zu „Bootstrap3 Tabs mit Grid Elements für TYPO3

      1. Hi Stefan,

        danke für die Solutions. Tabs, Collapse und Carousel funkionieren super. Ich schließe mich Michael an, .nav-stacked und .nav-justified als Alternative wäre noch toll! 🙂

        Markus

  1. Hallo Michael,
    habe heute versucht dieses Tab-Element wie beschrieben einzubauen – leider wird beim Anlegen eines neuen Inhaltselementes kein Reiter Gridelemente angezeigt.
    Muss man im Vorfeld noch ein BE-Layout dafür erstellen?
    Ich habe im Einsatz – Typo3 6.2 und Gridelements 3.0 DEV
    🙄

    1. I am using the same Typo3 6.2 and Grid Elements 3.0-dev, but also not having luck – I’m not able to place content into a grid element.

      Did anybody have luck resolving this yet? I will keep trying and post back here if I am successful… 😎

  2. Hey Stefan,

    gibt es die Möglichkeit, das Ganze so zu erweitern, das man z.B. ein Icon für die Überschrift der einzelnen Tabs mit einbauen kann?
    Also ein zusätzliches Eingabefeld bei den Tabs, welches man dann ausgeben lassen kann? Geht das vielleicht irgendwie über eine Variable im Template?

    Vielen Dank für deine Hilfe!

  3. Hi Stefan,

    erstmal vielen Dank für das Teilen deiner Arbeiten.
    Ich habe heute versucht die Tabs einzubauen, alles ok bis ich ein Tab Container Element in eine Seite einfüge. Dann bekomme ich im FE „Oops, an error occurred!“.
    Ich verwende TYPO3 6.2.4, gridelements 3.0.

    Da ich eine Art Tabnavigation realisieren will wo die Tabs aus Thumbnails bestehen muss ich das vielleicht anders realisieren.

    Gruß Klaas

Schreibe einen Kommentar zu Fleischer Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Sicherheitsfrage * Time limit is exhausted. Please reload the CAPTCHA.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.