"Tabs" plugin

Parent Previous Next

"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):


















Plugin code syntax


The following attributes can be used for {tabs} tag:



{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}



{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}



{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}



{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}



{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}




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}



{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}




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}