2J Tabs

Version 1.01

User Guide for Joomla 1.5.X

Document version 1.01

Copyright – No portions of this manual may be reproduced or redistributed

Without the written consent of the author!
Author: 2JoomlaNET – Joomla solutions
www.2joomla.net
 Table of Contents

1. Introduction ..……………………………………………………………… 3

2. Distribution Package …………………………………………………….. 3

3. Installation ………………………………………………………………… 4

- Pre – Installation notes

- Installation

4. Configuration …………………………………………………………….. 6

5. 2J Tabs component configuration……………………………………… 8

6. 2J Tabs module configuration………………………………………….. 10

7. 2J Tabs CSS styles guide……………………………………………….. 13

8. Real Cases / Usage Suggestions………………………………………. 14

9. Troubleshooting ……………………………………………………………14
 1. Introduction
2J Tabs (component + module + plugin) - it's a fresh breath for your website layout.
Very easy and comfortable way to organize your front end content most effective way.
2J Tabs can emulate multi-pages structure based on the joomla content articles as result
your visitors will get easy access to the big content articles (no need to scroll through a
large page).

2J Tabs have 3 ways of usage:

• using regular module you can insert tabs with content articles from joomla
content category or section;
• using plugin tag which you will be able setup in component , and after that insert
to the content article as tabbed content section. So you can insert tabs with
articles from joomla content category or section;
• using plugin tags to split one content article to the tabbed section;

2J Tabs have few navigation modes:

• using regular tab navigation buttons (on top or bottom of the tabs block);
• using auto rotation mode for tabs changing process (with effects);

2J Tabs showing images and text (formatted by HTML and CSS). In 2JTabs you can
easily change styles using special component section for CSS edit also you will be able to
use pre-installed skins.
2J Tabs it’s most effective way to make specifications page, products showcase or
section with hot news. It’s have very wide range of settings and ways of customization.

All the ways of the customization you can find at http://www.2joomla.net/2jtabs/2j-tabs-

demo.html

Key Features of the 2J Tabs:

• 10 front end skins already implemented in distribution package

• showing tabbed section of the joomla articles (from specified category, section)
• 2JTabs support content images inside tabs
• Ability to use another application (like 2JNewsSlider) inside tabs
• Ability to turn on/off Read More option
• HTML tags and CSS support
• W3C XHTML validate (no errors, notices, warnings )
• W3C CSS validate (no errors, notices, warnings )
• Fade and Slide effects
• Auto tabs change mode
• Order by option for custom ordering of the content in tabs (order by : joomla
native, alphabetical, random, creation date, publication date, hits, rating)
• Custom navigation panel location (on top or buttom of the tabs panel)
• All front end elements easily customizable with CSS and backend settings
• Ability to insert slider into joomla content articles using 2JTabs plugin/plugin
• Ability to make direct link to 2JTabs component
• Support Joomla 1.0.X and Joomla 1.5 Native
• Implemented to avoid AJAX libs conflicts
• Module + Component + Plugin for tabs management from Joomla backend.
• Possible to use few 2JTabs instances at the same page
• Version for Joomla1.5 implemented using Native classes and structures (without
legacy plugin)
• Ability to make tabs working on tables or DIVs (using W3C XHTML 1.0 option)
• Tabs could be changed by Click or Hover
 2. Distribution Package

2J Tabs extension distributing as package of the joomla component , joomla front end
module and joomla plugin. You will be able to download installers from the customer
backend member place.

- 2JTabs component (Installer name: com.2j_tabs.zip) – component with joomla

admin section, where you can manage your 2JTabs instances options and CSS
styles

- 2JTabs module (Installer name: mod.2j_tabs.zip) – module

which one you need to use it as front end interface of the 2JTabs. Possible to
make few copies of this module with different settings and style.

- 2JTabs plugin (Installer name: bot.2j_tabs.zip) – plugin allow you to insert

2JTabs into content articles and make tabbed section from one of the content
articles using special 2JTabs tags

3. Installation

Pre-Installation Notes

