树型目录示例

这是主页面tree.htm
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript src=TreeDir.JS></SCRIPT>
</HEAD>
<BODY bgColor=lightblue nowrap>

</BODY>
</HTML>

这是js文件TreeDir.JS
function limg_onclick(li, d, limg)
{
if(d.style.display == "none")
{
d.style.display = "block"
limg.src = "b.bmp"
}
else
{
d.style.display = "none"
limg.src = "a.bmp"
}
window.event.cancelBubble = true
}

function li_onclick(li, d, limg)
{
if(d == null)
{
alert("You click " + window.event.srcElement.id + "!")
}
else
{
if(d.style.display == "none")
{
d.style.display = "block"
limg.src = "b.bmp"
}
else
{
d.style.display = "none"
limg.src = "a.bmp"
}
}
window.event.cancelBubble = true
}

function li_onmouseover(li)
{
li.style.color = itemAFC
li.style.backgroundColor = itemABC
window.event.cancelBubble = true
}

function li_onmouseout(li)
{
li.style.color = itemFC
li.style.backgroundColor = treeBC
window.event.cancelBubble = true
}

function writeItem(li, suffix)
{
if(li.toString().split(",").length == 1)
{
var str = li.split(";")
document.write("<IMG id=limg" + suffix + " SRC=\"c.bmp\"> <SPAN id=li" + suffix)
document.write(" style=\"COLOR: " + itemFC + "; CURSOR: hand;\"")
document.write(" LANGUAGE=javascript")
document.write(" onclick =\"return li_onclick(li" + suffix + ")\"")
document.write(" onmouseover=\"return li_onmouseover(li" + suffix + ")\"")
document.write(" onmouseout=\"return li_onmouseout(li" + suffix + ")\">")
if(str.length >= 2)
{
document.write("<A target=\"" + treeTarget + "\" HREF=\"" + str[1] + "\">" + str[0] + "</A></SPAN><BR>")
}
else
{
document.write(str[0] + "</SPAN><BR>")
}
}
else
{
document.write("<IMG id=limg" + suffix + " SRC=\"a.bmp\"")
document.write(" style=\"COLOR: " + itemFC + "; CURSOR: hand;\"")
document.write(" LANGUAGE=javascript")
document.write(" onclick =\"return limg_onclick(li" + suffix + ", d"
+ suffix + ", limg" + suffix + ")\"")
document.write("> <SPAN id=li" + suffix)

document.write(" style=\"COLOR: black; CURSOR: hand;\"")
document.write(" LANGUAGE=javascript")
document.write(" onclick =\"return li_onclick(li" + suffix + ", d"
+ suffix + ", limg" + suffix + ")\"")
document.write(" onmouseover=\"return li_onmouseover(li" + suffix + ")\"")
document.write(" onmouseout=\"return li_onmouseout(li" + suffix + ")\">")
document.write(li[0] + "</SPAN><BR>")
document.write("<DIV id=d" + suffix + " style=\"DISPLAY: none\">")
document.write("<UL id=u" + suffix + " style=\"MARGIN-LEFT: " + indent + "\">")
for(var i = 1; i < li.length; i++)
{
writeItem(li[i], suffix + "_" + i)
}
document.write("</UL></DIV>")
}
}

var treeBC = "lightblue"
var treeFC = "darkblue"
var itemFC = "black"
var itemABC = "lightskyblue"
var itemAFC = "red"
var indent = 20
var marginleft = 5
var treeTarget = "Menu"

var li = new Array()
li[0] = "Tree"
li[1] = new Array()
li[1][0] = "Item 1"
li[1][1] = "Item 1_1;page1_1.htm"
li[1][2] = "Item 1_2;page1_2.htm"
li[1][3] = "Item 1_3;page1_3.htm"
li[2] = new Array()
li[2][0] = "Item 2"
li[2][1] = new Array()
li[2][1][0] = "Item 2_1"
li[2][1][1] = "Item 2_1_1;page2_1_1.htm"
li[2][1][2] = new Array()
li[2][1][2][0] = "Item 2_1_2"
li[2][1][2][1] = "Item 2_1_2_1;page2_1_2_1.htm"
li[2][1][2][2] = "Item 2_1_2_2;page2_1_2_2.htm"
li[2][1][2][3] = "Item 2_1_2_3;page2_1_2_3.htm"
//li[2][1][3] = "Item 2_1_3;page2_1_3.htm"
//li[2][1][4] = "Item 2_1_4;page2_1_4.htm"
li[2][1][3] = "Item 2_1_3"
li[2][1][4] = "Item 2_1_4"
li[2][2] = new Array()
li[2][2][0] = "Item 2_2"
li[2][2][1] = "Item 2_2_1;page2_2_1.htm"
li[2][2][2] = "Item 2_2_2;page2_2_2.htm"
li[2][3] = "Item 2_3;page2_3.htm"
li[3] = "Item 3;page3.htm"

document.write("<DIV noWrap>")
document.write("<UL style=\"BACKGROUND-COLOR: " + treeBC + ";")
document.write(" COLOR: " + treeFC + ";")
document.write(" MARGIN-LEFT: " + marginleft + "\">")
document.write(li[0] + "<BR>")
for(var i = 1; i < li.length; i++)
{
writeItem(li[i], i)
}
document.write("</UL>")
document.write("</DIV>")