DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
EXT: df_tabs¶
Author: | Christopher |
---|---|
Created: | 2010-12-18T19:57:23 |
Changed: | 2013-06-27T19:54:41 |
Classification: | df_tabs |
Description: | The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab “language” —- forEditors (use this for editors / german “Redakteure”) forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags —- |
Keywords: | tabs, mootools, jquer, forAdmins, forBeginners |
Author: | Stefan Galinski |
Email: | sgalinski@df.eu |
Language: | en |
EXT: df_tabs¶
Extension Key: df_tabs
Language: en
Keywords: tabs, mootools, jquer, forAdmins, forBeginners
Copyright 2011, domainfactory GmbH, (Stefan Galinski <stefan.galinski@gmail.com>)
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.org
Table of Contents¶
`EXT: df_tabs 1 <#__RefHeading__5708_1738894311>`_
`Introduction 3 <#__RefHeading__5710_1738894311>`_
`Users manual 5 <#__RefHeading__467_413120346>`_
Rendering with the content plugin 5
`Administration 7 <#__RefHeading__31511_818911409>`_
`Configuration 8 <#__RefHeading__1127_395737253>`_
`Known problems 11 <#__RefHeading__31525_818911409>`_
Introduction¶
What does it do?¶
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 like demonstrated in the screenshots section. The plugin includes an AJAX feature to load the contents of the tab plugin after the onready state excluding the first tab content to prevent flickering. This improves the initial loading performance for e.g. tabs with lot’s of images.
Furthermore you can define an auto-play mechanism with a custom interval to implement an auto-sliding effect like shown in the screenshots sections. The auto-sliding mechanism is included in the extensions, but you must add it yourself to the plugin. Therefore the extension provides rich configuration settings and custom events inside the javascript. You can find details in the configuration section.
Screenshots¶
An example for a basic tab menu with the usage of subpages. The example can be found on the ManagedServer section on www.df.eu .
Another example for the already mentioned auto-sliding functionality. Please note that this is implemented by a custom script that must be included for each plugin manually. The live example can be found on the start page of www.df.eu .
Users manual¶
Rendering with the content plugin¶
The typical usage of the plugin is straight forward. Just create a content element with the type “plugin” and selectthe specific tabs plugin from the select list. You can set several configuration options within the content element, but the most stuff is available via typoscript. Please refer to the configuration section for more details.
You don’t need to select any content elements and pages in the data box of the plugin, because some data can be collected automatically if you don’t define a specific list of elements for the tab menu. If you select the pages mode then all subpages of the currentone are rendered as tabs. The tt_content mode fetches all content elements in the same column as the tabs plugin. Only in the combined mode you are forced to select custom data.
Rendering with typoscript¶
Sometimes the usage of a content element with fixed pages or other content elements as tabs aren’t flexible enough. Below is a complete example how you can accomplish a custom tab menu with two different typoscript templates as tab contents.
MENU < plugin.tx_dftabs_plugin1
MENU {
mode = typoscript
titles = Wer wir sind und was wir machen,News und Aktionen
stdWrap.typoscriptData {
tab1 {
cObject = TEMPLATE
cObject {
template = FILE
template.file = fileadmin/plugins/df_tabs/tab1.html
marks {
# my template markers
}
}
}
tab2 {
cObject = TEMPLATE
cObject {
template = FILE
template.file = fileadmin/plugins/df_tabs/tab2.html
marks {
# my template markers
}
}
}
}
Administration¶
Installation¶
The installation of the extension is straight forward and explained in the list ahead.
Install the extension from the TER with the extension manager
Add the static template of the extension to your template of your root page or you extension root templates
Download and include the MooTools Core or JQuery
Implement your custom css code and override the include configuration option in the constants of the very same template with the integration of the static template from df_tabs
Configuration¶
Reference¶
Please note that all flexform options can be also set with typoscript and are not separately included in this list.
TypoScript Constants
css¶
Property
css
Data type
file
Description
The css file that should be used.
Default
Valid File Reference
js.¶
Property
js.
Data type
Description
Default
history¶
Property
history
Data type
file
Description
History Javascript file that implements the back button for tabs
Default
Valid File Reference
historyRouting¶
Property
historyRouting
Data type
file
Description
History Router Javascript file (see above)
Default
Valid File Reference
app¶
Property
app
Data type
file
Description
Javascript that implements the default tab functionality
Default
Valid File Reference
enableJavascript¶
Property
enableJavascript
Data type
boolean
Description
Enables the usage of the inline javascript that triggers the functionality
Default
1
defaultTabTitle¶
Property
defaultTabTitle
Data type
string
Description
Default tab title if the given information is empty
Default
Tab
classPrefix¶
Property
classPrefix
Data type
string
Description
Prefix for classes and ids to prevent html errors and styling problems if multiple plugins are used on the same page
Default
tx-dftabs-
hashName¶
Property
hashName
Data type
string
Description
Name that is displayed as the prefix of the anchor for the url if a tab was clicked to implement the history and direct linking functionality to the tabs
Default
tab
pollingInterval¶
Property
pollingInterval
Data type
int
Description
Polling interval to detect url changes for the history functionality in ms
Default
1000
animationSpeed¶
Property
animationSpeed
Data type
int
Description
Animation speed (if a transition effect between the tabs is used)
Default
400
contentNodeType¶
Property
contentNodeType
Data type
string
Description
Node type that is used for the tab content
Default
div
animationCallback¶
Property
animationCallback
Data type
string
Description
Javascript callback function that is triggered for the tab switches, the default is no animation
Default
ajax¶
Property
ajax
Data type
boolean
Description
Use ajax for post-loading of the contents to improve the initial loading performance
Default
0
enableAutoPlay¶
Property
enableAutoPlay
Data type
boolean
Description
Enables the autoplay functionality
Default
0
autoPlayInterval¶
Property
autoPlayInterval
Data type
int
Description
Interval of the autoplay functionality in ms
Default
7000
enableMouseOver¶
Property
enableMouseOver
Data type
boolean
Description
Enables the mouseover event for tab switches instead of simple clicks
Default
0
mode¶
Property
mode
Data type
string
Description
Data Provider Mode: tt_content, pages, combined and typoscript
Default
tt_content
titles¶
Property
titles
Data type
string
Description
Comma-separated list of preferred menu titles
Default
data¶
Property
data
Data type
string
Description
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)
Default
pages.¶
Property
pages.
Data type
Description
The first three options below are depending on the typoscript setup
Default
limit¶
Property
limit
Data type
int
Description
Limit of fetched content elements from a page
Default
999
orderBy¶
Property
orderBy
Data type
string
Description
Order clause for the content elements
Default
colPos,sorting
additionalWhere¶
Property
additionalWhere
Data type
string
Description
Extra filter for content elements from a page
Default
titleField¶
Property
titleField
Data type
string
Description
Title field for the tab menu
Default
title
linkField¶
Property
linkField
Data type
string
Description
Link field for links
Default
target
ajaxFallbackTextField¶
Property
ajaxFallbackTextField
Data type
string
Description
Ajax fallback text field for non-javascript users with the ajax option; Note that this text must be visible in the Ajax and Fallback mode or you will get problems with cloaking
Default
subtitle
tt_content.¶
Property
tt_content.
Data type
Description
Default
titleField¶
Property
titleField
Data type
string
Description
Refer to pages.titleField
Default
header
linkField¶
Property
linkField
Data type
string
Description
Refer to pages.linkField
Default
header_link
ajaxFallbackTextField¶
Property
ajaxFallbackTextField
Data type
string
Description
Refer to pages.ajaxFallbackTextField
Default
altText
[tsref:plugin.tx_dftabs_plugin1]
TypoScript Setup
Extra stuff that can be found in the setup of the typoscript template
events.¶
Property
events.
Data type
Description
Default
onBeforeInitialize¶
Property
onBeforeInitialize
Data type
string
Description
JS callback method triggered before the final initialisation, but after the ajax loading
Default
function() {}
onAfterInitialize¶
Property
onAfterInitialize
Data type
string
Description
JS callback method triggered after the final initialisation
Default
function() {}
onTabChange¶
Property
onTabChange
Data type
string
Description
JS callback method triggered on tab changes
Default
function() {}
stdWrap.¶
Property
stdWrap.
Data type
Description
Default
typoscriptData¶
Property
typoscriptData
Data type
stdWrap
Description
Content of the Tabs (tab<No.> will be incremented for each tab)
typoscriptData.tab1.cObject = TEXT
typoscriptData.tab1.cObject.value = myTabContent
Default
typoscriptLinks¶
Property
typoscriptLinks
Data type
stdWrap
Description
Link information for the tab menu entries if required (tab<No.> will be incremented for each tab)
typoscriptLinks.tab1.cObject = TEXT typoscriptLinks.tab1.cObject.value = 12 _blank
Default
typoscriptAjaxFallbackText¶
Property
typoscriptAjaxFallbackText
Data type
stdWrap
Description
Fallback text for the ajax option
Note: This text must be visibile in the fallback and AJAX version, because of cloaking issues! (tab<No.> will be incremented for each tab)
typoscriptAjaxFallbackText.tab1.cObject = TEXT typoscriptAjaxFallbackText.tab1.cObject.value = Fallback Text
Default
records¶
Property
records
Data type
stdWrap
Description
Extra configuration for the rendering of tt_content elements for the modes pages, tt_content and combined
Default
pages¶
Property
pages
Data type
stdWrap
Description
Functionality how to retrieve or process pages; By default it fetches all direct subpages of the current page as tabs if no elements are selected in the flexform
Default
See desc
tt_content¶
Property
tt_content
Data type
stdWrap
Description
Functionality how to retrieve or process content; By default it fetches all content elements except itself from the column where the plugin was added
Default
See desc
tabTitle.wrap¶
Property
tabTitle.wrap
Data type
stdWrap
Description
Output Customisation (see setup.txt for the default and the user section)
Default
html
tabContents.wrap¶
Property
tabContents.wrap
Data type
stdWrap
Description
Output Customisation (see setup.txt for the default and the user section)
Default
html
tabContent.wrap¶
Property
tabContent.wrap
Data type
stdWrap
Description
Output Customisation (see setup.txt for the default and the user section)
Default
html
Known problems¶
Bugtracker¶
If you think that you found a bug then please report it to the project bugtracker .