Tab Control Demos

The Tab Control

The wwWebTabControl is a very simple TabStrip control that provides an easy way to display lots of information. This works primarily on the client side with JavaScript to switch between several pages. Each page is merely an HTML DOM container element (DIV) that is referenced by each of the tab 'pages' and the control manages showing and hiding of the appropriate controls.

In design mode you simply see all of your containers on the page as visible stacked elements rather than properly paged.

Tab Page Selections

Tab selections are handled via client side JavaScript code which simply selects a new DIV tag to display while hiding all others that are assigned to the other tabs. This means that the content of all tabs is active on the client side at the same time, which means it's a great tool to present fairly complex data screens and separate them into separate tabs of information.

The TabControl uses individual wwWebTabPage objects to configure the operation of each tab page and the actions that occur. The key property for the tab switch operation is the ActionLink which can be default (or simply empty) which switches DOM ids on the client. You can also specify javascript:SomeScriptCode(); to fire JavaScript and perform custom tasks. If neither of these apply the tab is assumed to contain a navigation URL and the a new page is navigated.

Postback to Server

Note that you can also post back to the server and the page will remember which page you were on when you posted back and so you will return to this same page. Post back with the button below and you should return to this page.

What's your name:

Note that when you leave this field blank an error occurs. If you switch pages and then click the error link the page and field is still activated because a custom OnDataBindingErrorLink() handler is used to activate the page of the errored control.

You can also select a tab with client script code:

Javascript code: ActivateTab('Tabs','pageSelection') or ActivateTab('Tabs',1)

Controlling Tab Display

The display of the tab strip is controlled with CSS style tags. The current 'tab' display is simply a CSS background image with text overlaid on top of it. To set up a different view it's as simple as changing or creating a new CSS style that handles the display.

There are two styles and a couple of substyles used which are set on the control. The default style sheet for Web Connection provides the tabbutton and selectedtabbutton styles plus variations for hovering. Here's an example of a tabbutton class:

.tabbutton, .selectedtabbutton
{
	 font-size: 8pt;
	 background: transparent url(images/tabnormal.gif) no-repeat;
	 text-align: center;
	 vertical-align: middle;
	 color: darkblue;
	 width: 120px;
	 border: none 0px;
	 margin: 0px;
	 padding:0px;
}

This frame is loaded with a little JavaScript and an IFrame:
ActionLink="javascript:ActivateTab('divSamples');document.getElementById('SampleFrame').src='default.htm'"