Please check version of your current joomla installation. You need some version of
Joomla 1.0.X – stable release (without hacks). You can check your current joomla
version at {joomla admin section}/System/System Info on the first tab of this
section: “System Info” you will see “Joomla! Version “ option.

Please check that your joomla settings allow you to make installation of the new
extensions. It’s should have writable permissions to required directories. You can
find list of this directories at {joomla admin section}/System/System Info on tab
“Permissions” All list of the options should have green label “Writeable”
Installation Notes

Installation of the 2JTabs extension consist of few simple steps:

- Install component (which you receive in your distribution package. Installer

name: com.2j_tabs.zip)

- Install module (which you receive in your distribution package. Installer name:
mod.2j_tabs.zip)

- Install plugin (which you receive in your distribution package. Installer name:
bot.2j_tabs.zip)

- Configuration of the installed extensions

- Setup front end modules to show tabbed section or publish some instances of
the 2JTabs in articles using plugin or plugin tags.

After installation of the component and module in the case if you didn’t see message
about successful installations please post your ticket to 2JoomlaNET support service at
http://www.2joomla.net/support/ In your ticket please specify details about errors you see
and, if it’s possible, login and password for your joomla installation (where you trying to
install our product).

4. Configuration

Here’s few brief tips for basic configuration of the component, module and plugin after
installation process:

- Go to the joomla plugin section and publish “2J Tabs Plugin”

- Configuration of the “2J Tabs Module” : go to the {joomla admin}/modules/2J
Tabs module options:

In module settings you need to select category option (it’s regular joomla content category
) or section (it’s regular joomla content section) from which one 2JTabs load articles into
front end module. Options name: “Select content from”, “Category”, “Section”. Set
module title, make it’s published and save.
2JTabs have two ways of usage with plugin insert 2JTabs plugin tag to the some content
article or use plugin tabs to split one content article for tabbed content section.

- In first case you should use 2JTabs component instances manager to specify
settings for 2JTabs which you planning to use. So you can specify personal
settings for every copy of the 2JTabs which you insert to your content articles
this way.

Here you need just add name of the new tabs unit, and select category or section from
which one component should read content articles to show in 2J Tabs.

After that you can save tabs instance and you will see new item in 2J Tabs component
listing:
 - in the case if you wish make tabbed section from one of the joomla content
article you can use this tags in article body:
o {2jtab: TABLABEL} – tab open tag, you can use so much tags like this in
one article as you wish, TABLABEL – it’s label for current tag, so just put
there any text you need;
o {/2jtabs} – this tag closing tabbed section (this tag should be only one in
article);

For example:
{2jtab: Tab1}
If you've read anything at all about Content Management Systems
(CMS), you'll probably know at least three things:
{2jtab: Tab2}
CMS are the most exciting way to do business, CMS can be really, I
mean <i>really</i>, complicated and lastly Portals are absolutely,
{2jtab: Tab3}
outrageously, often <i>unaffordably</i> expensive. <br /><br
/>{mosimage}Joomla! is set to change all that ... Joomla!
{/2jtabs}

As result you will receive tabbed section with 3 tabs, labels of the tab buttons will be :
“Tab1”, “Tab2”, “Tab3”
One important point: settings for this instances of the 2JTabs (which you will insert to your
pages this way) you can set at {joomla admin}/plugins/ 2JTabs Plugin settings. For this
case of usage settings will be the same for all instances of the 2JTabs (which you create
with this tags: {2jtab: label1} , {2jtab: label2} and etc… {/2jtabs})

Settings for instances of the 2JTabs which will be used this way you should set in 2JTabs
plugin options. You will have the same settings for all copies of the 2JTabs on this page,
which you have insert to your content articles this way
Go to the {joomla admin} / plugins / 2JTabs Plugin, you will see this screen with options:
 5. 2J Tabs component configuration

2J Tabs component have admin interface which make you able to manage settings of the
tabs instances integrated into content articles with 2JTabs plugin.
Interface of the admin section implemented in joomla native style, and you will not have
any problems with it.
Main listing of the 2JTabs plugin instances settings you can find at {joomla admin section}
/ components / 2JTabs:

