Getting Started with ApPHP Tabs (v3.0.0 or above)

1. Common Notices
2. Getting Started
- 1.1 Step 1. Creating Tabs object.
- 1.2 Step 2. General settings.
- 1.3 Step 3. Adding tabs.
- 1.4 Step 4. Visual settings.
- 1.5 Step 5. Choosing default tabs.
- 1.6 Step 6. Disabling tabs.
- 1.7 Step 7. Drawing tabs.

Common Notices

• Please, use a $tabs->Debug(true); before you say "Why Nothing Works ?!"
• Use standard opening and closing tags <html>...</html>. Enclose everything else in these otherwise your page may display incorrectly.
• Do not place ApPHP Tabs code inside another HTML Form: <form>...</form>

Getting Started

Step 1. Creating Tabs object

Make sure you define a valid relative (virtual) path to the tabs.class.php file.

## *** include tabs class
define ("TABS_DIR", "");
require_once(TABS_DIR."tabs.class.php");

There are two classes in this package: the Tabs class creates the tabs structure and the Tab class is used for each tab. First you must create a Tabs object.

## *** create tabs object
$tabs = new Tabs();

Step 2. General Settings

First you have to define a method for data submission type. You may write "get", "post" or "ajax".

## *** set form submission type: "get", "post" or "ajax"
$tabs->SetSubmissionType("post");

If you want to use several independently configured Tabs objects on a single page, you should set unique numeric (integer-valued) identifier for this Tabs object.

## *** set id
$tabs->SetId(23);

ApPHP Tabs support embedded CSS styles: "xp", "grey", "light-green", "dark-red", "black" and "g-style". You can choose style using function "SetStyle". Select appropriate style to suit your needs.

## *** set CSS style
$tabs->SetStyle("light-green");

The tabs can be displayed from left to right ('ltr') or from right to left ('rtl'):

## *** set Tabs direction (ltr or rtl)
$tabs->SetDirection("rtl");

There is also an option to display a caption above the tabs.

## *** set Tabs caption
$tabs->SetCaption("ApPHP Tabs v".$tabs->Version());

Define whether the debug mode is turned on or not.

## *** show debug info - false|true
$tabs->Debug(false);

There are three possible ways of displaying child tabs. You can use function 'SetChildTabsType' to choose one. Option "dropdown" means that child tabs will be displayed in a dropdown menu. Option "tabs" means that child tabs will be displayed in the same way as the parent tabs are displayed. Option "links" which is selected by default means that child tabs will be displayed in a manner similar to hyperlinks.

## *** set mode of displaying child tabs
$tabs->SetChildTabsType("dropdown");

You are free to save GET-parameters that were used to get access to the page (like: my_page.php?act=34&id=56 etc.). Then they will not be lost when you select another tab.

## *** set variables that were used to get access to the page
$tabs->SetHttpVars(array("id","act"));

This method defines whether selected tabs are clickable.

##  *** allow refreshing selected tabs
$tabs->AllowRefreshSelectedTabs(false);

You can use an anchor to navigate to the tabs after a tab is clicked.

##  *** use anchor
$tabs->UseAnchor(true);

The anchor can be created automatically.

##  *** create anchor automatically
$tabs->CreateAnchorAuto(true);

If the previous option is set to false, you have to create the anchor manually by putting this line anywhere in the HTML-code.

<!-- create anchor manually -->
<a name='tabs'></a>

Step 3. Adding tabs.

Now you can add tabs by using the method 'AddTab'. It takes three arguments:

Tab's caption (obligatory)
File associated with this tab (optional)
Icon associated with this tab (optional)
Tab's tooltip (optional)

The method returns Tab object which supports 'AddTab' method as well so you can create multilevel tabs.

## *** add tabs
## Example 1: $tabs->AddTab("Title");
## Example 2: $tabs->AddTab("Title", "text.txt");
## Example 3: $tabs->AddTab("Title", "text.txt", "icon.gif");
## Example 4: $tabs->AddTab("Title", "text.txt", "icon.gif", "tooltip");
$son = $tabs->AddTab("Son's Title #1");
$son2 = $tabs->AddTab("Son's Title #2");
$grandson1=$son->AddTab("Grandson's Title #1");
$grandson2=$son->AddTab("Grandson's Title #2", "examples/code.php");

You may associate tabs not with files but with HTML code snippets.

## *** associate tabs with HTML code snippets
$grandson1->SetInnerHTML("<b><i>
<span onclick='alert(\"How do you do?\")'>HTML</span></i> code snippet</b>");

A tab may open its file in a new window.

## *** open a tab in a new window
$grandson2->OpenNewWindow(true);

You can also set a tooltip for a tab.

## *** set a tooltip for a tab
$son->SetTooltip("Child tab's tooltip");

Step 4. Visual settings.

Now you may change appearance of the container where content is displayed. You may set its width (in pixels, inches, points, per cent or "auto"):

## *** set container's width
$tabs->SetWidth("300px");
$tabs->SetWidth("40%");
$tabs->SetWidth("auto");

Its height (in pixels, inches or "auto"):

## *** set container's height
$tabs->SetHeight("200px");
$tabs->SetHeight("auto");

Step 5. Choosing default tabs.

Both Tabs and Tab objects have a 'SetDefaultTab' method. It defines which of its sub-tabs will be selected by default when you click on it.

## *** choose a default tab
$tabs->SetDefaultTab($tab3);
$tab4->SetDefaultTab($subtab4);

Step 6. Disabling tabs.

Every tab may be disabled.

## *** disable a tab
$tab2->Disable();

Step 7. Drawing Tabs

Now you can draw tabs on the screen.

## *** display tabs
$tabs->Display();

Members Login