|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
CODETHATTREE USER GUIDE |
The following "10 steps" instruction will guide you step by step through the CodeThatTree configuration process.
Download package with CodeThatTree script and unarchive it.
For free version (STD) download 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 CodeThatTree Standard and PRO.
Create the basic HTML file.
Your file may look as following:
<HTML> <HEAD> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="codethattreepro.js"></script> </HEAD> <BODY> <p> HELLO WORLD! </BODY> </HTML>
Now lets create your first CodeThaTtree.
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 tree create an object with following structure:
<script language="javascript1.2">
<!--
var TreeDef = {
"style" : { },
"itemover" : { },
"position" : { },
"separator" : { },
"defaction" : { },
"items" : [ ]
};
//-->
</script>
Now we describe tree style, branch over style and tree position:
var TreeDef =
{
"style" :
{
"css" : "xp",
"size" : [180, 20],
"bgcolor" : "#FCFCF9",
"itemoffset" : {
"x" : "15", "y" : "2"
}
},
"styleover" :
{
"css" : "xp",
"bgcolor" : "#C1D2EE",
"color" : "#000000"
},
"position" :
{
"absolute" : false,
"pos" : [10, 10]
}
};
Hint - if parameters description isn't clearly understanding please have a look to CodeThatTree User Manual
To add new branches to the tree use the following structure:
"items" :
[
{
"text" : "[Home] ",
"style" :
{
"imgitem" : "themes_img/home.gif"
}
},
{
"text" : "[News]",
"style" :
{
"imgitem" : "themes_img/news.gif",
"imgdir" : "themes_img/news.gif",
"imgdiropen" : "themes_img/news.gif"
}
}
{
"text" : "[About a company]",
"style" :
{
"imgitem" : "themes_img/about.gif"
}
},
{
"text" : "[Our Forum]",
"style" :
{
"imgitem" : "themes_img/forum.gif"
}
},
{
"text" : "[Contact Us]",
"style" :
{
"imgitem" : "themes_img/contact.gif"
}
} ]
Now lets try to open our HTML file in the browser:
So we're further extending our JS file by adding the subbrunches to the existing brunch.
It is done by adding the code like this:
{
"text" : "[News]",
"style" :
{
"imgitem" : "themes_img/news.gif",
"imgdir" : "themes_img/news.gif",
"imgdiropen" : "themes_img/news.gif"
},
"menu" :
{
"style" :
{
"imgitem" : "themes_img/date.gif"
},
"position" :
{
"anchor" : "ne",
"anchor_side" : "nw"
},
"items" :
[
{
"text" : "{23-06-2003}"
},
{
"text" : "{25-06-2003}"
},
{
"text" : "{26-06-2003}"
},
{
"text" : "{30-06-2003}"
} ]
}
}
So... A complete code for this example you can see here:
<HEAD>
<link href="gray.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript" src="tree/codethattreepro.js"></script>
<script language="javascript1.2">
<!--
var TreeDef =
{
"style" :
{
"css" : "xp",
"size" : [180, 20],
"bgcolor" : "#FCFCF9",
"itemoffset" : {
"x" : "15", "y" : "2"
}
},
"styleover" : {
"css" : "xp",
"bgcolor" : "#C1D2EE",
"color" : "#000000"
},
"position" : {
"absolute" : false, "pos" : [10, 10]
},
"items" : [
{
"text" : "[Home] ",
"style" : {
"imgitem" : "themes_img/home.gif"
}
},
{
"text" : "[News]",
"style" : {
"imgitem" : "themes_img/news.gif",
"imgdir" : "themes_img/news.gif",
"imgdiropen" : "themes_img/news.gif"
},
"menu" : {
"style" : {
"imgitem" : "themes_img/date.gif"
},
"position" : {
"anchor" : "ne",
"anchor_side" : "nw"
},
"items" : [
{
"text" : "{23-06-2003}"
},
{
"text" : "{25-06-2003}"
},
{
"text" : "{26-06-2003}"
},
{
"text" : "{30-06-2003}"
} ]
}
},
{
"text" : "[About a company]",
"style" : {
"imgitem" : "themes_img/about.gif"
}
},
{
"text" : "[Our Forum]",
"style" : {
"imgitem" : "themes_img/forum.gif"
}
},
{
"text" : "[Contact Us]",
"style" : {
"imgitem" : "themes_img/contact.gif"
}
} ]
};
//-->
</script>
<BODY>
<script language="javascript1.2">
<!--
var t1 = new CTree(TreeDef, "sample");
t1.create();
//-->
</script>
<script language="javascript1.2">
<!--
t1.draw();
//-->
</script>
</BODY>
</HTML>
If you prefer to keep the tree at the separate file you should paste tree definition to *.js File.
Your *.html file will look like the:
<HTML>
<HEAD>
<link href="common.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="codethattreepro.js"></script>
<script language="javascript1.2" src="tree/YOUR_TREE.js"></script>
<script language="javascript1.2">
<!--
var YourTree = new CTree(YourTreeDef, 'YourTree');
//-->
</script>
</HEAD>
<BODY>
<script language="javascript1.2">
<!--
var t1 = new CTree(TreeDef, "sample");
t1.create();
//-->
</script>
<script language="javascript1.2">
<!--
t1.draw();
//-->
</script>
</BODY>
</HTML>
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 CodeThaTtree enhanced web page.
|
Try an Example [popup] |
[ Home ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2009
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.