"ARI Smart Content - Tabs" plugin creates tabbed content in Joomla! system. The plugin can be enabled/disabled and configured on "Extensions → Plugin Manager" page on Joomla! backend. Common information how to use "ARI Smart Content" applications plugins is here. {tabs} plugin tag is used for the plugin. The following code creates tabbed content with three tabs which are defined manually:
{tabs}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
As you can see tabs are defined using {tab}...{/tab} code. {tab} tag supports title attribute where title for tab is defined. Any HTML code can be used between {tab} and {/tab} tags. It is possible to create nested tabs. The sample code below:
{tabs width="80%"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
The nested tabs below
{tabs}
{tab title="Sub-item 1"}
This is the first item of child tabs
{/tab}
{tab title="Sub-item 2"}
This is the second item of child tabs
{/tab}
{/tabs}
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
One note, if you want to use nested tabs then set "Height" parameter to "Content" value in plugin settings or add heightStyle="content" attribute to {tabs} tag. It is also possible to create tabs based on data from Text data data sources. In this case use source attribute of {tabs} tag to define ID of the data source. For example you have created a data source (and ID of this data source is 5) which selects Joomla! articles from the selected categories and what to create an tabs based on these articles. Use the following plugin code:
{tabs source="5"}
{/tabs}
In this case tabs titles and content will be formatted according to values of "Title template" and "Template" parameters from plugin settings. Possible to use itemTemplate and titleTemplate attributes of {tabs} tag to define custom formatters:
{tabs source="5" titleTemplate="{$title} [{$created}]" itemTemplate="{$introtext}"}
{/tabs}
Plugin settings
The following parameters can be defined on plugin settings page ("Extensions → Plugin Manager → ARI Smart Content - Tabs" page on Joomla! backend):
- Load method is used to specify load method on client side. If it is set to 'On Load', tabs will be created when page and all resources (images, styles and etc.) are loaded by a browser. If it is set to 'DOM Ready', the tabs will be created immediately when page is loaded (it doesn't wait till all resources are loaded, they will be loaded in parallel). In other words, 'DOM Ready' event occurs before 'On Load' and if possible it is preferable to use it instead of 'On Load'. This parameter can be useful to resolve conflict with some 3rd party extensions, if the extension doesn't work properly when it's set to 'DOM Ready', try to switch it to 'On Load'.
- Theme is used to specify the theme which will be used for tabs by default.
- Width is used to specify width which will be used for the tabs by default. Possible values: 500, 80% and etc.
- Height controls the height the tabs widget and each panel. Possible values:
- Auto - all panels will be set to the height of the tallest panel.
- Fill - expand to the available height based on the tabs' parent height.
- Content - each panel will be only as tall as its content.
- Title template is used to create titles dynamically based on data from the selected data source. It is possible to use data source predefined variables (like {$title}, {$introtext} and etc.) and HTML code.
- Template is used to create content for tabss dynamically based on data from the selected data source. It is possible to use data source predefined variables (like {$title}, {$introtext} and etc.) and HTML code.
- Default panel index is used to specify zero-based index of the panel which will be opened by default. Use 0 if want to open the first panel, 1 if want to open the second panel and etc. If you want to show all panels in closed state, set the parameter to -1 value and 'Collapsible' parameter to 'Yes'.
- Collapsible is used to specify whether all the sections can be closed at once. Allows collapsing the active section.
- Open panels on is used to specify the event that the tabs should react to in order to activate the tab.
- Hide duration is used to specify duration of the animation in milliseconds which will be used for animation when tab content is hiding. Possible values: 200, 750 and etc.
- Hide effect is used to choose an animation effect which will be used when tab content is hiding.
- Show duration is used to specify duration of the animation in milliseconds which will be used for animation when tab content is showing. Possible values: 200, 750 and etc.
- Show effect is used to choose an animation effect which will be used when tab content is showing.
Plugin code syntax
The following attributes can be used for {tabs} tag:
- active is used to override Default panel index parameter from plugin settings. For example if want to show the second tab is opened by default, use the following plugin code:
{tabs active="1"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
or the following code if want to show all tabs in closed state:
{tabs active="-1" collapsible="1"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- collapsible is used to override Collapsible parameter from plugin settings. Possible values: 0 and 1. Use the following code if want to disable collapsing of active section:
{tabs collapsible="0"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- event is used to override Open panels on parameter from plugin settings. Possible values: click, mouseover. The following code open tabs on mouse over:
{tabs event="mouseover"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- heightStyle is used to override Height parameter from plugin settings. Possible values: auto, content and fill. Height of each panel will be only as tall as its content with the following code:
{tabs heightStyle="content"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- hide_duration is used to override Hide duration parameter from plugin settings. Possible values: 200, 535 and etc. The following code set duration of hiding effect to 600 milliseconds:
{tabs hide_duration="600"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- hide_fx is used to override Hide effect parameter from plugin settings. You can see each easing effect in action here. Possible values:
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
- swing
The following code set animation effect to easeInBack value:
{tabs hide_fx="easeInBack"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- show_duration is used to override Show duration parameter from plugin settings. Possible values: 200, 535 and etc. The following code set duration of showing effect to 700 milliseconds:
{tabs show_duration="700"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}
- show_fx is used to override Show effect parameter from plugin settings. You can see each easing effect in action here. Possible values:
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
- swing
The following code set animation effect to easeInBack value:
{tabs show_fx="easeInBack"}
{tab title="Item 1"}
This is the first item
{/tab}
{tab title="Item 2"}
This is the second item
{/tab}
{tab title="Item 3"}
This is the third item
{/tab}
{/tabs}