Important Notice: The name of this plugin was changed from "Easy Tabs" to "Pure Tabs" due to a naming conflict with an existing plugin registered with JED.
Installation:
This plugin is designed for Joomla 2.5. To install go to the Extension Manager - Install page of Joomla Administrator and upload the package file.
Usage:
To use this plugin as content in an article, first enable the plugin and configure the default parameters in the Plugin Manager.
To use the plugin in an article, you utilize the two tag expressions, each with a different set of attributes. They are used very similar to xhtml, with the exception that they surrounded by curly brackets.
The first tag expression is {puretabs}{/puretabs}. Notice that it has a start tag and an end tag. It has 6 attributes as follows:
| puretabs Attribute | default value | possible values |
|---|---|---|
| theme | basic-blue.css | [any css file in the themes folder] |
| position | top | bottom, left, right, top |
| header | full | none, list, full |
| selected | 1 | [number relating to one of the tabs] |
| centered | 0 | 1, 0 |
| height | 500 | [any integer number] |
The second tag expression is {tab}{/tab}. Notice that this also has a start and end tag. In addition, this expression exists inside of {puretabs}{/puretabs}, one or more times. It has 3 attributes and 4 possible modes. Here are the 3 attributes:
| tab attribute | default value | possible values |
|---|---|---|
| title | Tab | [the text for the tab button] |
| mode | text | text, article, module, position |
| iconurl | - | [optional url to an image prepended to the tab text] |
There 4 possible modes:
| mode | description |
|---|---|
| text | [type text between start and end tag] |
| article | [specify the article id between start and end tag] |
| module | [specify the module name between start and end tag] |
| position | [specify the module position between start and end tag] |
There are also various formats for the module mode and the position mode. For the module mode, you can specify the module name, its title and its style; each separated by a comma. There are 5 module styles:
- none (No wrapping - Raw)
- table (Wrapped by Table - Column)
- horz (Wrapped by Table - Horizontal)
- xhtml (Wrapped by Divs)
- rounded (Wrapped by Multiple Divs)
Thus, the possible formats for the module mode are (using the example of mod_login):
- {tab mode="module"}mod_login{/tab}
- {tab mode="module"}mod_login, Login Form{/tab}
- {tab mode="module"}mod_login, Login Form, rounded{/tab}
For the position mode, you can specify the module style in addition to the module position; each separated by a comma. The possible formats (using the example of user1 position) are:
- {tab mode="position"}user1{/tab}
- {tab mode="position"}user1, table{/tab}
For a full example of how to use Easy Tabs, type the following code:
{puretabs position=top theme=gray-pitch.css centered=0 selected='3' height=200}
{tab title="One Thing" mode="text"}This is a sentence.{/tab}
{tab title="Two" mode="article"}1{/tab}
{tab title="hello" mode="position"}left{/tab}
{tab iconurl='images/icons/application_delete.png' title="hello2" mode="module"}mod_login{/tab}
{/puretabs}Also note that attributes can be specified with single quotes, double quotes, or no quotes (if the value contains no spaces).
Parameters:
| Name | Keyword | Default Value | Description |
|---|---|---|---|
| Default Tabs Position | position | top | This is the default position of tabs. This can be overridden by specific pure tabs in any article. |
| Tabs Header | header | full | This sets how you want the header to be displayed. This can be overridden by specific pure tabs in any article. |
| Center the Tabs | centered | 0 | This determines whether the tabs will be centered or left aligned when placed at the top or bottom. This can be overridden by specific pure tabs in any article. |
| Minimum Height | height | 500 | This is the minimum height used when the position of the tabs are set to left or right. |
| Use Inline Styles | n/a | No | This determines whether the styles will be applied inline, or from the puretabs.css file. Use inline styles if your template styles are conflicting with the puretabs.css styles. |
| Default Theme | theme | basic-blue.css | This is the default theme selected for all the Pure Tabs on the site. This can be overridden by specific pure tabs in any article. |
| Module Style | n/a | table | Code that will wrap Modules |