ARI Smart Content: ARI ExtTabs plugin

Joomla! tab module, plugin, extension, component. Joomla! news and articles in tab content.

ARI ExtTabs plugin helps to display your Joomla! content in tabbed view. This plugin from plugins repository, it's open source and you can use it for free if you have one of the following products: ARI Smart Content, ARI Smart Content: DataTable Pack, ARI Smart Content: News Pack or ARI Smart Content: Image Pack. This plugin requires ARI ExtJS Loader plugin for correct work.

Features:
  • Highly customizable
  • Displays HTML content or loads content by URL
  • Supports scrolling tabs
  • Can contain articles from your Joomla! system.

Example: basic tabs

Joomla! quiz component
ARI Quiz is a Joomla quiz component which provides ability to create various tests to evaluate respondent's level of knowledge. It can help organizing quizzes on your Joomla site. It contains many settings and can be configured for your needs. You can successfully use it both for creating big quiz system on your Joomla site or simple quiz with several questions on your site.
ARI Smart Content
ARI Smart Content is a Joomla! component which can help you to make the content of your site more attractive and user-friendly. Idea of ARI Smart content is to create a pluggable tool that combines various content effects like: accordion, tabs, popup, scrollers, news sliders, table wrappers and many other. You don't need technical knowledge to use the power of different pluggable effects in your Joomla! system. More over, you don't need to find and pay for different Joomla! components such as Joomla! tabs component, accordion component, lightbox component, Joomla! newsslider component, CSV extension and other. Now you receive it in one package and pay only once.
Thumbnail Joomla! component
ARI Thumbnail provides possibilities to view picture thumbnails and galleries, resize pictures, customize image view easy! The component is simple yet powerful and customizable. With this component you will provide you visitors and customers with unforgettable stylish effects. This is the case when the picture or gallery says more than simple words. ARI Thumbnail comes with plugin (mambot) which means that you can easy embed the picture with nice thumbnail effect in almost every type of Joomla! content.


Example: scrolling and closable tabs

Tab 1.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 4.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 5.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 6.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 7.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 8.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.


Example: bottom tabs

Tab 1.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus.
Tab 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in neque. Duis metus risus, suscipit eu, luctus varius, tempus eget, metus. Nunc facilisis gravida urna. Curabitur augue.
Tab 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque accumsan pellentesque quam. Praesent malesuada. In hac habitasse platea dictumst. Praesent aliquet diam quis pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Usage:

{ariexttabs width="450"} {ariexttabcfg closable="true"} {ariexttab title="Tab 1"} tab 1 {/ariexttab} {ariexttab title="Tab 2"} tab 2 {/ariexttab} {/ariexttabs} or {ariexttabs width="450" enableTabScroll="true"} {articleTitle}{$title|truncate:50:...}{/articleTitle} {ariarticletemplate} {$title} {$introtext} {/ariarticletemplate} {/ariexttabs}
If ariexttab has link attribute then content from this link will be loaded into the tab.


Parameters:

  • ariexttabs parameters:
    • activeTab - The numeric index of the tab that should be initially activated on render. Values: number
    • animScroll - True to animate tab scrolling so that hidden tabs slide smoothly into view. Only applies when enableTabScroll = true. Values: true, false
    • autoHeight - True to use height = 'auto', false to use fixed height. Values: true, false
    • bodyBorder - True to display an interior border on the body element of the panel, false to hide it. Values: true, false
    • border - True to display the borders of the panel's body element, false to hide them. Values: true, false
    • className - Tabs container CSS class name. Values: string
    • enableTabScroll - True to enable scrolling to tabs that may be invisible due to overflowing the overall tabs width. Only available with tabPosition = 'top'. Values: true, false
    • frame - False by default to render with plain 1px square borders. True to render with 9 elements, complete with custom rounded corners. Values: true, false
    • height - The height of this component in pixels. Values: number
    • minTabWidth - The minimum width in pixels for each tab when resizeTabs = true. Values: number
    • plain - True to render the tab strip without a background container image. Values: true, false
    • resizeTabs - True to automatically resize each tab so that the tabs will completely fill the tab strip. Values: true, false
    • scrollDuration - The number of milliseconds that each scroll animation should last. Only applies when animScroll = true. Values: float number
    • scrollIncrement - The number of pixels to scroll each time a tab scroll button is pressed. Only applies when
    • enableTabScroll = true. Values: number
    • scrollRepeatInterval - Number of milliseconds between each scroll while a tab scroll button is continuously pressed. Values: number
    • tabPosition - The position where the tab strip should be rendered. Values: top, bottom
    • tabWidth - The initial width in pixels of each tab. Values: number
    • wheelIncrement - For scrolling tabs, the number of pixels to increment on mouse wheel scrolling. Values: true, false
    • width - The width of this component in pixels. Values: number
    • useJoomlaArticle - Indicate that news ticker is used for loading Joomla! article. Values: true,false
    • articleSecId - Indicate IDs of sections the articles should belong to (If you have articleExcludeSection option turned on then indicate IDs of sections the articles should NOT belong to). You may enter several IDs separated with commas. Values: number
    • articleExcludeSection - If this option is on then articles related to IDs from articleSecId option will not be selected. Values: true,false
    • articleCatId - Indicate IDs of categories the articles should belong to (If you have articleExcludeCategory option turned on then indicate IDs of categories the articles should NOT belong to). You may enter several IDs separated with commas. Values: number
    • articleExcludeCategory - If this option is on then articles related to IDs from articleCatId option will not be selected. Values: true,false
    • articleCreatorId - Indicate IDs of articles creators whose articles will be selected (If you have articleExcludeCreator option turned on then indicate IDs of articles creators whose articles will NOT be selected). You may enter several IDs separated with commas. Values: number
    • articleExcludeCreator - If this option is on then articles related to IDs from articleCreatorId option will not be selected. Values: true,false
    • articleRandomize - Randomize article sorting. Values: true,false
    • articleSortField - Article sorted by. Values: created,created_by,id,introtext,fulltext,hits,modified,modified_by,ordering,title
    • articleSortDir - Article sort direction. Values: ASC,DESC
    • articleParseTag - Needs parse mambot tags in article. Values: true,false
    • articleItemCount - Number of articles to select. If 0 then all articles will be selected. Values: number
  • ariexttab parameters:
    • title - The numeric index of the tab that should be initially activated on render. Values: number
    • link - The numeric index of the tab that should be initially activated on render. Values: number
    • autoHeight - True to use height = 'auto', false to use fixed height. Values: true, false
    • autoScroll - True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content. Values: true, false
    • closable - Indicate closable tab or not. Values: true, false
  • ariexttabcfg parameters:
    • autoHeight - True to use height = 'auto', false to use fixed height. Values: true, false
    • autoScroll - True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content. Values: true, false
    • closable - Indicate closable tab or not. Values: true, false