Here you can see next fields:

Name – name of the slider;
Section\Category – category or section name assigned to current tabs instance;
Tag in content – it’s auto-generated tag, which you can use in content article to insert
current instance of slider into article text;

At the top component tool bar , you can find “Edit CSS ” button – it’s 2JTabs CSS editor,
which make you able to manage all styles of the tabs from the admin backend. All front
end interface really flexible. And using CSS styles not so hard to customize it per your
needs.

At 2J Tabs options you can find option : “Tabs Skin” where you can select one from list of
the default implemented skins or one of the custom skins you have done;

When you click on the each item you will see edit form, where you will be able to change
some settings for current tabs instance. (this form will have the same options as “New”
form).

Here’s listed description of the fields of this form :

Name – name of the current tabs instance;
Category – option for joomla category selection (from which one tabs should
reading content);
Section – option for joomla section selection (from which one tabs should reading
content);

Select content from – select target content source joomla content category or
joomla content section;
 Show images – turn on/off images inside content;
Linked titles – turn on/off links at the titles of the content;
Show Read more – turn on/off joomla article option to show “read more” link;
Item title – turn on/off titles of the articles;
Maximum articles amount – amount of the articles which tabs will show in current
instance of the 2J Tabs;
ItemId – if you would like to link your articles to the some menu item please specify
ItemId value here. Default (empty) value - Itemid taking from the current page;
Order by – this option make you able to set order for showing articles from the
category : random, order by date, order by ID, order by rating, order by hits;
Tabs Labels – this option make you able to select labels for tabs instance. In the
case if you select 'Article Title' value then tabs labels will be set from name of the articles,
in the case if you select 'Index' value tabs labels will be implemented as template based
index. Template for this case you can set in 'Tab Label Template’;
Tab Label Template – this option make you able to customize label by item index.
Use symbol # for index, it will be replaced by index for every tab;
Select default tab – with this option possible to set number of the default tab (just
ordinal number of the tab from current tabs list);
Navigation panel position – location of the tabs navigation buttons, this option
have 2 values : “top” or “bottom” (default value: “top”);
Tab buttons align – option for alignment of the tabs navigation buttons, this
options have 3 values : “css style defined”, “left”, “right” (default value: “css style
defined”);
Changing tabs by – this option make you able to select the way tabs will switch
between each other : by “Click” or by “Hover” (default value: “Click”);
Padding– padding option can be defined in css styles or using fields for custom
padding values (check options below); Available values for this option : “css style defined”
or “custom” (default value “css style defined”);
Tab Left Padding– left padding for every tab button on navigation panel;
Tab Right Padding– right padding for every tab button on navigation panel;
Whole Panel Left Padding– left padding value for whole navigation tabs panel;
Whole Panel Right Padding– right padding value for whole navigation tabs panel;
Tabs Skin– option make you able to select one of the existing skins for 2JTabs,
also you can select here one of the custom skins (in the case if you create styles for this
custom skin, using 2J Tabs component CSS editor);
Enable border– option for border management around tabs panel. Available values
for this options: “Yes”, “No”, “Css style defined” (Default value: “Yes”). In the case if you
make custom style for this border in CSS you can use this value: “Css style defined”;
Border color – this option make you able to specify custom color of the border
around tabs panel;
Effect – use this option if you wish to have animation effect for tabs changing
process. Values for this option: “None” (default option), “Slide”, “Fade”, “Slide+Fade”;
Moving duration – period of time during one tab will change by another (1000 = 1
second );
W3C XHTML 1.0 – option which respond for content representation on tabs with
tables or divs;
Enable Timer – this options turn on/off auto tab changer, in the case if it’s tuned off
visitor will be able to change tabs manually, tabs stay still if visitor not change it;
Time for timer – it’s period of time which every frame stay still (1000 = 1 sec, so if
timer turned on, and value of this field for example 3000 , it’s mean that every new frame
will show up after every 3 seconds);

If you will have some questions about any of this options, feel free to use our online
support service: http://www.2joomla.net/support/
 6. 2J Tabs module configuration

