|
The following "9 steps" instruction will guide you step by step through the CodeThatXPBar configuration process.
Download package with CodeThatXPBar 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 CodeThatXPBar 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="codethatxpbarpro.js"></script>
</HEAD>
<BODY>
<p> HELLO WORD!
</BODY>
</HTML>
|
Now lets create your first CodeThatXPBar.
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 XPBar create an object with following structure:
<script language="javascript1.2">
<!--
var BarDef = {
"style" : { },
"itemover" : { },
"position" : { },
"scroller" : { },
"defaction" : { },
"items" : [ ]
};
//-->
</script>
|
Now we describe XPBar style, item over style, position and scrollers' style:
var BarDef = {
"style" : {
"css" : "bartitle",
"align" : "center",
"bgcolor" : "#6C86DC",
"size" : [160, 25],
"shadow" : {
"color" : "#C0C0C0", "width" : 1
},
"border" : {
"color" : "#000000", "width" : 1
},
"imgspace" : 5,
"imgendon" : {
"src" : "img/arr_down.gif",
"width" : 24, "height" : 24
},
"imgendoff" : {
"src" : "img/arr_up.gif",
"width" : 24, "height" : 24
},
"itemoffset" : {
"x" : 5, "y" : 10
},
"fixheight" : 200,
"scroller" : {
"height" : 25, "bgimg" : "", "color" : "#ffffff",
"up" : "img/scroller_up.gif",
"down" : "img/scroller_down.gif",
"step" : 5, "time" : 30, "len" : 60
}
},
"itemover" : {
"css" : "bartitle",
"size" : [160, 25],
"imgendon" : {
"src" : "img/arr_down_over.gif",
"width" : 24, "height" : 24
},
"imgendoff" : {
"src" : "img/arr_up_over.gif",
"width" : 24, "height" : 24
},
"bgimg" : "img/title_bg_big.gif"
},
"itemon" : {
"bgcolor" : "#265BCC", "color" : "#ffffff"
},
"position" : {
"absolute" : true, "pos" : [10, 10]
}
}
|
Hint - if parameters description isn't clearly understanding please have a look to CodeThatXPBar User Manual
To add new items to XPBar use the following structure:
"items" : [
{
"text" : " ", // text to be written inside
"style" : { }, // item style in normal state
"styleover" : { }, // item style in "mouse over" state
"styleon" : { }, // for bool items specifies the style when in "on" state
"menu" : { }, // submenu
"action" : { },
"position" : { },
"type" : " " // special item type ("bool"/"separator"),
// for hierarchical menu only
} ]
|
For our example items's definition looks like this:
"items" :
[
{
"text" : "Folders",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
}
},
{
"text" : "Other Places",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
}
},
{
"text" : "Details",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
}
} ]
|
Now lets try to open our HTML file in the browser:
So we're further extending our js file by adding the submenu to the existing item.
It is done by adding the code like this:
"items" : [
{
"text" : "Folders",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 22],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"itemoffset" : {
"x" : 5, "y" : 2
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : "",
"size" : [150, 22]
},
"items" : [
{
"text" : "Search",
"style" :
{
"imgitem" : {
"src" : "img/folder_search.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Options",
"style" :
{
"imgitem" : {
"src" : "img/folder_options.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Download",
"style" :
{
"imgitem" : {
"src" : "img/folder_download.gif",
"width" : 16, "height" : 16
}
}
} ]
}
},
{
"text" : "Other Places",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 22],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"itemoffset" : {
"x" : 5, "y" : 2
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : "",
"size" : [150, 22]
},
"items" : [
{
"text" : "My Computer",
"style" :
{
"imgitem" : {
"src" : "img/computer.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Printer",
"style" :
{
"imgitem" : {
"src" : "img/print.gif",
"width" : 16, "height" : 16
}
}
} ]
}
},
{
"text" : "Details",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 50],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"align" : "center",
"itemoffset" : {
"x" : 5, "y" : 1
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : ""
},
"items" : [
{
"text" : "<p><b>Copyright</b><br>
<a href='http://www.codethat.com'>
www.CodeThat.com</a>"
} ]
}
} ]
|
 So... A complete code for this example you can see here:
