CodeThatTab - Layout and align Example

CodeThatTab - Layout and align Example

Set layout:

<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 language="javascript1.2">
<!--
var l = window.location.href;
if (l.indexOf("?") > - 1) l = l.slice(0, l.indexOf("?"));
var tabDef = {
	x : 10,
	y : 50,
	width : 450,
	height : 140,
	offset : 3,
	spacing : 5,
	padding : 5,
	align : 'right',
	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',
		cssover : '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',
		cssover : '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',
		cssover : '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',
		cssover:'curr3'
		}
		]
		};
		l = window.location.href;
		if (l.indexOf(" = ") > -1) l = l.slice(l.indexOf(" = ")+1)
		else l = "top";
		tabDef.layout = l; 
//-->
</script>
 
 <form name="f">
  Set layout: <select onChange="this.form.submit();" name="layout">
    <option value="top">top</option>
    <option value="bottom">bottom</option>
    <option value="left">left</option>
    <option value="right">right</option>
  </select>
 </form>
 
 <script language="javascript1.2">
<!--
for (i = 0; i < document.forms['f'].layout.length; i++)
if (document.forms['f'].layout.options[i].value == l) document.forms['f'].layout.options[i].selected = true;
var ts = new CTabSet("ts");
ts.create(tabDef); 
//-->
</script>