CodeThatTab User Manual 

 CodeThatTab USER GUIDE

The following "10 steps" instruction will guide you step by step through the CodeThatTab configuration process.

  Download package with CodeThatTab script and unarchive it.

For free version (STD) download use this link.

If you'd like to buy full version (PRO) use this link.

Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.

Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.

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



  Create the basic HTML file.

Your file may look as following:

<HTML>
<HEAD>	
	<script language="javascript1.2" src="codethatsdk_std_unreg.js"></script>
	<script language="javascript1.2" src="../Scripts/codethattabstd.js"></script>	
</HEAD>
<BODY>
	<p>&nbsp;HELLO WORLD!
</BODY>
</HTML>




  First of all we should initialize CodeThatTab:

<script language="javascript">               
	var ts = new CTabSet("ts");  
	ts.create(TabDef);  
</script>     

  Now lets create your first CodeThatTab.

For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.

To describe new tab create an object with following structure:

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" : []	
};

Hint - if parameters description isn't clearly understanding please have a look to CodeThatTab User Manual

  Css classes for tab control.

For this purpose you can both create separate stylesheet *.css file or write the css definition construction right to your *.html file. Here we will view second variant.

<style> 	    
 	.over{color:#000080; background-color:#ffffcc;
 		font-family:Verdana;font-size:12px;}
 	.def{color:#ff0000; background-color:#ffffff;
 		font-family:Verdana;font-size:12px;} 	 	                                                                                                
 	.curr0{color:#000000; background-color:#ffffee;
 		font-family:Verdana;font-size:12px;}
 	.curr1{color:#0000ff; background-color:#eaeaff;
 		font-family:Verdana;font-size:12px;}
 	.curr2{color:#008000; background-color:#FFE6E6;
 		font-family:Verdana;font-size:12px;}
 	.curr3{color:#ff0000; background-color:#DFFFDF;
 		font-family:Verdana;font-size:12px;}
 </style>

  Tabs for the tab control.

Add tabs in your tab control. 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	
}




  So... a complete code for this example you can see here:

 <style> 	    
 	.over{color:#000080; background-color:#ffffcc;
 		font-family:Verdana;font-size:12px;}
 	.def{color:#ff0000; background-color:#ffffff;
 		font-family:Verdana;font-size:12px;} 	 	                                                                                                
 	.curr0{color:#000000; background-color:#ffffee;
 		font-family:Verdana;font-size:12px;}
 	.curr1{color:#0000ff; background-color:#eaeaff;
 		font-family:Verdana;font-size:12px;}
 	.curr2{color:#008000; background-color:#FFE6E6;
 		font-family:Verdana;font-size:12px;}
 	.curr3{color:#ff0000; background-color:#DFFFDF;
 		font-family:Verdana;font-size:12px;}
 </style>
   
 <script>   
  var tabDef = {
    x : 10,
    y : 50,
    width : 450,
    height : 140,
    offset : 0,
    spacing : 10,
    padding : 5,
    layout: 'top', 
    border: {width:1, color:'#000000'},    
    cssover: 'over', 	
    css : 'def',	
       
    tabs:[
    {
    text:"CodeThat.com",
    hint:"is the ultimate source of the high-quality, 
    cutting-edge web technologies. In particular, we offer a JavaScript menu, a JavaScript tree, and other scripts, 
    which can be easily integrated into almost any site providing visitors with a fast, high-quality navigation 
    system. We offer freeware and commercial versions of our scripts so that anybody from students to big corporations 
    can benefit from using our first-class solutions.",    
    csscurr:'curr0',   
    css:'curr0'
    },
    
    {
    text:"What's New",
    hint:'<li>Now you have a possibility to export only that rows 
    where data was changed <li>You can use user-defined functions for auto-filled columns creation <li>
    You can perform search in grid right from url <li>You can hide cells with rows/columns names ',    
    csscurr:'curr1',    
    css:'curr1'
    },
    
    {
    text:"What's Hot",
    hint:'Visit our <a href="http://www.codethat.com">Hot</a> 
    section for a list of CodeThat.Com scripts that are popular to the visitors.',
    csscurr:'curr2',    
    css:'curr2'
    },
    
    {
    text:"Search",
    hint:'<form action="http://www.google.com/search" method="get" 
    onSubmit="this.q.value=\'site:www.codethat.com \
    '+this.qfront.value"><p>Search CodeThat.Com:<br /><input name="q" type="hidden" />
    <input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></form>',    
    csscurr:'curr3',    
    css:'curr3'	 
    }    
    ]
  };  
 
   
  var ts = new CTabSet("ts");  
  ts.create(tabDef);  
 </script>
 

Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)

  Congratulations! You have just created your first CodeThatTab enhanced web page.

To make your life easier we do plan to supply you with on and off line tab builders in the nearest time.

Try an Example >> [popup]