.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============= 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: |img-1| EXT: df\_tabs ===================== Extension Key: df\_tabs Language: en Keywords: tabs, mootools, jquer, forAdmins, forBeginners Copyright 2011, domainfactory GmbH, (Stefan Galinski ) 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: Table of Contents ----------------- **`EXT: df\_tabs 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** `What does it do? 3 <#__RefHeading__463_413120346>`_ `Screenshots 3 <#__RefHeading__465_413120346>`_ **`Users manual 5 <#__RefHeading__467_413120346>`_** `Rendering with the content plugin 5 <#__RefHeading__1145_1939893653>`_ `Rendering with typoscript 5 <#__RefHeading__1147_1939893653>`_ `Rendering of a slider menu 6 <#__RefHeading__1149_1939893653>`_ **`Administration 7 <#__RefHeading__31511_818911409>`_** `Installation 7 <#__RefHeading__1151_1939893653>`_ **`Configuration 8 <#__RefHeading__1127_395737253>`_** `Reference 8 <#__RefHeading__1153_1939893653>`_ **`Known problems 11 <#__RefHeading__31525_818911409>`_** `Bugtracker 11 <#__RefHeading__1142_1939893653>`_ .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: 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: Users manual ------------ .. _Rendering-with-the-content-plugin: 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: 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: 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 =
  •  |
  • } stdWrap.tt_content.ifEmpty.cObject.select { begin = 0 andWhere.cObject.dataWrap = colPos = 0 } } .. _Administration: Administration -------------- .. _Installation: 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: Configuration ------------- .. _Reference: Reference ^^^^^^^^^ Please note that all flexform options can be also set with typoscript and are not separately included in this list. TypoScript Constants .. ### BEGIN~OF~TABLE ### .. _css: css """ .. container:: table-row Property css Data type file Description The css file that should be used. Default Valid File Reference .. _js: js. """ .. container:: table-row Property js. Data type Description Default .. _history: history """"""" .. container:: table-row Property history Data type file Description History Javascript file that implements the back button for tabs Default Valid File Reference .. _historyRouting: historyRouting """""""""""""" .. container:: table-row Property historyRouting Data type file Description History Router Javascript file (see above) Default Valid File Reference .. _app: app """ .. container:: table-row Property app Data type file Description Javascript that implements the default tab functionality Default Valid File Reference .. _enableJavascript: enableJavascript """""""""""""""" .. container:: table-row Property enableJavascript Data type boolean Description Enables the usage of the inline javascript that triggers the functionality Default 1 .. _defaultTabTitle: defaultTabTitle """"""""""""""" .. container:: table-row Property defaultTabTitle Data type string Description Default tab title if the given information is empty Default Tab .. _classPrefix: classPrefix """"""""""" .. container:: table-row 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: hashName """""""" .. container:: table-row 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: pollingInterval """"""""""""""" .. container:: table-row Property pollingInterval Data type int Description Polling interval to detect url changes for the history functionality in ms Default 1000 .. _animationSpeed: animationSpeed """""""""""""" .. container:: table-row Property animationSpeed Data type int Description Animation speed (if a transition effect between the tabs is used) Default 400 .. _menuNodeType: menuNodeType """""""""""" .. container:: table-row Property menuNodeType Data type string Description Node type that is used for the tab menu Default li .. _contentNodeType: contentNodeType """"""""""""""" .. container:: table-row Property contentNodeType Data type string Description Node type that is used for the tab content Default div .. _animationCallback: animationCallback """"""""""""""""" .. container:: table-row Property animationCallback Data type string Description Javascript callback function that is triggered for the tab switches, the default is no animation Default .. _ajax: ajax """" .. container:: table-row Property ajax Data type boolean Description Use ajax for post-loading of the contents to improve the initial loading performance Default 0 .. _enableAutoPlay: enableAutoPlay """""""""""""" .. container:: table-row Property enableAutoPlay Data type boolean Description Enables the autoplay functionality Default 0 .. _autoPlayInterval: autoPlayInterval """""""""""""""" .. container:: table-row Property autoPlayInterval Data type int Description Interval of the autoplay functionality in ms Default 7000 .. _enableMouseOver: enableMouseOver """"""""""""""" .. container:: table-row Property enableMouseOver Data type boolean Description Enables the mouseover event for tab switches instead of simple clicks Default 0 .. _mode: mode """" .. container:: table-row Property mode Data type string Description Data Provider Mode: tt\_content, pages, combined and typoscript Default tt\_content .. _titles: titles """""" .. container:: table-row Property titles Data type string Description Comma-separated list of preferred menu titles Default .. _data: data """" .. container:: table-row 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: pages. """""" .. container:: table-row Property pages. Data type Description The first three options below are depending on the typoscript setup Default .. _limit: limit """"" .. container:: table-row Property limit Data type int Description Limit of fetched content elements from a page Default 999 .. _orderBy: orderBy """"""" .. container:: table-row Property orderBy Data type string Description Order clause for the content elements Default colPos,sorting .. _additionalWhere: additionalWhere """"""""""""""" .. container:: table-row Property additionalWhere Data type string Description Extra filter for content elements from a page Default .. _titleField: titleField """""""""" .. container:: table-row Property titleField Data type string Description Title field for the tab menu Default title .. _linkField: linkField """"""""" .. container:: table-row Property linkField Data type string Description Link field for links Default target .. _ajaxFallbackTextField: ajaxFallbackTextField """"""""""""""""""""" .. container:: table-row 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: tt\_content. """""""""""" .. container:: table-row Property tt\_content. Data type Description Default .. _titleField: titleField """""""""" .. container:: table-row Property titleField Data type string Description Refer to pages.titleField Default header .. _linkField: linkField """"""""" .. container:: table-row Property linkField Data type string Description Refer to pages.linkField Default header\_link .. _ajaxFallbackTextField: ajaxFallbackTextField """"""""""""""""""""" .. container:: table-row Property ajaxFallbackTextField Data type string Description Refer to pages.ajaxFallbackTextField Default altText .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_dftabs\_plugin1] TypoScript Setup Extra stuff that can be found in the setup of the typoscript template .. ### BEGIN~OF~TABLE ### .. _events: events. """"""" .. container:: table-row Property events. Data type Description Default .. _onBeforeInitialize: onBeforeInitialize """""""""""""""""" .. container:: table-row Property onBeforeInitialize Data type string Description JS callback method triggered before the final initialisation, but after the ajax loading Default function() {} .. _onAfterInitialize: onAfterInitialize """"""""""""""""" .. container:: table-row Property onAfterInitialize Data type string Description JS callback method triggered after the final initialisation Default function() {} .. _onTabChange: onTabChange """"""""""" .. container:: table-row Property onTabChange Data type string Description JS callback method triggered on tab changes Default function() {} .. _stdWrap: stdWrap. """""""" .. container:: table-row Property stdWrap. Data type Description Default .. _typoscriptData: typoscriptData """""""""""""" .. container:: table-row Property typoscriptData Data type stdWrap Description Content of the Tabs (tab will be incremented for each tab) :: typoscriptData.tab1.cObject = TEXT typoscriptData.tab1.cObject.value = myTabContent Default .. _typoscriptLinks: typoscriptLinks """"""""""""""" .. container:: table-row Property typoscriptLinks Data type stdWrap Description Link information for the tab menu entries if required (tab will be incremented for each tab) :: typoscriptLinks.tab1.cObject = TEXT typoscriptLinks.tab1.cObject.value = 12 _blank Default .. _typoscriptAjaxFallbackText: typoscriptAjaxFallbackText """""""""""""""""""""""""" .. container:: table-row 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 will be incremented for each tab) :: typoscriptAjaxFallbackText.tab1.cObject = TEXT typoscriptAjaxFallbackText.tab1.cObject.value = Fallback Text Default .. _records: records """"""" .. container:: table-row 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: pages """"" .. container:: table-row 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: tt\_content """"""""""" .. container:: table-row 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: tabTitle.wrap """"""""""""" .. container:: table-row Property tabTitle.wrap Data type stdWrap Description Output Customisation (see setup.txt for the default and the user section) Default html .. _tabContents-wrap: tabContents.wrap """""""""""""""" .. container:: table-row Property tabContents.wrap Data type stdWrap Description Output Customisation (see setup.txt for the default and the user section) Default html .. _tabContent-wrap: tabContent.wrap """"""""""""""" .. container:: table-row Property tabContent.wrap Data type stdWrap Description Output Customisation (see setup.txt for the default and the user section) Default html .. _tabMenu-wrap: tabMenu.wrap """""""""""" .. container:: table-row Property tabMenu.wrap Data type stdWrap Description Output Customisation (see setup.txt for the default and the user section) Default html .. _tabMenuEntry-wrap: tabMenuEntry.wrap """"""""""""""""" .. container:: table-row Property tabMenuEntry.wrap Data type stdWrap Description Output Customisation (see setup.txt for the default and the user section) Default html .. ###### END~OF~TABLE ###### [tsref:plugin.tx\_dftabs\_plugin1] .. _Known-problems: Known problems -------------- .. _Bugtracker: Bugtracker ^^^^^^^^^^ If you think that you found a bug then please report it to the `project bugtracker `_ . .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 310 .. :id: graphics1 .. :name: graphics1 .. :width: 631 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 225 .. :id: graphics2 .. :name: graphics2 .. :width: 631 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 283 .. :id: graphics3 .. :name: graphics3 .. :width: 548 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 211 .. :id: graphics5 .. :name: graphics5 .. :width: 483