Tab Control 1.5 for .NET

This code is an ASP.NET (VB) custom server tab control similar to what you would expect from a Windows application. It allows you to organise areas of your page or pages into tabs and for the user to select the tab to show the information neatly. 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.
Note: This code runs under .NET 2.0 only. For .Net 1.1 there is a zip file called TabControl11.NET11.zip which contains ver1.12 and is no longer being updated..

There are a few files &  folders of files provided with a Visual Studio 2005 solution file:
root - contains files to demonstrate the full usage of the control - use this as a reference to install the tab control in your web pages. Includes
bin - contains the compiled dll. If the dll is missing (some sites delete them) you will need to build (compile) the control - or download it from my web site.
TabControl - This is the only folder you need to copy into your web application.
TabControl\21px - Copy of the 21px high tab graphics. Copy up one folder to use these (and set .TabHeight ="21"). Default size is 25px.

Tab Types

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

Dynamic
Dynamic tabs are driven by DHTML, (DIV tags which are hidden and shown). These tabs are ideal for static data - or a large amount of info/fields in one form.

Frames
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 - but not 1 single form spread over more then 1 tab. The client browser must support Inline Frames (IE, Firefox, and later versions of Mozilla).

PostBack
PostBack tabs are driven by a postback each time a tab is selected. Generally, either of the top 2 methods should be sufficient in 99.9% of cases. 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 code could look something like this (.aspx page):

<%@ Register TagPrefix="HB" NameSpace="Bean.Controls" Assembly="TabControl" %>
' Assembly = the dll file you compiled it to
' NameSpace = the namespace in TabControl.vb - change this to anything you want to
' TagPrefix = anything

<HB:TabControl id="tabBar" runat="server" />
' HB = the TagPrefix you specified above
' VTabControl = the class name in TabControl.vb - change this to anything you want to

' Using Dynamic mode in this example so setup the content inside of divs or any other single control.
The style attribute is optional - but can prevent flicker
<div id="divTab1" style="display:none">
tab contents 1...
</div> 
<div id="divTab1" style="display:none">
tab contents 1...
</div>

And the simplistic version of your code behind could look something like this (.aspx.vb page):

'Inside the Page_Load, do all of the configurations
'(add 2 tabs, with icons, and set the target pages
tabBar.AddTab("tab name 1", "/images/icon1.gif", "divTab1")
tabBar.AddTab("tab name 2", "/images/icon2.gif", "divTab2")

'Set it to fixed width tabs and show the second one first
tabBar.TabWidth = "100"
tabBar.TabSelected = 2

See default.aspx for a real demonstration.

Properties

ApplyContentStyle
String. Optional.
Default: False
Apply style via style sheet to Frames and Divs. (mainly draws a box around the area)

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

ControlImagePath
String. Optional
Default: /Images/
Sets the path to all of the image files in the current Tab Control folder.

ControlScriptPath
String. Optional
Default: /JS/
Sets the path to the javascript file in the current Tab Control folder.

ContentWidth
String. Optional.
Default: 100%
Example: .ContentWidth = "400px"
Tab control content width is in HTML syntax: pixels, % or *
For Frames tab type only, if you specify * as the content 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)

ContentHeight
String. Optional.
Default: 80%
Example: .ContentHeight = "80%"
Tab control height is in HTML syntax: pixels, % or *
For Frames tab type only, if you specify * as the content 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.

Scroll
Boolean. Optional
Default: nothing (auto)
For Dynamic and Inline Frames mode this forces (on or off) of the scrolling of the window. For Dynmic (divs) when true, this will also force the div height by enabling clipping.

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

TabHome
Boolean. Optional
Default: False
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
Int16. Optional.
Default: 1
Show this tab # on page load

TabType
TabTypes enum. Optional
Default: Dynamic
Set the type of content area you wish to use

TabHeight
String. Optional.
Default: 25
Tab height is in pixels. This is just the tab itself, not the content. Sets all tabs to this height

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

UseHand
Boolean. Optional
Default: True
Use the hand cursor over the tabs

Types Enum

TabTypes
Contains all possible values of TabType:
TabTypes.Dynamic
TabTypes.Frame
TabTypes.PostBack

Methods

AddTab
Parameters:
    Tab Text 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.
    Action String: For Dynamic: Tag ID of the associated DIV (or TABLE etc). For Inline Frames: URL/page file name, PostBack: blank.
Syntax: AddTab(Name, Image, Action)
Example: MyTabControl.AddTab ("Tab1", "icon_1.gif", "divTab1")  or  MyTabControl.AddTab ("Tab1", "", "http://myserver.com/page.aspx")
Adds a page (tab) to the configuration. If in Dynamic mode, this control must precede the div tags of your tab contents.

ClearTabs
Parameters: none
Syntax: ClearTabs()
Example: MyTabControl.ClearTabs() 

NewRow
Parameters: none
Syntax: NewRow()
Example: MyTabControl.NewRow
Marks the point between AddTab calls where the next tabs should appear on the next new row.

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.

SelectTab  (Client Side / Javascript only)
Parameters: Tab number - indexed from 1
Syntax: SelectTab(intTabNumber);
Example: SelectTab(2);
Sometimes you may want a link in the content of a tab (or elsewhere on the page) to change the selected tab or you may have some javascript which wishes to change the selected tab on certain conditions, etc. This function makes it easy to select a new tab.

Events

onTabSelected
Parameters: 
    Tab Index Int16: Index of tab selected
Syntax: Sub onTabSelected(TabIndex As Int16) Handles onTabSelected
Example: Sub onTabSelected(ByVal TabIndex As Int16) Handles MyTabControl.onTabSelected
Used only with PostBack tab type.

Licence

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!
Donate via PayPal

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

See default.aspx for a full demonstration.
NOTE: This control does not yet support 2 instances on the same page.

Version History

1.5.2 default tab height now 25px. Tab image valign, xhtml compliance fixes
1.5 Persisted TabSelected between page postings. Fixed XHTML tab width settings
1.4 Added ClearTabs, UseHand, onTabSelected event.
1.3 Added selectTab javascript function; Scroll property for frames and Dynamic (also enforces div height).
1.2.2 Improved Firefox compatibility.
1.2 Added .NET2.0 solution and compatibility, XML comments.
1.12 Changed namespaces and class name to be more meaningful.
1.11 Resolved sequencing of javascript blocks which may have lead to an error: "TabImagePath is not an object".
1.1 Added OnClick, Dynamic Frame Height/Width, SelectTabName method.
1.01 Adjusted Image vertical spacing and selected tab 'overlap' to right. Also included VS2002 solution files.
1.0 Based on concepts from my Tab Control for ASP3 v2.1. This is a 100% re-write including new JavaScript and images.