2J Tabs have 4 variants of the front end interface: Joomla 2JTabs module, insert tabs into
one of the front end articles (using 2JTabs plugin tags), split one of the content article to
the tabbed content section (using 2JTabs plugin tags), insert direct link to 2JTabs
component (to the Joomla menu).

Using 2JTabs module you can make as much as you wish instances of the front end
2JTabs. You can make copies of the module at joomla admin backend (the same way as
you can do with another joomla modules), and you can customize personal settings for
every instance of the 2JTabs module. Every module can show articles from different
category/section, with personal effects, location, settings.

When you go to the 2JTabs module settings at ({joomla admin section} / modules / 2JTabs
module ) you will see this form: (Figure 1)

Here’s listed description of the fields of this form :

Title – name of the current tabs instance / module title;
Category – option for joomla category selection (from which one tabs should
reading content);
Section – option for joomla section selection (from which one tabs should reading
content);
Select content from – select target content source joomla content category or
joomla content section;
Show images – turn on/off images inside content;
Linked titles – turn on/off links at the titles of the content;
Show Read more – turn on/off joomla article option to show “read more” link;
Item title – turn on/off titles of the articles;
Maximum articles amount – amount of the articles which tabs will show in current
instance of the 2J Tabs;
ItemId – if you would like to link your articles to the some menu item please specify
ItemId value here. Default (empty) value - Itemid taking from the current page;
Order by – this option make you able to set order for showing articles from the
category : random, order by date, order by ID, order by rating, order by hits;
Tabs Labels – this option make you able to select labels for tabs instance. In the
case if you select 'Article Title' value then tabs labels will be set from name of the articles,
in the case if you select 'Index' value tabs labels will be implemented as template based
index. Template for this case you can set in 'Tab Label Template’;
Tab Label Template – this option make you able to customize label by item index.
Use symbol # for index, it will be replaced by index for every tab;
Select default tab – with this option possible to set number of the default tab (just
ordinal number of the tab from current tabs list);
Navigation panel position – location of the tabs navigation buttons, this option
have 2 values : “top” or “bottom” (default value: “top”);
Tab buttons align – option for alignment of the tabs navigation buttons, this
options have 3 values : “css style defined”, “left”, “right” (default value: “css style
defined”);
Changing tabs by – this option make you able to select the way tabs will switch
between each other : by “Click” or by “Hover” (default value: “Click”);
Padding– padding option can be defined in css styles or using fields for custom
padding values (check options below); Available values for this option : “css style defined”
or “custom” (default value “css style defined”);
Tab Left Padding– left padding for every tab button on navigation panel;
Figure 1 – 2JTabs module options form;

Tab Right Padding– right padding for every tab button on navigation panel;
Whole Panel Left Padding– left padding value for whole navigation tabs panel;
Whole Panel Right Padding– right padding value for whole navigation tabs panel;
Tabs Skin– option make you able to select one of the existing skins for 2JTabs,
also you can select here one of the custom skins (in the case if you create styles for this
custom skin, using 2J Tabs component CSS editor);
Enable border– option for border management around tabs panel. Available values
for this options: “Yes”, “No”, “Css style defined” (Default value: “Yes”). In the case if you
make custom style for this border in CSS you can use this value: “Css style defined”;
Border color – this option make you able to specify custom color of the border
around tabs panel;
Effect – use this option if you wish to have animation effect for tabs changing
process. Values for this option: “None” (default option), “Slide”, “Fade”, “Slide+Fade”;
Moving duration – period of time during one tab will change by another (1000 = 1
second );
 W3C XHTML 1.0 – option which respond for content representation on tabs with
tables or divs;
Enable Timer – this options turn on/off auto tab changer, in the case if it’s tuned off
visitor will be able to change tabs manually, tabs stay still if visitor not change it;
Time for timer – it’s period of time which every frame stay still (1000 = 1 sec, so if
timer turned on, and value of this field for example 3000 , it’s mean that every new frame
will show up after every 3 seconds);

Here you can use all joomla basic options to set correct basic settings for joomla 2JTabs
module (like position, title, module order, access level, show title and etc)

