|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
CODETHATTAB USER GUIDE |
The following "8 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.js"></script> <script language="javascript1.2" src="codethattabpro.js"></script> </HEAD> <BODY> <p> HELLO WORLD! </BODY> </HTML> |
First of all we should initialize CodeThatTab:
<script language="javascript1.2">
<!--
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 language="javascript1.2">
<!--
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 \
"><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.
|
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.