Tab Control Demos

Sample Home | Refresh (w/POST) | Reload Page | Rendered on: 04/24/2014 08:49:08 AM

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;

The Tab control is a server side control that manipulates a client side implementation. The control itself renders only the tab strip plus some initial startup script code that is fired when tab selections are made in client code (via the ActivateTab() function) or by clicking on one of the tabs.

Each Tab page is just an HTML element which is linked to a tab defined in the server side control. When the page renders all pages referenced by the tab control are hidden (although it's actually best if you hide them by default yourself to avoid flicker on large pages) and the active page is then activated.

Display characteristics of the tab strip are determined via CSS styles. Predefined styles for .tabbutton,.selectedtabbutton, .disabledtabbutton determine the display attributes. The default implementation is provided in westwind.css and the tab images are provided in the images folder of the virtual.