<!-- 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>