Introduction

CodeThatTab is an advanced JavaScript tab control (page control) that fully mimics look and the functionality of the tab control found in Windows GUI specifications and serves the same purpose. Use CodeThatTab to create a multiple page form within the same window. CodeThatTab displays multiple overlapping pages that hold various content. The user selects a page by clicking the page’s tab that appears at the top of the control (or in the other configured position). The main features of the CodeThatTab JavaScript tab control include:

ability for every page to have unique content. Everything supported by HTML specifications is accepted as a content for the page.

the tabs of the pages can be adjusted to be placed on the top, bottom, left or the right of the pages.

  actions and states for the tabs and pages are fully supported. The following states are defined: default tab, selected tab and mouse over tab.

  full support for the CSS not only for the tabs but for pages.

wide range of the browsers is supported:

IE5+,

NN4+,

Opera5+,

Mozilla0.9+.

The look and feel and behavior of the control remains the same in any supported browser.

 Read Standard vs PRO to know the differences between CodeThatTab Standard and PRO.

Most of configuration parameters are optional and a simple JavaScript configuration may look like this:

var TabDef = {
	"x" : 10, "y" : 10, //start position of tab
	"width" : 450, "height" : 100, //width and height
	"offset" : 10, //offset for a first tab
	"spacing" : 5, //spacing between tabs
	"padding" : 5, //padding for text at page
	"layout" : "top", //top, bottom, right, left
	"align" : "center", //center, right, left
	"css" : "common",
	"cssover" : "over",
	"csscurr" : "current",
	"csshint" : "hint",
	"border" : {
		"width" : 1, "color" : "#000000"
	},
	"tabs" : [
	{
		"text" : "My Tab", 	//tab text
		"hint" : "Here you can read about CodeThatTab using", //tab hint
		"css" : "common1",
		"cssover" : "over1",
		"csscurr" : "current1",
		"csshint" : "hint1",
		"width" : 150,
		"height" : 20
	},
	...
	]
}

Code to create the tab control may look like this:

var ts = new CTabSet("ts");
ts.create(TabDef); 

The tab control will look on a web page like this:

General structure of the configuration is

var TabDef = {
	"x" : int
	"y" : int
	"width"	 : int
	"height" : int
	"offset" : int
	"padding" : int
	"spacing" : int
	"align" : String
	"layout" : String
	"border" : { },
	"css" 	 : String,
	"cssover" : String,
	"csscurr" : String,
	"csshint" : String,
	"tabs" : []
}; 

Properties x,y defines position of tab control. These properties are required for old browsers to place the CodeThatTab.

Width and height define width and height of tab control, offset defines offset for a first tab, spacing defines spacing between tabs, padding defines padding for hint.

Align parameter defines align text within tab.

Layout parameter defines location of tabs in tab control.

Css, cssover, csscurr, csshint and border attributes define look of the tab control and tabs define tab structure.

The tabs array consists of tab object with following structure:

{
	"text"	 : String,
	"hint" 	 : String,
	"action" : { },
	"width"	 : int,
	"height"	 : int,
	"border"	 : { },
	"css" 	 : String,
	"cssover" : String,
	"csscurr" : String,
	"csshint" : String
}

Css, cssover, csscurr, csshint and border attributes define look of the tab (see Tab look), width and height define the size of tab, action defines the action to be performed with mouse click, mouse over and mouse out events (see Tab behavior).

Read more about CodeThatTab >>