df_tabs

Ext: df_tabs

Lizenz: GNU GPL, Version 2

Repository: https://gitlab.sgalinski.de/typo3/df_tabs

Bitte melden Sie bugs hier: https://gitlab.sgalinski.de/typo3/df_tabs

TYPO3-Version: >7.6

Über

Diese Erweiterung fügt dem Inhaltselement-Assistenten ein neues Plugin hinzu, das dem Benutzer die Möglichkeit bietet, andere Inhaltselemente und Seiten als Tab-basierten Inhalt zu definieren. Darüber hinaus können Sie einen automatischen Wiedergabemechanismus mit einem benutzerdefinierten Intervall definieren, um einen automatischen Gleiteffekt zu implementieren.

Installation

1. Installieren Sie die Erweiterung mit dem Extension Manager

2. Fügen Sie die statische Vorlage der Erweiterung zu Ihrer Vorlage Ihres root page oder Ihrer Erweiterung root templates hinzu

3. Laden Sie den MooTools Core oder JQuery herunter und fügen Sie ihn hinzu (wenn Ihr Projekt bereits MooTools oder JQuery enthält, überspringen Sie diesen Schritt)

4. Implementieren Sie Ihren eigenen CSS-Code und überschreiben Sie die Include-Konfigurationsoption in den Konstanten desselben Templates mit der Integration des statischen Templates von df_tabs

Verwendung

Konfiguration

TypoScript-Konstanten

# Die CSS-Datei, die verwendet werden soll.
css = EXT:df_tabs/Ressourcen/Public/StyleSheets/df_tabs.css

js {
    # Javascript-Datei, die den Zurück-Button für Tabs implementiert
    history = EXT:df_tabs/Ressourcen/Public/Scripts/History/History/History.js

    # Router Javascript-Datei (siehe oben)
    historyRouting = EXT:df_tabs/Ressourcen/Public/Scripts/History/History/History.Routing.js

    # Javascript, das die Standard-Tab-Funktionalität implementiert
    app = EXT:df_tabs/Ressourcen/Public/Scripts/df_tabs.js

    # JQuery-spezifischer Code
    jqueryApp = EXT:df_tabs/Ressourcen/Public/Scripts/jquery.tabs.js
}

# Aktiviert die Verwendung des Inline-Javascript, das die Funktionalität auslöst
aktivieren Sie Javascript = 1

# Standard-Registertitel, wenn die angegebenen Informationen leer sind
defaultTabTitle = Tabulator

#
classPrefix = tx-dftabs-

# Präfix für Klassen und IDs, um HTML-Fehler und Stylingprobleme zu vermeiden, wenn mehrere Plugins auf derselben Seite verwendet werden
hashName = Registerkarte

# Polling-Intervall (in ms), um URL-Änderungen für die History-Funktionalität zu erkennen
pollingInterval = 1000

# Animationsgeschwindigkeit in ms (wenn ein Übergangseffekt zwischen den Registerkarten verwendet wird)
animationSpeed = 400

# der Registerindex, wo die Animation beginnen soll (beginnt mit 0)
startIndex = 0

#
forceUsageOfLeft = false

# Knotentyp, der für das Registerkartenmenü verwendet wird
menuNodeType = li

# Knotentyp, der für den Tab-Inhalt verwendet wird
contentNodeType = div

# Javascript-Rückruf-Funktion, die für die Tab-Switches ausgelöst wird. Die Voreinstellung ist keine Animation
animationCallback =

# Verwenden Sie Ajax für das Nachladen des Inhalts, um die anfängliche Ladeleistung zu verbessern
ajax = 0

# Flexform-Optionen für die Plugin-Verwendung mit einfachem Typoscript

# Aktiviert die Autoplay-Funktionalität
enableAutoPlay = 0

# Intervall der Autoplay-Funktionalität in ms
autoPlayInterval = 7000

# Aktiviert das Mouseover-Ereignis für Tabulatorwechsel anstelle von einfachen Klicks
enableMouseOver = 0

# Data Provider Modus: tt_content, Seiten, kombiniert und typoscript
mode = tt_content

# Kommagetrennte Liste der bevorzugten Menütitel
titel =

# Kommagetrennte Liste von IDs, die sich auf den Modus beziehen; nicht erforderlich für den Typoscript-Modus; der kombinierte Modus erfordert den Tabellennamen als Präfix der ID (z.B. pages_12,tt_content_14)
daten =

