您的位置：首页 > Web前端 > JavaScript

JS之IE下通用无限级树状菜单

2009-08-19 00:10 323 查看

<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?" onclick=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>

收集于CSDN博客，转载请标明出处：http://blog.csdn.net/nickshen3/archive/2007/07/09/1683556.aspx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航