Every module will have set of the 2JTabs options, which make you able to customize
current instance of the 2JTabs.

If you will have some questions about any of this options, feel free to use our online
support service: http://www.2joomla.net/support/

7. 2J Tabs CSS styles guide

2JNewsSlider have set of the integrated styles , which you can use to customize your
front end interface. You can manage your styles at {joomla root} / components / 2J Tabs ,
you will see button “Edit CSS” (on top component buttons panel).

When you push this button you will see CSS editor :
Here’s the list of the main styles, which you can use to customize your 2JTabs:

.ui-tabs-nav - navigation container , which contain button pointers (UL);

.ui-tabs-panel - customization of the navigation buttons panel;
.ui-tabs-nav li - customization of the particular button;
.ui-tabs-nav a - customization of the link on the tab button;
.ui-tabs-nav a span - customization of the span which contain navigation button;
.ui-tabs-nav .ui-tabs-selected a - customization of the link on the selected (active) tab
button;
.ui-tabs-nav .ui-tabs-selected a span - customization of the span which contain
selected (active) navigation button;

8. Real Cases / Usage Suggestions

2J Tabs , have really great range of the configuration settings which make you able to use
it in very wide range of case. Using this extension you can build very interesting animated
AJAX front end interface, you can publish on the front end 2, 3 or even more 2JTabs
instances and at the same time you can put few of them in another article, using plugin.
You can combine 2JTabs with another AJAX tools, for example you can insert some kind
of slider or slideshow to the some of the tab. What is most interesting that you can set
personal settings and view for every instance of the 2J Tabs, using CSS styles (which you
can edit in 2J Tabs component CSS editor section). You can use slide or fade animation
effects, which you can use in your tabs (or use both of them at the same time).
So with this tool everything depend only from your imagination!

How to use it on your site?

 Case 1: Represent long articles in comfortable (without scrolling) tabbed content
section, visitors will be able to navigate between pages to read a big article;

Case 2: You have real estate site and software which you using have pure showcase,
use 2JTabs as showcase to represent most interesting property items for your potential
customers;

Case 3: Create nice pages with products/services specifications using 2JTabs;

Case 4: You can make easy and nice looking FAQ pages with 2JTabs. You can
customize tab labels to have some indexed labels or custom names for every tab;

9. Troubleshooting

In this section of the document we have collect all most popular customers questions, so
please check it , maybe you will find reply for some of your question here:

Would like to upgrade from single to multi sites license.

Yes, you can do it, use link for update license at your profile section for update your single
site license to multi site. After payment your account will be updated and you will see
updated info at "License information" tab at your profile.

I was wondering if all of your joomla components/modules/plugins are Joomla

Native 1.5?

Yep, our components/modules/plugins implemented in Joomla 1.5 Native style. We're do

not adapting old application, we have implement it using new joomla 1.5
classes/structures/style

I get "JHTML form not supported. File not found. " at the top of each admin page.

You've got this error , because you using not stable version of Joomla 1.5 (did you install
some Release Candidate, right ?) Please reinstall Joomla 1.5 Stable Release , and try to
install again.

I would like to have 2JTabs in the main content article.

If you need to insert 2JTabs into your content article, use this tag : {2jtabs_plugin 1} -
where 1 it’s ID of the slider instance, created in 2JTabs component admin section.

I would like to split main content article to the tabbed content section with 2JTabs.

If you wish to split content article to the tabbed content section, use this tags {2jtab:
label1} , {2jtab: label2} and etc… {/2jtabs}. Where label1, label2 it’s labels for every tabs
button. More details about the way to use this tags you can find at User Guide.
How to download my copy of the 2JTabs after purchase ?

Please check My Products section (you can find link to this section on top menu). In the
case if you have Single site license you will see field where you can specify host name of
the website where you planning to use 2JNewsSlider. After that click "Check" button, after
this step you will be able to confirm your selection by submit button or you can re-enter
domain value before submit, if you click "Undo" button. After confirmation of the submitted
domain you will see download links.
In the case if you have Multi sites license you will see download link right after login.