README

许可证: GNU GPL, 版本 2

仓库: https://gitlab.sgalinski.de/typo3/df_tabs

请在此处报告错误: https://gitlab.sgalinski.de/typo3/df_tabs

关于

此扩展向内容元素向导添加了一个新插件，使用户能够将其他内容元素和页面定义为基于标签的内容。此外，您还可以定义一个自定义间隔的自动播放机制，以实现自动滑动效果。

安装

使用扩展管理器安装扩展
将扩展的静态模板添加到您根页面的模板或扩展根模板中
下载并包含MooTools Core或jQuery（如果您的项目已包含MooTools或jQuery，请跳过此步骤）
实现您自定义的CSS代码，并覆盖同一模板中的包含配置选项，以集成df_tabs的静态模板

使用方法

配置

Fluid渲染器

输出可以从Fluid-模板 (EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html) 内完全控制。只需覆盖它以调整以满足您的需求。

TypoScript常量

# The css file that should be used.
css = EXT:df_tabs/Resources/Public/StyleSheets/df_tabs.css

js {
    # Javascript file that implements the back button for tabs
    history = EXT:df_tabs/Resources/Public/Scripts/History/History.js

    # Router Javascript file (see above)
    historyRouting = EXT:df_tabs/Resources/Public/Scripts/History/History.Routing.js

    # Javascript that implements the default tab functionality
    app = EXT:df_tabs/Resources/Public/Scripts/df_tabs.js

    # JQuery specific code
    jqueryApp = EXT:df_tabs/Resources/Public/Scripts/jquery.tabs.js
}

# Enables the usage of the inline javascript that triggers the functionality
enableJavascript = 1

# Default tab title if the given information is empty
defaultTabTitle = Tab

#
classPrefix = tx-dftabs-

# Prefix for classes and ids to prevent html errors and styling problems if multiple plugins are used on the same page
hashName = tab

# Polling interval (in ms) to detect url changes for the history functionality
pollingInterval = 1000

# Animation speed in ms (if a transition effect between the tabs is used)
animationSpeed = 400

# the tab index where the animation should start (starts with 0)
startIndex = 0

#
forceUsageOfLeft = false

# Node type that is used for the tab menu
menuNodeType = li

# Node type that is used for the tab content
contentNodeType = div

# Javascript callback function that is triggered for the tab switches. The default is no animation
animationCallback =

# Remove a substring from all tab-title. Can be either a string, or a regex. This example will remove the string
# 'Foo' if is found at the end of the title.
removeFromTitle = Foo$

# flexform options for the plugin usage with plain typoscript

# Enables the autoplay functionality
enableAutoPlay = 0

# Interval of the autoplay functionality in ms
autoPlayInterval = 7000

# Enables the mouseover event for tab switches instead of simple clicks
enableMouseOver = 0

# Data Provider Mode: tt_content, pages, combined and typoscript
mode = tt_content

# Comma separated list of preferred menu titles
titles =

# Comma-separated list of ids related to the mode; not needed for the typoscript mode; combined mode requires the table name as a prefix of the id (e.g. pages_12,tt_content_14)
data =

# pages mode related configuration settings
pages {

    # Limit of fetched content elements from a page
    limit = 999

    # Order clause for the content elements
    orderBy = colPos,sorting

    # Extra filter for content elements from a page
    additionalWhere = AND colPos >= 0

    # Title field for the tab menu
    titleField = title

    # Link field for links
    linkField = uid
}

# tt_content mode related configuration settings
tt_content {

    # Title field for the tab menu
    titleField = header

    # Link field for links
    linkField = header_link
}

输出自定义

在setup.txt TypoScript文件中存在各种设置，允许您在CSS之外自定义输出。

stdWrap {
    # Tab content title (normally hidden in JS mode)
    tabTitle {
        wrap = <h4 class="###CLASSES###">|</h4>
    }

    # Wrap around all tab content elements
    tabContents {
        wrap = <div class="###CLASSES###" id="###ID###">|</div>
    }

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

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

    # Tab menu entry (###LINK### can also be used in combination with the linkField property)
    tabMenuEntry {
        wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###">|</a></li>

        # alternative wrap if you want to jump directly to the tab if the location hash changes
        # wrap = <li id="###ID###" class="###CLASSES###"><a href="###LINK_ANCHOR###" id="###LINK_ID###">|</a></li>
    }
}

插件设置

模式

显示内容元素

从tt_content表检索标签内容。

显示页面

从页面表检索标签内容。

组合

使用tt_content和页面表检索内容

页面和内容

在此处，您可以选择要显示在标签中的页面或单个内容元素

打开“选择页面”对话框
打开“选择页面内容”对话框

覆盖标签标题

在此处，您可以指定一个以换行符分隔的优先菜单标题列表。

启用自动播放

如果启用此设置，则标签将在给定的时间间隔内自动切换。

自动播放间隔

设置自动播放选项的时间间隔。如果禁用自动播放，则忽略。

启用鼠标悬停导航

如果启用此设置，则在鼠标悬停事件上切换标签，而不是单击。

哈希

如果单击标签以实现历史和直接链接功能，则作为URL锚点的名称的前缀显示。

样式

新版本提供了自己的样式，包括CSS和SASS。要编译SASS，可以使用以下命令：

sass Resources/Public/Sass/df_tabs.scss Resources/Public/StyleSheets/df_tabs.css --style -C --sourcemap=none

JavaScript

从8.1.0版本开始，将加载一个功能齐全的JavaScript文件到前端，该文件不需要任何额外的库。可以通过清空typoscript变量`plugin.tx_dftabs_plugin1.js.dftabs`来禁用JavaScript文件。

sgalinski / df-tabs

维护者

详细信息