CodeThatTree - HTML code as nodes' text

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">'
				 + '&nbsp;<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>