CodeThatTree - HTML code as nodes' text
<script language="javascript1.2">
<!--
function myfunct() {
window.alert('myfunct');
}
var TreeDef = {
"type" : "tree",
"style" : {
//"css":"clsNode",
"imgitem" : "tree/img/d.gif",
"imgdir" : "tree/img/fc.gif",
"imgdiropen" : "tree/img/fe.gif",
"itemoffset" : {
"x" : "5", "y" : "0"
},
"fixwidth" : 300,
"fixheight" : 700
},
"items" : [
{
"text" : "HTML text example",
"menu" : {
"items" : [
{
"text" :
'<table cellspacing="2" cellpadding="2" border="0" bgcolor="#C2D4FA">'
+ '<TR><TD><p><b>Questionnaire</b>'
+ '<p>By using the <b>questionnaire</b> you can gather primary '
+ 'information about your <b>target audience</b>: '
+ '<UL><LI>contact information, <LI>comments, <LI>requests ant etc. '
+ '</UL></TD></TR></TABLE>',
"style" : {
"imgitem" : "tree/img/empty.gif", "form" : true
}
} ]
}
},
{
"text" : "Images example",
"menu" : {
"items" : [
{
"text" :
'<table cellspacing="2" cellpadding="2" border="0">'
+ '<TR><TD align=center><img src="tree/img/home24.gif"></TD></TR>'
+ '<TR><TD align=center><p class=center><b>Home</b></TD></TR>'
+ '<TR><TD align=center><img src="tree/img/clock24.gif"></TD></TR>'
+ '<TR><TD align=center><p class=center><b>Organizer</b></TD></TR>'
+ '<TR><TD align=center><img src="tree/img/help24.gif"></TD></TR>'
+ '<TR><TD align=center><p class=center><b>Help</b></TD></TR>'
+ '</TABLE>',
"style" : {
"imgitem" : "tree/img/empty.gif", "form" : true
}
} ]
}
},
{
"text" : "Form example",
"menu" : {
"items" : [
{
"text" :
'<form action="javascript:alert(\'Submitted\');" method="get">'
+ '<table width="300" height="200" cellspacing="2" cellpadding="2" border="0"'
+ ' bgcolor="#EEEEEE">'
+ '<tr><td class=tableheadleft>Address 1</td><td><input type="text"/></td></tr>'
+ '<tr><td class=tableheadleft>Address 2</td><td><input type="text"></td></tr>'
+ '<tr><td class=tableheadleft>City</td><td><input type="text"></td></tr>'
+ '<tr><td class=tableheadleft>Region</td><td><input type="text"></td></tr>'
+ '<tr><td class=tableheadleft>Country</td><td><input type="text"></td></tr>'
+ '<tr><td class=tableheadleft>Postcode</td><td><input type="text"></td></tr>'
+ '<tr><td colspan=2 align=center><input type="submit" value="Submit">'
+ ' <input type="reset" value="Reset"></td></tr>'
+ '</tr></table></form>',
"style" : {
"imgitem" : "tree/img/empty.gif", "form" : true
}
} ]
}
} ]
};
var t1 = new CTree(TreeDef, "sample");
t1.create();
t1.draw();
//-->
</script>