CodeThatTab User Manual 

 TAB LOOK

With CodeThatTab you can customize style for the whole tab control.

A tab may have different style in normal state, current state and in mouse over state.

If a tab has no specified normal style or current or mouse over style it inherits the style from the tab control.

Width and height parameters define the size of tab. You may not set these parameters, by default width is 100 px and height is 20px.

To specify look for tab control and tabs, use the "css", "csscurr", "csshint" and "border" properties, as follows:

	"border" : { "width": int, "color": String},
	"css" 	: String,	
	"csscurr" : String,
	"csshint" : String,
	"width" : int
	"height" : int

where

	border {width, color}- border parameters
	css 	- css class for normal state
	csscurr 	- css class for current state	
	csshint	- css class for hint	
	width 	- width of tab
	height 	- height of tab

 CSS, CSSCURR, CSSOVER, CSSHINT

Css, csscurr, cssover, csshint parameters let you define CSS classes for a tab control. For example:

{		 
	"css" 	:  "def",	
	"csscurr" : "curr",
	"csshint" : "hint",
	 ...
} 

where "def", "over", "curr", "hint" are names of css-style that can be described in a separate css-file or in the html file.

	
 	.def{
	 	color:#ff0000; 
	 	background-color:#ffffff;
	 	font-family:Verdana;
	 	font-size:12px;
 	} 	
 	                                                                                                
 	.curr{
	 	color:#000000; 
	 	background-color:#ffffee;
	 	font-family:Verdana;
	 	font-size:12px;
 	}

Note: If you don't set "csshint" parameter "csscurr" will be used as "csshint".

 EXAMPLE - css, csscurr, csshint

You can see an example and complete code here - Css, csscurr, csshint Example [popup]

 BORDER, WIDTH and HEIGHT

Border, width and height of a tab can be controled by corresponding parameters border, width, height. For example:

"border": {"width":1, color:"#000000"}
"width" : 120,
"height": 25

Note: In standtart version you can set border parameter only for whole tab control.

 EXAMPLE - border, width and height

You can see an example and complete code here - Border, width, height Example [popup]

 LAYOUT and ALIGN

Layout parameter controls position of tabset within tab control.

Possible values for layout are left, top, right and bottom.

You can define layout as follows:

"layout": "top"

Align parameter defines align text within tab. This parameter can be used only for whole tab control.

Possible values for align are left, center and right.

You can define align as follows:

"align": "left"

 EXAMPLE - layout and align

You can see an example and complete code here - Layout and align Example [popup]

Read more about CodeThatTab >>