Tab Control

Tab Control 3.0

This code will create a tab control similar to what you would expect from a Windows application. It allows you to organise your page or pages into tabs and for the user to select the tab to show the information neatly. Otherwise you are limited to having a very long page or separate pages which you need to build a nice navigation control (like this one). By copying 1 folder of files to your site and adding a few lines of code to your page, you can have this control up and running in no time. The result is a professional looking, and familiar Windows style tabbed interface. You can also optionally add icons to each tab and set many interface settings. Tested under IE, Mozilla and Firefox.

There are 2 folders of file provided:
Demo - contains files to demonstrate the full usage of the control - use this as a reference to install the tab control in your web pages.
TabControl - This is the only folder you need to copy into your site.

The are 3 different types of tabs which can be used - depending on your situation: Dynamic, Frames and PostBack:

Dynamic Tabs
Dynamic tabs are driven by DHTML, (DIV tags which are hidden and shown). These tabs are ideal for static data. Using them with more than one form at a time may introduce issues. If you intend to use multiple forms it is recommended that you use static or inline tabs. As all pages are loaded at once, it is faster for the client to use, after the initial increased load time.

Frame Tabs
Frame tabs are driven by DHTML (IFRAME tags which are hidden and shown). These tabs are ideal for separate large or complex pages with many form fields or external web sites. The client browser must support Inline Frames (IE, Firefox, and later versions of Mozilla). As all pages are loaded at once, it is faster for the client to use, after the initial increased load time. This also allows the developer to have a logical separation of information.

PostBack (Static) Tabs
PostBack or Static tabs are separate pages that are only loaded at the client if the tab is selected. This allows the developer to have a logical separation of information and reduced initial load time, but then pages are loaded when needed. Pressing the Back button in the browser may be tiresome if you have clicked through the tabs a fair bit before hand.

Usage

A simplistic version of your ASP could look something like this:

<%
' Declare and create our TabControl object in memory
Dim MyTabControl
Set MyTabControl = New TabControl

'Configure the control
MyTabControl.ControlImagePath = "tabcontrol/"
MyTabControl.ControlScriptPath = "tabcontrol/"
MyTabControl.TabType = TabTypeFrames

'Add all of your pages
MyTabControl.AddTab "Tab 1","icon_1.gif","tab_tab1.asp"
MyTabControl.AddTab "Tab 2","icon_2.gif","tab_tab2.asp"
MyTabControl.AddTab "Tab 3","icon_3.gif","tab_tab3.asp"

MyTabControl.Draw
%>

See Demo/default.asp for a full demonstration.

Properties

ApplyContentStyle
Boolean.
Default: True
If ApplyContentStyle is true and Dynamic Tabs are used, then the pre-defined style is applied to the div tags used.

BGColor
String. Optional.
Default: "#FFFFFF"
Example: .BGColor = "silver"
Tab control background colour in HTML syntax: named or #hex number

ControlImagePath
String. Optional
Default: current folder
Example: .ControlImagePath = "tabcontrol/"
Sets the path to all of the image files in the Tab Control folder. Relative to the current folder.

ControlScriptPath
String. Optional
Default: current folder
Example: .ControlScriptPath = "tabcontrol/"
Sets the path to the javascript file in the Tab Control folder. Relative to the current folder.

Height
String. Optional.
Default: 80%
Example: .Height = "80%"
Tab control height is in HTML syntax: pixels, % or *
For Frames tab type only, if you specify * as the height, the content area will dynamically change to the full window size - even if the window is resized by the user.

OnClick
String. Optional
Default: ""
Example: .OnClick = "processClick('{0}');"
If a javascript command is provided to OnClick, then that command is executed when a tab is clicked. If you place {0} in the command, then that will be replaced with the tab index when it is clicked. If the second tab is clicked than the command issued for the above example will be: processClick('2');
The event only happens when a new tab is selected (not the same tab) and before the new tab shown.