<HEAD>
<link href="/common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="xpbar/codethatxpbarpro.js"></script>
<script language="javascript1.2">
<!--
var BarDef = {
"style" : {
"css" : "bartitle",
"align" : "center",
"bgcolor" : "#6C86DC",
"size" : [160, 25],
"shadow" : {
"color" : "#C0C0C0", "width" : 1
},
"border" : {
"color" : "#000000", "width" : 1
},
"imgspace" : 5,
"imgendon" : {
"src" : "img/arr_down.gif",
"width" : 24, "height" : 24
},
"imgendoff" : {
"src" : "img/arr_up.gif",
"width" : 24, "height" : 24
},
"itemoffset" : {
"x" : 5, "y" : 10
},
"fixheight" : 200,
"scroller" : {
"height" : 25, "bgimg" : "", "color" : "#ffffff",
"up" : "img/scroller_up.gif",
"down" : "img/scroller_down.gif",
"step" : 5, "time" : 30, "len" : 60
}
},
"itemover" : {
"css" : "bartitle",
"size" : [160, 25],
"imgendon" : {
"src" : "img/arr_down_over.gif",
"width" : 24, "height" : 24
},
"imgendoff" : {
"src" : "img/arr_up_over.gif",
"width" : 24, "height" : 24
},
"bgimg" : "img/title_bg_big.gif"
},
"itemon" : {
"bgcolor" : "#265BCC", "color" : "#ffffff"
},
"position" : {
"absolute" : true, "pos" : [10, 10]
},
"items" : [
{
"text" : "Folders",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 22],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"itemoffset" : {
"x" : 5, "y" : 2
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : "",
"size" : [150, 22]
},
"items" : [
{
"text" : "Search",
"style" :
{
"imgitem" : {
"src" : "img/folder_search.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Options",
"style" :
{
"imgitem" : {
"src" : "img/folder_options.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Download",
"style" :
{
"imgitem" : {
"src" : "img/folder_download.gif",
"width" : 16, "height" : 16
}
}
} ]
}
},
{
"text" : "Other Places",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 22],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"itemoffset" : {
"x" : 5, "y" : 2
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : "",
"size" : [150, 22]
},
"items" : [
{
"text" : "My Computer",
"style" :
{
"imgitem" : {
"src" : "img/computer.gif",
"width" : 16, "height" : 16
}
}
},
{
"text" : "Printer",
"style" :
{
"imgitem" : {
"src" : "img/print.gif",
"width" : 16, "height" : 16
}
}
} ]
}
},
{
"text" : "Details",
"style" : {
"align" : "center",
"bgimg" : "img/title_bg_big.gif"
},
"menu" : {
"style" : {
"size" : [150, 50],
"bgcolor" : "#D6DFF7",
"border" : {
"color" : "#ffffff", "width" : 1
},
"bgimg" : "",
"align" : "center",
"itemoffset" : {
"x" : 5, "y" : 1
}
},
"itemover" : {
"imgendon" : { },
"imgendoff" : { },
"bgimg" : ""
},
"items" : [
{
"text" : "<p><b>Copyright</b><br>
<a href='http://www.codethat.com'>
www.CodeThat.com</a>"
} ]
}
} ]
};
var bar1 = new CXPBar(BarDef, 'bar1');
//-->
</script>
</head>
<body bgcolor="#ffffff">
<script language="javascript1.2">
<!--
bar1.create();
bar1.run();
//-->
</script>
</body>
</html>
|
 If you prefer to keep the XPBar at the separate file you should paste XPBar definition to *.js file. Your *.html file will look like the:
<html>
<head>
<title>Test</title>
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="codethatxpbarpro.js"></script>
<script language="javascript1.2" src="bar1.js"></script>
<script language="javascript1.2">
<!--
var bar1 = new CXPBar(MenuDef, 'bar1');
//-->
</script>
<style type=text/css>
.box {
font-size:14px;
}
.boxover {
font-size:15px;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<script language="javascript1.2">
<!--
bar1.create();
bar1.run();
//-->
</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 CodeThatXPBar enhanced web page.
To make your life easier we do plan to supply you with on and off line XPBar builders in the nearest time.
|
JavaScript Projects