# Seitenmodusbezogene Konfigurationseinstellungen
seiten {

    # Begrenzung der abgerufenen Inhaltselemente von einer Seite
    grenzwert = 999

    # Bestellklausel für die Inhaltselemente
    orderBy = colPos, Sortierung

    # Extra-Filter für Inhaltselemente von einer Seite
    additionalWhere = AND colPos >= 0

    # Titelfeld für das Tab-Menü
    titleField = Titel

    # Link-Feld für Links
    linkField = uid

    # Ajax Fallback-Textfeld für Nicht-Javascript-Benutzer mit der Option ajax; Beachten Sie, dass dieser Text im Ajax- und Fallback-Modus sichtbar sein muss, sonst erhalten Sie Probleme mit dem Cloaking
    ajaxFallbackTextField = Untertitel
}

# tt_content mode bezogene Konfigurationseinstellungen
tt_content {

    # Titelfeld für das Tab-Menü
    titleField = Header

    # Link-Feld für Links
    linkField = header_link

    # Ajax Fallback-Textfeld für Nicht-Javascript-Benutzer mit der Option ajax; Beachten Sie, dass dieser Text im Ajax- und Fallback-Modus sichtbar sein muss, sonst erhalten Sie Probleme mit dem Cloaking
    ajaxFallbackTextField = alterText
}

Anpassung der Ausgabe

Es gibt verschiedene Einstellungen in der TypoScript-Datei setup.txt, mit denen Sie die Ausgabe über css hinaus anpassen können.

stdWrap {
    # Tab-Inhaltstitel (normalerweise im JS-Modus versteckt)
    tabTitle {
        wrap = <h4 class="####CLASSES####">|</h4>
    }

    # Umhüllen Sie alle Elemente des Tab-Inhalts
    tabContents {
        wrap = <div class="####CLASSES#####" id="####ID####">|</div>
    }

    # Tab-Inhaltselement
    tabContent {
        wrap = <div class="####CLASSES#####" id="####ID####">|</div>
    }

    # Wrap around all tabs menu entries
    tabMenu {
        wrap = <ul class="####CLASSES####" id="####ID####">|</ul>
    }

    Tab-Menüeintrag (####LINK##### kann auch in Kombination mit der Eigenschaft linkField verwendet werden)
    tabMenuEntry {
        wrap = <li id="####ID#####" class="###CLASSES####"><a href="####LINK_ANCHOR#####">|</a></li>

        # Alternativer Wrap, wenn Sie direkt zur Registerkarte springen möchten, wenn sich der Speicherort des Hash ändert
        # wrap = <li id="####ID#####" class="###CLASSES####"><a href="####LINK_ANCHOR######" id="#####LINK_ID####">|</a></li>
    }
}

Erweiterungseinstellungen

basic.useJQuery = 1

Setzen Sie diese Einstellung auf "1", um JQuerys anstelle von Mootools zu verwenden (Standard).

Plugin-Einstellungen

Modus

Inhaltselemente anzeigen

Ruft den Inhalt der Registerkarte aus der Tabelle tt_content ab.

Seiten anzeigen

Ruft den Inhalt der Registerkarte aus der Seitentabelle ab.

Kombiniert

Verwenden Sie den tt_content und die Seitentabelle, um den Inhalt abzurufen

Seiten und Inhalte

Hier können Sie Seiten oder einzelne Inhaltselemente auswählen, die in einem Tab angezeigt werden sollen:

Öffnet den Dialog "Seite auswählen"
Öffnet den Dialog "Seite auswählen"

Überschreiben von Tab-Reitern

Hier können Sie eine kommagetrennte Liste der bevorzugten Menütitel angeben.

Autoplay aktivieren

Wenn diese Einstellung aktiviert ist, werden die Registerkarten in einem bestimmten Zeitintervall automatisch durchgeschoben.

Autoplay-Intervall

Legt das Zeitintervall für die Autoplay-Option fest. Wird ignoriert, wenn die automatische Wiedergabe deaktiviert ist.

Maus über Navigation aktivieren

Wenn diese Einstellung aktiviert ist, schaltet die Registerkarte das Mouseover-Ereignis ein, anstatt zu klicken.

Hash

Name, der als Präfix des Ankers für die URL angezeigt wird, wenn auf eine Registerkarte geklickt wurde, um die History- und Direktverknüpfungsfunktionalität mit den Registerkarten zu implementieren.