Width
String. Optional.
Default: 100%
Example: .Width = "400"
Tab control content width is in HTML syntax: pixels, % or *
For Frames tab type only, if you specify * as the width, the content area will dynamically change to the full window size - even if the window is resized. A 24px gap remains to the right in case the window's scroll bar is visible.
Another way to set a dynamic width in relation to the page is to have a parent table of 100% width and set the width of the other columns in pixels (not the column with the tab control in) then set the control to 100% width (which will result in the control resizing to the parent dynamic cell)

TabCount
Integer. Read Only.
Contains the count of tabs configured. Useful for sites that load tabs dynamically.

TabHome
Boolean. Optional
Default: False
Example: .TabHome = True
For Inline Frames, this will reset the current tab to it's original contents. It is possible to click to another page inside the tab if your page has links or the tab has an external site loaded.

TabSelected
Integer. Optional.
Default: 1
Example: .TabSelected = 1
Show this tab # on page load

TabType
Integer. Optional
Default: TabTypeFrames
Example: .TabType = TabTypeFrames
Defined constants: TabTypeFrames; TabTypePostBack; TabTypeDynamic

TabWidth
String. Optional.
Default: auto
Example: .TabWidth = "100"
Tab width is in pixels. Sets all tabs to this width

Methods

AddTab
Parameters:
    Tab Name String: anything
    Image String: URL to the icon to be placed on the tab. Pass nothing ("") for no icon. Image must be a transparent gif and 19 pixels tall. At least the top 3 rows must be clear.
    ID/Action String: For Frames: page file name, PostBack: tab page in an HTML location parameter and the tab number specified. Dynamic: id of the div content tag
Syntax: AddTab(Name, Image, IDAction)
Examples: MyTabControl.AddTab "Tab1", "icon_1.gif", "mypage.asp" or
MyTabControl.AddTab "Tab1", "", "staticTab.asp?Tab=1" or
MyTabControl.AddTab "Tab1", "", "divTab1"
Adds a page (tab) to the configuration. If in Dynamic mode, this command must precede the content div of your tab contents.

Draw
Parameters: none
Syntax: Draw
Example: MyTabControl.Draw
Writes the tabbed control to the web page.

NewRow
Parameters: none
Syntax: NewRow
Example: MyTabControl.NewRow
Called between the AddTab calls. It marks where to start a new row of tabs.

SelectTabName
Parameters: Tab name
Syntax: SelectTabName(strTabText)
Example: MyTabControl.SelectTabName("tab text")
Instead of using the TabSelected property (which is an integer index) use this to select a tab via it's name.

License

Permission to use, copy, modify, and distribute this software and its documentation for any purpose and without fee is hereby granted, with only one condition: References to the original author in the comments of the source code/scripts must remain in place. No other conditions or restrictions are made.
This software is provided "as is" without express or implied warranty.

If you improve this code, please send me a copy! Thanks!

Hunter Beanland
hunter @ beanland.net.au
http://www.beanland.net.au/programming/

See Demo/default.asp for a full demonstration.

Version 2 of this control was based on Tom Bruinsma's Tab Control. I rewrote most of the code from his version, but it still had complex scripting and graphics which was causing some issues adding new functionality. Version 3 is a ASP/VBScript port of a Tab Control I wrote from the ground up in ASP.NET (including revamped graphics). It is a lot simpler internally and has more functionality - it still has very similar programming and user interface to version 2.

Version History
3.0 This is a port of my TabControl.NET v1.1 which was completely rewritten from the ground up including graphics. Added NewRow, SelectTabName OnClick and dynamic height/width options. Removed Debug, EndStatic and EndAdd function. Changed SystemPath property to ControlImagePath and ControlScriptPath
2.1 Added Icon support on the tabs; Add tab width; Added Home Icon for Inline; Removed Init function. Cached images
2.01 Fixed a problem with the frames collection when an external site was added
2.0 Added Inline frame support for each tab, fixed mozilla compatibility, crunched & re-wrote all of the code into 1 include and directory to make it more modular
1.x Various enhancements by Tom Bruinsma.
1.0 First version by Tom Bruinsma.