Commit a91f51f3 authored by Tim Wagner's avatar Tim Wagner
Browse files

[BUGFIX] Fix README code elements and update broken icon URLs

parent 4ac27a9c
......@@ -13,12 +13,12 @@ TYPO3 version: >7.6
## About
This extension adds a new plugin to the content element wizard that provides the user the possibility to define other content elements and pages as tab based content.
Furthermore you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect.
Furthermore, you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect.
## Installation
1. Install the extension with the extension manager
2. Add the static template of the extension to your template of your root page or you extension root templates
2. Add the static template of the extension to your template of your root page, or your extension root templates
3. Download and include the MooTools Core or JQuery (If your project already has MooTools or JQuery included, skip this step)
......@@ -32,152 +32,158 @@ Furthermore you can define an auto-play mechanism with a custom interval to impl
If you want to use the new Fluid Renderer, very little configuration is necessary. Just overwrite the following in your TypoScript Configuration:
```
```TypoScript
plugin.tx_dftabs_plugin1.renderer = Fluid
```
The output can be completely controlled from within the Fluid-Template ```(EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html)```. Just overwrite it to adjust it to your needs.
The output can be completely controlled from within the Fluid-Template `(EXT:df_tabs/Resources/Private/Templates/Standard/Tabs.html)`.
Just overwrite it to adjust it to your needs.
Please note that the Fluid Renderer does not come with preconfigured CSS or JavaScript. You have to add this on your own.
#### TypoScript Renderer (deprecated)
##### TypoScript Constants
# 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
```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
# 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
# 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
}
# 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
# Enables the usage of the inline javascript that triggers the functionality
enableJavascript = 1
# Default tab title if the given information is empty
defaultTabTitle = Tab
# Default tab title if the given information is empty
defaultTabTitle = Tab
#
classPrefix = tx-dftabs-
#
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
# 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
# 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
# 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
# the tab index where the animation should start (starts with 0)
startIndex = 0
#
forceUsageOfLeft = false
#
forceUsageOfLeft = false
# Node type that is used for the tab menu
menuNodeType = li
# Node type that is used for the tab menu
menuNodeType = li
# Node type that is used for the tab content
contentNodeType = div
# 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 =
# 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$
# 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
# flexform options for the plugin usage with plain typoscript
# Enables the autoplay functionality
enableAutoPlay = 0
# Enables the autoplay functionality
enableAutoPlay = 0
# Interval of the autoplay functionality in ms
autoPlayInterval = 7000
# Interval of the autoplay functionality in ms
autoPlayInterval = 7000
# Enables the mouseover event for tab switches instead of simple clicks
enableMouseOver = 0
# 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
# Data Provider Mode: tt_content, pages, combined and typoscript
mode = tt_content
# Comma separated list of preferred menu titles
titles =
# 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 =
# 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 {
# pages mode related configuration settings
pages {
# Limit of fetched content elements from a page
limit = 999
# Limit of fetched content elements from a page
limit = 999
# Order clause for the content elements
orderBy = colPos,sorting
# Order clause for the content elements
orderBy = colPos,sorting
# Extra filter for content elements from a page
additionalWhere = AND colPos >= 0
# Extra filter for content elements from a page
additionalWhere = AND colPos >= 0
# Title field for the tab menu
titleField = title
# Title field for the tab menu
titleField = title
# Link field for links
linkField = uid
}
# Link field for links
linkField = uid
}
# tt_content mode related configuration settings
tt_content {
# tt_content mode related configuration settings
tt_content {
# Title field for the tab menu
titleField = header
# Title field for the tab menu
titleField = header
# Link field for links
linkField = header_link
}
# Link field for links
linkField = header_link
}
```
#### Output customization
There are various settings in the **setup.txt** TypoScript file, which allow you to customize the output beyond 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>
}
}
```TypoScript
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>
}
}
```
#### Plugin Settings
......@@ -197,9 +203,9 @@ Use the tt_content and the pages table to retrieve the content
##### Pages and content
Here you can select pages or single content elements, that should be displayed in a tab:
<img height="20px" width="20px" src="https://camo.githubusercontent.com/c366677d070f7a1775a8c0d2518568c4c3095e72/68747470733a2f2f7261776769742e636f6d2f5459504f332f5459504f332e49636f6e732f6d61737465722f646973742f617070732f617070732d70616765747265652d706167652d64656661756c742e737667"> Opens the "Select Page" dialog
<img height="20px" width="20px" src="https://raw.githubusercontent.com/TYPO3/TYPO3.Icons/master/src/apps/apps-pagetree-page-hideinmenu.svg"> Opens the "Select Page" dialog
<br>
<img height="20px" width="20px" src="https://camo.githubusercontent.com/1cd0e59939bcd63da9e8e872decb330de013023b/68747470733a2f2f7261776769742e636f6d2f5459504f332f5459504f332e49636f6e732f6d61737465722f646973742f636f6e74656e742f636f6e74656e742d746578742e737667"> Opens the "Select Page Content" dialog
<img height="20px" width="20px" src="https://raw.githubusercontent.com/TYPO3/TYPO3.Icons/master/src/content/content-text.svg"> Opens the "Select Page Content" dialog
---
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment