<!-- Created by Zhong 2003.7.15 -->
<html>
<head>
<title>Tree Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
a { font: normal 12px 宋体; color: black; text-decoration: none; }
.menu_icon { border: 1px solid black; width: 9px; height: 9px; overflow: hidden; font: normal 7px 宋体; line-height: 8px; text-align: center; cursor: default; }
.menu_space { font: normal 8px 宋体; }
</style>
<script language=javascript>
function Tree() //树状菜单对象
{
this.start=function() //菜单开始，bTop表示是否为最外层。
{
document.writeln("<table cellpadding=1 cellspacing=0>");
}
this.end=function() //菜单结束
{
document.writeln("</table>");
}
this.addItem=function(cText,cLink,bChild,bShow) //为菜单增加项，参数依次为：菜单文字、菜单链接、是否有子菜单、子菜单是否显示。
{
document.writeln("<tr><td><nobr><span class=menu_icon"+(bChild?" οnclick=menuChange(this)":"")+">"
+(bChild?(bShow?"－":"＋"):"·")+"</span><span class=menu_space> </span><a href="+cLink+">"+cText+"</a></nobr></td></tr>");
}
this.childStart=function(bShow) //子选项开始，bShow为是否显示
{
document.writeln("<tr style='display:"+(bShow?"block":"none")+"'><td>");
document.writeln("<table cellpadding=1 cellspacing=0 style='margin-left:12px;'>");
}
this.childEnd=function() //子选项结束
{
document.writeln("</table>");
document.writeln("</td></tr>");
}
}
function menuChange(obj) //控制菜单显示/隐藏
{
obj=obj.parentNode.parentNode.parentNode;
obj.nextSibling.style.display=(obj.nextSibling.style.display=='none'?'block':'none');
obj.cells[0].childNodes[0].childNodes[0].innerText=(obj.nextSibling.style.display=='none'?'＋':'－')
}
</script>
</head>
<body>
<script language=javascript>
//菜单实例
var cmsTree=new Tree();
cmsTree.start();
cmsTree.addItem("菜单一","#none",1,0); //后面两个参数分别表示是否有子菜单、子菜单是否显示
cmsTree.childStart(0); //注意这个参数与上面最后一个参数是一致的
cmsTree.addItem("菜单一一","#none",1,0);
cmsTree.childStart(0);
cmsTree.addItem("菜单一一一","#none",0);
cmsTree.addItem("菜单一一二","#none",0);
cmsTree.addItem("菜单一一三","#none",1,0);
cmsTree.childStart(0);
cmsTree.addItem("菜单一一三一","#none",0);
cmsTree.addItem("菜单一一三二","#none",0);
cmsTree.addItem("菜单一一三三","#none",0);
cmsTree.childEnd();
cmsTree.childEnd();
cmsTree.addItem("菜单一二","#none",0);
cmsTree.childEnd();
cmsTree.addItem("菜单二","#none",1,1) //后面两个参数分别表示是否有子菜单，子菜单是否显示
cmsTree.childStart(1); //注意这个参数与上面最后一个参数是一致的
cmsTree.addItem("菜单二一","#none",0);
cmsTree.addItem("菜单二二","#none",0);
cmsTree.childEnd();
cmsTree.addItem("菜单三","#none",0); //没有子菜单
cmsTree.end();
</script>
</body>
</html>