.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline =========== EXT: rgtabs =========== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2008-06-26T14:28:26 :Author: Georg Ringer :Email: http://www.ringer.it :Info 3: :Info 4: .. _EXT-rgtabs: EXT: rgtabs =========== Extension Key: **rgtabs** Copyright 2000-2002, Georg Ringer, 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.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: rgtabs 1** **Introduction 1** What does it do 1 Screenshots 1 Demonstration 2 **Users manual 2** Installation 2 Installation with another Mootools EXT installed 3 Using rgtabs 3 FAQ 3 **Configuration 3** Reference 3 **Advanced configuration 4** Override the records with TS 4 Override the title of the tabs with TS 5 Graphical header for the tab menu 5 **Use the idea of rgtabs 6** **HowTo: Tabs in TemplaVoila with printing preview. 6** **You like the extension? 8** **Known problems 8** **Changelog 8** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do ^^^^^^^^^^^^^^^ The extension rgtabs lets you toggle content element and it is also possible to have an rgtab inside another one. The content can be loaded with Ajax or can be just switched with some javascript. It is fully style able with CSS and is based on Mootools. Take a look at the the demo to get a nice impression: `http://www.rggooglemap.com/dev/rgtabs.html `_ .. _Screenshots: Screenshots ^^^^^^^^^^^ |img-1| **Image 1:** You can see 3 tabs, the first one selected and inside in it there is a content element “Text with image” |img-2| **Image 2:** The configuration the Backend: Choose the content elements and you are done .. _Demonstration: Demonstration ^^^^^^^^^^^^^ To get a better impression about rgtabs, please visit the demo website for some examples: - In English: `http://www.rggooglemap.com/en/dev/rgtabs.html `_ - In German: `http://www.rggooglemap.com/dev/rgtabs.html `_ .. _Users-manual: Users manual ------------ .. _Installation: Installation ^^^^^^^^^^^^ Import/Download the extension and install it like every other extension. Include the static TS (from extension) in the template record (your root TS or make an ext. template just for the page where you want the extension be displayed). :underline:`**The steps for the real beginners are**` : Select your root/first page. Click in the menu on the left side “Template” and choose “Edit whole record”. Scroll down until you see the the same thing as in the screenshot shown. Search for the “rgtabs” entry on the right side, click on it to get it on the left side. Press “Save” and you are done. |img-3| Configure the extension using the flexform settings – See the steps below (it is still very easy) .. _Installation-with-another-Mootools-EXT-installed: Installation with another Mootools EXT installed ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ If there is another extension installed which uses Mootools (like pmkslimbox, rgsmoothgallery, rgsmoothscroll, ...) you need to use the extension t3mootools! Please take a look at the manual there – it is very simple to do! .. _Using-rgtabs: Using rgtabs ^^^^^^^^^^^^ To use rgtabs you need to add the extension as content element on a page. Now just select the content elements you want to display with this extension. One possible way is to create an extra sys folder or page which is hidden in the menu and place the content elements there. There is only one field required and this is the records field because you need at least 1 CE which should get shown (obvious). **Selecting pages** Since the version 2.3.0 it is also possible to select pages. Switch the mode to “Show pages” and select the pages you wanna display. The field “CE break” is used to set how many content elements from each page should get loaded. .. ### BEGIN~OF~TABLE ### .. _Mode: Mode """" .. container:: table-row Property Mode Description Choose “Show content elements” to pick content elements or choose “Show pages” to pick pages. After changing you need to save the content element!! .. _Choose-all-records: Choose all records """""""""""""""""" .. container:: table-row Property Choose all records Description If mode is “Choose content elements”: Choose the records you want to display. .. _Choose-pages: Choose pages """""""""""" .. container:: table-row Property Choose pages Description If mode is “Choose pages”: Choose the pages you want to display. .. _Override-titles: Override titles """"""""""""""" .. container:: table-row Property Override titles Description As default the title of the CE is taken for the title of the menu but you can override it in this field. Every line stands for one tab. .. _CE-breaks: CE breaks """"""""" .. container:: table-row Property CE breaks Description **If Mode = Choose all records** It is possible to display as many CE in one tab as you like. Here you can choose which CE is displayed in which tab. **Here are some examples:** *Empty field:* 1 CE per tab. *1\|1\|2* : 1 CE in 1 :sup:`st` tab, 1 in the 2 :sup:`nd` and 2 in the 3 :sup:`rd` *2\|1* :2 CE in the 1 :sup:`st` tab, 1 in the 2 :sup:`nd` *1\|3\|1* : 1 CE in the 1 :sup:`st` tab, 3 in the 2 :sup:`nd` and 1 in the 3 :sup:`rd` I hope you get the idea! **If Mode == Choose all pages** Here you can select how many content elements of each page are shown! Which content elements from which language and which column is set by TS, please take a look at the reference! .. _Use-ajax: Use ajax """""""" .. container:: table-row Property Use ajax Description If checked, the content is called with Ajax. If not, the content is loaded but hidden with CSS. Pro Ajax: The page itself is smaller Con Ajax: - Search engines and indexed search won't see the content of the other tabs - The page itself is little bit bigger (but everything is cached by TYPO3, so shouldn't be that big deal). .. _I-m-a-child-element: I'm a child element """"""""""""""""""" .. container:: table-row Property I'm a child element Description This is just needed if you want to display a rgtab inside a rgtab. .. _Start-with-tab: Start with tab # """""""""""""""" .. container:: table-row Property Start with tab # Description You can load another tab than the 1 :sup:`st` one as default .. ###### END~OF~TABLE ###### .. _FAQ: FAQ ^^^ - **Q:** How does it work with multilingual websites? **A:** You need to select the translated CE yourself! - **Q:** How does it work with an Ajax rgtab inside another Ajax rgtab? **A:** Not at all, sorry! .. _Configuration: Configuration ------------- There is not much to configure because everything is quite simple. If you are advanced in TS, take a look at the section “Advanced configuration”. .. _Reference: Reference ^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _mode: mode """" .. container:: table-row Property mode Data type string Description The mode which is used! Either use “TTCONTENT” or “PAGES” Default .. _pathToMootools: pathToMootools """""""""""""" .. container:: table-row Property pathToMootools Data type string Description The path to the Mootools library if t3mootools isn't used. Default EXT:rgtabs/res/scripts/mootools.js .. _pathToJS: pathToJS """""""" .. container:: table-row Property pathToJS Data type string Description The path to the Mootols script for the tabs. Default EXT:rgtabs/res/scripts/rgtabs.js .. _pathToCSS: pathToCSS """"""""" .. container:: table-row Property pathToCSS Data type string Description The path to the CSS file which is used. Default EXT:rgtabs/res/css/rgtabs.css .. _delay: delay """"" .. container:: table-row Property delay Data type Int (ms) Description It is possible to make an automatic switch between the tabs by using delay. The value is in milliseconds!An example is online at `http://www.rggooglemap.com/dev/rgtabs/automatischer-wechsel.html `_ Default .. _records: records """"""" .. container:: table-row Property records Data type string Description List of IDs of content elements to override selection inside the plugin. Default .. _pages: pages """"" .. container:: table-row Property pages Data type string Description List of IDs of pages to override selection inside the plugin. Default .. _showAsFirst: showAsFirst """"""""""" .. container:: table-row Property showAsFirst Data type int Description The tab which is opened as default. Default .. _ajax: ajax """" .. container:: table-row Property ajax Data type boolean Description Enable ajax, otherwise the tabs are already loaded which is usually faster and search engines can find the hidden tabs too. Default .. _breaks: breaks """""" .. container:: table-row Property breaks Data type string Description The CE breaks, read its description one chapter before. Default .. _limit: limit """"" .. container:: table-row Property limit Data type int Description The default count of content elements per page if mode is “Show pages”. Default 2 .. _orderBy: orderBy """"""" .. container:: table-row Property orderBy Data type string Description The default used orderby statement of content elements if mode is “Show pages”. Default sorting .. _additionalWhere: additionalWhere """"""""""""""" .. container:: table-row Property additionalWhere Data type string Description The additional where clause if mode is “Show pages”. This can also be used to just show content elements of one language by using AND sys\_language\_uid = 0. Default AND colPos = 0 .. _showMenuBelow: showMenuBelow """"""""""""" .. container:: table-row Property showMenuBelow Data type boolean Description Show the tab menu below of the content area Default 0 .. ###### END~OF~TABLE ###### [tsref: plugin.tx\_rgtabs\_pi1] There is an alternative CSS file (EXT:rgtabs/res/css/rgtabs\_alt.css) and the extension looks like this: `http://www.rggooglemap.com/dev/rgtabs/alternatives-css.html `_ .. _Advanced-configuration: Advanced configuration ---------------------- There are some very nice samples I included at res/helpfull\_ts/ and here is a short explanation. .. _Override-the-records-with-TS: Override the records with TS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ With this little script (res/helpful\_ts/override\_records.txt) it is possible to pass the records with a dynamic TS-script to the plugin. There is no demo website for this because you wouldn't see a difference ;) :: 00 #TS Code 01 plugin.tx_rgtabs_pi1 { 02 records.override.cObject = COA 03 records.override.cObject { 04 10 = CONTENT 05 10 { 06 table = tt_content 07 select { 08 pidInList = this 09 orderBy = sorting 10 # colPos = 3 = Border column 11 where = colPos= 3 12 selectFields = uid 13 } 14 15 renderObj = TEXT 16 renderObj.field = uid 17 renderObj.wrap = |, 18 19 } 20 # only if there are no 21 if.isFalse.field = tx_rgtabsRecords 22 23 } 24 } **Explanation** The script gets all records from the same page which are saved in the column “Border” (#11) but **only** if there is no CE saved in the plugin itself (#21). With this code you can load any default CE into the tab and override it what you want. **Override the pages with TS** To override pages is working the same way as overriding the records. You can find the sample at res/helpful\_tl/override\_pages.txt). .. _Override-the-title-of-the-tabs-with-TS: Override the title of the tabs with TS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Sometimes you don't want to display the title in the tab menu but any other field of the content element, e.g. the date or even an image. You can do this with the script (res/helpful\_ts/override\_title.txt). You can take a look at it here in English `http://www.rggooglemap.com/en/dev/rgtabs/title-variations.html `_ and in German `http://www.rggooglemap.com/dev/rgtabs/titelvariationen.html `_ :: 00 TS Code 01 plugin.tx_rgtabs_pi1 { 02 title.cObject = RECORDS 03 title.cObject { 04 tables = tt_content 05 # this does the magic and holds the uid of the contentelement 06 source.field = tx_rgtabsTitle 07 dontCheckPid = 1 08 09 conf.tt_content = COA 10 conf.tt_content { 11 10 = TEXT 12 10.field= header 13 14 20 = TEXT 15 20.field = uid 16 20.wrap =  (|) 16 17 30 = IMAGE 18 30 { 19 file.maxH = 200 20 file.maxW = 40 21 file.import=uploads/pics/ 22 file.import.data = levelmedia: -1,slide 23 file.import.listNum = 0 24 file.import.override.field = image 25 } 26 } 27 } 28 } **Explanation** In the lines #11-#24 the magic does happen. There you can add every cObj of TYPO3 (see TsRef for more details) to the title. With this code you will get the title, followed by the UID of the CE and then, if it is a CE “Image” or “Text with Image” the 1 :sup:`st` image of the CE. .. _Graphical-header-for-the-tab-menu: Graphical header for the tab menu ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Is is also possible to create graphical headers for the tab menu but it is kind of tricky to get a good result. If you got a better TS, please send it to me! You can take a look at it here in English `http://www.rggooglemap.com/en/dev/rgtabs/graphical-header.html `_ and in German `http://www.rggooglemap.com/dev/rgtabs/grafische- ueberschriften.html `_ :: # TS Code plugin.tx_rgtabs_pi1 { title.cObject = RECORDS title.cObject { tables = tt_content # this does the magic and holds the uid of the contentelement source.field = tx_rgtabsTitle dontCheckPid = 1 conf.tt_content = COA conf.tt_content { 10 = IMAGE 10 { file = GIFBUILDER file { XY = [10.w]+5,26 transparentColor = #f5f5f5 backColor = #f5f5f5 10 = TEXT 10.text.field = header #10.text.crop= 15||1 10.fontSize = 15 10.offset = 0,20 10.fontFile = fileadmin/fonts/LIBSA1.TTF 10.fontColor = #587BA9 # 10.niceText = 1 } } } } } .. _Use-the-idea-of-rgtabs: Use the idea of rgtabs ---------------------- Of course you can also just use the JavaScript of this extension for your own projects! This is very easy and the following example should show you why! Take a look at the demo `http://www.rggooglemap.com/dev/rgtabs/rgtabs- mit-tt-news.html `_ There you will see 4 tabs and the tab title stands for a tt\_news category and holds all records of this category! You will find the TS for this in the extension directory rgtabs/res/helpful\_ts/rgtabs+tt\_news.txt **If you have got a nice example, please send me a mail, I would like to see it!** .. _HowTo-Tabs-in-TemplaVoila-with-printing-preview: HowTo: Tabs in TemplaVoila with printing preview. ------------------------------------------------- Tabs are great, however they have a little disadvantage when it comes to printing. Therefore this small tutorial which covers easy to handle creation of content elements in TemplaVoila, adding them to the rgtabs plugin and accessing them in TemplaVoila's printing mode. First, we assume, you have two content elements which are containers for elements. The corresponding xml should look something like this: :: Content_Main Here are some CEs and the tabs plugin ce div | ]]> group db tt_content 5 20 0 1 1 Content_Details These are the CEs which will be rendered inside the tabs Some content for Tabs ce div | ]]> group db tt_content 5 20 0 1 1 So, the first CE is mainly for the tabs-plugin to hold. The second CE is for the content elements that will be rendered inside the tabs. Now map both of them into the place you like in your HTML-Template. Do the same in your printing template if you have one. At this time, you are ready to create content in the Content\_Details column with the TemplaVoila page module and add it to the tabs-plugin. The drawback is, that all the content is obviously rendered twice, because it is once mapped in TemplaVoila and once within the tabs. The same happen in the printing page. Now, how do we avoid this: Let's first see to the printing page because this is easy. In your TS-Template where you define the printing properties add the lines :: # Disable Tabs when in printing modus plugin.tx_rgtabs_pi1 > So that the whole looks something like # The Print Modus [globalVar = GP:print > 0] # We do some stuff like disabling CSS ... # Disable Tabs when in print modus plugin.tx_rgtabs_pi1 > ... [GLOBAL] Preview your printing page and you will notice that the rgtabs plugin is not rendered any more on the printing page. Now we have to disable the „normal“ version of the content elements on the page, where we only want to see the tabs. This is done by a little trick: In your TV-XML you have to add some lines (if they aren't already there by default) :: Content_Main Here are som CEs and the tabs plugin ce div | ]]> 2 group db tt_content 5 20 0 1 1 Content_Details These are the CEs which will be rendered inside the tabs Some content for Tabs ce lib.details div | ]]> 3 group db tt_content 5 20 0 1 1 You might notice two differences: First, both CEs have the tag „ ... which refers to the column model if you are not using TemplaVoila. The other difference is, that the field\_content\_details now is an and is called „lib.details“. Of course, you can give it any name you want. The clue is, that any content element that is an TypoScript Objectpath is not rendered in the FE at all, unless you tell it what to do. So now, in the normal mode, we have the desired result (no rendering of the CEs from the column „Content\_Details“ but only from the rgtabs plugin). In the printing mode however we now have none of the content rendered any more. That is why we added the oldStyleColumnNumber tag into the XML. Again, we have to go to our TS-Template and add some stuff where the printing mode is defined. We add the following lines: :: # Now we have to import the content that is not shown in the normal view # TypoScript Object Path is defined in TV XML # will be overwritten with the required content elements lib.details = CONTENT lib.details{ #content from the table tt_content table = tt_content # select statement via old Column Model, remember the lines #3 in TV XML select{ pidInList = this where = colpos=3 selectFields.uid } } With this script, everything should be fine and you can see the tabs on the normal pages and the content without tabs on the printing pages. So, what did the trick? When in printing mode, we simply select the content from the actual page, but only the elements which are in the „old“ column with the number 3 and render it as content in the HTML-Container into which we mapped the field\_content\_details. All other content is in the „old“ column 2 and is rendered just normal. If anyone knows a better way on how to achieve this, please let me know. If you have any comments or improvements for this tutorial, or if you even found an error, please write them to `typo3@mda.ch `_ and not to Georg who wrote the great rgtabs extension. .. _You-like-the-extension: **You like the extension?** --------------------------- If you like this extension, you can do one or more of the following things: - Write me a mail or create a posting at `http://www.rggooglemap.com/dev/rgtabs.html `_ - Please rate the extension in the Repository: `http://typo3.org/extensions/ `_ search for rgtabs, click on the title and then at “Ratings” (You need to be registered and logged in at typo3.org) - Donate something, so that I can write those kind of extensions for you. More information is here: German: `http://www.rggooglemap.com/menu/spende.html `_ and English: `http://www.rggooglemap.com/en/2/donate.html `_ . Thanks! **One of these things is the least you can do because I spend hours just for this, for nothing!** .. _Known-problems: Known problems -------------- None that i know. Just the usual Ajax-lib-problem: Problems .. _Changelog: Changelog --------- \- 2.3.0. Selection of pages and updated Reference. \- 2.2.0. Update of the manual, adding the tt\_news example, adding a clear:both in the CSS \- 2.1.0. Enable auto rotation \- 2.0.3. Manual updates, thanks to Tony Lush & Christopher Schnell \- 2.0.2. Just small fix: Setting max tab to 50 \- 2.0.1. Manual updates \- 2.0.0. Complete rewrite with Ajax, Mootools and more options \- 1.0.0. Initial release |img-4| EXT: rgtabs - 9 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 203 .. :id: Grafik1 .. :name: Grafik1 .. :width: 321 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 308 .. :id: Grafik2 .. :name: Grafik2 .. :width: 458 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 225 .. :id: Grafik3 .. :name: Grafik3 .. :width: 560 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102