CodeThatTree - Explorer-Style Tree Example

var TreeDef =
{
	"type"	 : "tree",
	"style"	 :
	{
		"color" : "#1B77BC",
		"imgline" : "img/line.gif",
		"imgdir" : "img/t-folder.gif",
		"imgdiropen" : "img/t-folder-open.gif",
		"imgdir_l" : "img/folder.gif",
		"imgdiropen_l" : "img/folder-open.gif",
		"itemoffset" : {
			"x" : "22", "y" : "1"
		},
		"fixwidth" : 180,
		"css" : "test2tree",
		"lined" : true
	},
	"styleover"	 :
	{
		"color" : "#1B77BC",
		"css" : "test2tree",
		"bgcolor" : "#E5EFFA"
	},
	"target" : "_blank",
	"position" : {
		"absolute" : false, "pos" : [10, 10]
	},
	"items" :
	[
	{
		"text" : "Item 0",
		"menu" :
		{
			"style"	 :
			{
				"imgline" : "img/line.gif",
				"imgitem" : "img/t-item.gif",
				"imgitem_l" : "img/l-item.gif",
				"imgdir" : "img/t-folder.gif",
				"imgdiropen" : "img/t-folder-open.gif",
				"imgdir_l" : "img/l-folder.gif",
				"imgdiropen_l" : "img/l-folder-open.gif"
			},
			"items" :
			[
			{
				"text" : "Item 1",
				"menu" :
				{
					"items"	 : [
					{
						"text" : "Item 1:1"
					},
					{
						"text" : "Item 1:2",
						"menu" :
						{
							"items" :
							[
							{
								"text" : "Item 1:2:1"
							},
							{
								"text" : "Item 1:2:2"
							} ]
						}
					},
					{
						"text" : "Item 1:3"
					} ]
				}
			},
			{
				"text" : "Item 2",
				"tooltip" : "This is a sample tooltip of Item2.",
				"menu" : {
					"items"	 : [
					{
						"text" : "Item 2:1",
						"menu" : {
							"items" :
							[
							{
								"text" : "Item 2:1:1"
							},
							{
								"text" : "Item 2:1:2"
							} ]
						}
					},
					{
						"text" : "Item 2:2"
					} ]
				}
			},
			{
				"text" : "Item 3",
				"menu" : {
					"items"	 : [
					{
						"text" : "Item 3:1"
					},
					{
						"text" : "Item 3:2"
					},
					{
						"text" : "Item 3:3",
						"menu" :
						{
							"items" :
							[
							{
								"text" : "Item 3:3:1"
							},
							{
								"text" : "Item 3:3:2"
							} ]
						}
					} ]
				}
			} ]
		}
} ]
};