JV Tabs

JV Tabs is a Joomla module that allows you to tabs any where on your site. Within a minute you can have a nice looking tab inside your article to make the visibility of your article better and more interesting. JV Tabs will create a new breath for your front-end content and make your page more attractive. It’s a simple but powerful way to organize your article.You can insert tabs in articles or Custom HTML modules with WYSIWYG editor. 

JV Tabs is compatible with Joomla 2.5 and 3x. This tutorial is based on Joomla 3.3 but the parameter configuration is almost the same to Joomla 2.5.

 

Download & Installation

JV Tabs is a free Module, to download this extension, you need to sign up for an account, either in free membership or paid membership.  

Login to your account, go download page where you can download the extension 

To get JV Tabs module worked, you need to install JV Libraries plugin also included in download area 

Once you have JV Tabs and JV Libraries files downloaded on your computer. Now it's time to install them on your Joomla.  There are three ways of installation in Joomla, each way is a little bit different. The first way - Upload package file is always the most popular choice.

Log into back-end, go to Extensions >> Extensions manager >> Browse JV Tabs zip package >> Click Upload & Install. The module will be installed successfully.

 

Repeat the process to install JV Libraries

If you are not familiar with Extensions (templates, modules, plugins and components) Installation, please view the following guide:

 


  

Get the Module worked

To get the module workded and show on fontend. 3 important things you need to do is:

1. Enable the module

Go to Extensions >> Module Manager. You will see the module with red X button, toggle it to publish the module

2. Select position for the module

Go inside the module, in the right hand side, select a position for the module:

3. Assign the module to specific page(s)

 Next, you need to assign the module to specific page(s). Select "Menu Assignment" Tabs.

 

 

 

Get tab from position

You can insert modules by getting tab from position. If a position selected, all modules set in the position will loaded into tabs. You can choose 1 position only.

View sample image below for getting tabs from position:

 


  

Get tab from article.

Within this option, you can get tab from single article, because you can only get 1 article from a tab, so you need to add more tabs to get more article:

 

View sample image below for getting tabs from article:

 


 

Get tab from query articles

Within this option, you can:

- Get tabs from Joomla Categories, simply input Category names or IDs

- Get tabs from Authors, simply input Author names or IDs

- Enable/disable getting tab from Categories/Author

- Select order by published date/created date/ hits 

- Select order direction: ASC/DESC

- Set a Start article offset (in number)

- Set limited items show in tabs

- Filter articles used for tabs: all/no featured/only featured

- Select section of article to render: Intro/full article/ only text 

 


 

Get tab from K2 Item

Like getting tab from single article, with this option you can get tabs by add more tabs and select an item for each.

 


   

Get tab from Query  K2 Items

 

Similar to "get tab from query articles, within this option, you can:

- Get tabs from K2 Categories, simply input K2 Category names or IDs

- Select order to display tabs

- Set a Start article offset (in number)

- Set limited items show in tabs

- Filter articles used for tabs: all/no featured/only featured

- Select section of article to render: Intro/full article/ only text 

 


 

Tabs configuration

After getting tabs from source, the last thing you need to do is config tabs parameters:

Parameter explanation:

- Effect type: select effect type

- Duration: set duration of moving to the other tab (ms)

- Auto time (ms): set time that automatically move to next tab 

- Nav position: select navi position (top / right / bottom/ left)

- Max height: set maximum height for content box (in px). 

- Min height: set minimum height for content box (in px)

- Nav slide: disable or enable tabs navitation

- Render with: select (all or cached)