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

img-1 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>`_

What does it do? 3

Screenshots 3

`Users manual 5 <#__RefHeading__467_413120346>`_

Rendering with the content plugin 5

Rendering with typoscript 5

Rendering of a slider menu 6

`Administration 7 <#__RefHeading__31511_818911409>`_

Installation 7

`Configuration 8 <#__RefHeading__1127_395737253>`_

Reference 8

`Known problems 11 <#__RefHeading__31525_818911409>`_

Bugtracker 11

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

img-2 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 .

img-3 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
        }
      }
    }
 }

Rendering of a slider menu

The mentioned slider menu can be rendered by using a custom javascript file and callbacks. A typoscript snipplet could look like this one. It’s not possible to add this informations within a df_tabs plugin content element to not clutter the options.

page.includeJS {
   pageTemplate = EXT:df_tabs/Resources/Public/Scripts/tabAnimation.js
}

10 < plugin.tx_dftabs_plugin1
10 {
   mode = tt_content
   classPrefix = custom-prefix
   enableAutoPlay = 1
   enableMouseOver = 1

   animationCallback = dfTabsSmoothImageTransition.tabChange
   events {
      onBeforeInitialize = dfTabsSmoothImageTransition.beforeInitialize
   }

   tt_content.linkField = image_link
   ajax = 1
   stdWrap.tabMenuEntry {
      wrap = <li id="###ID###" class="###CLASSES###"><span>&nbsp;</span><a href="###LINK###" target="###TARGET###" id="###LINK_ID###">|</a></li>
   }

   stdWrap.tt_content.ifEmpty.cObject.select {
      begin = 0
      andWhere.cObject.dataWrap = colPos = 0
   }
}

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

img-4 Download and include the MooTools Core or JQuery

img-5 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

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

tabMenu.wrap

Property

tabMenu.wrap

Data type

stdWrap

Description

Output Customisation (see setup.txt for the default and the user section)

Default

html

tabMenuEntry.wrap

Property

tabMenuEntry.wrap

Data type

stdWrap

Description

Output Customisation (see setup.txt for the default and the user section)

Default

html

[tsref:plugin.tx_dftabs_plugin1]

Known problems

Bugtracker

If you think that you found a bug then please report it to the project bugtracker .