一棵用JAVASCRIPT实现的可无限扩展的树
2008-02-22 10:48
405 查看
其中browse.gif为叶节点标记,minus.gif为展开后的枝节点标记,plus.gif为展开前的枝节点标记(图片就略了)
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>无限级树形菜单</title>
<style>
#A1 td { vertical-align: middle; }
#A1 td.bj { font-family: Wingdings; color: GREEN; text-align: center; }
#A1 td.bj , #A1 td.kg { width: 24; }
#A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; }
#A1 a:hover { color: #0ff080; text-decoration: none; }
a{text-decoration:none;}
</style>
<script language="JavaScript">
function treeClass(id)
{
this.id = id;
this.HTMLdata = "";
this.start = function() //菜单开始
{
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="'+this.id+'">';
}
this.end = function() //菜单结束
{
this.HTMLdata += '</table>';
}
this.m_start = function(name,url,tt) //菜单组开始
{
this.HTMLdata += '<tr><td class="bj"><img src="'+(tt==1?'images/minus.gif':'images/plus.gif')+'" id="'+(tt==1?'1':'0')+'" title="'+(tt==1?'点击折叠':'点击展开')+'" onclick="zgmm()"></td>';
this.HTMLdata += '<td><a href="'+url+'">'+name+'</a></td>';
this.HTMLdata += '</tr>';
this.HTMLdata += '<tr style="display: '+(tt==1?'block':'none')+';">';
this.HTMLdata += '<td class="bj"> </td>';
this.HTMLdata += '<td>';
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0">';
}
this.m_end = function() //菜单组结束
{
this.HTMLdata += '</table></td></tr>';
}
this.add_Sub = function(name,url,kj) //添加菜单项
{
this.HTMLdata += '<tr><td class="bj"><img src="images/browse.gif"></td><td>';
this.HTMLdata += '<a target="'+kj+'" href="'+url+'">'+name+'</a>';
this.HTMLdata += '</td></tr>';
}
this.print = function() //输出菜单
{
document.write(this.HTMLdata);
}
}
//点击后的处理
function zgmm()
{
var ero = event.srcElement;
var mo = event.srcElement.parentElement.parentElement.nextSibling;
mo.style.display = (mo.style.display=="none")?"block":"none";
if(ero.id==0){
ero.src = "images/minus.gif";
ero.title = "点击折叠";
ero.id=1;
}else if(ero.id==1){
ero.src = "images/plus.gif";
ero.title = "点击展开";
ero.id=0;
}
}
</script>
</head>
<body>
<script language="JavaScript">
// 说明:
// 菜单组开始,m_start(name,tt); name为菜单组名称,tt为1菜单组初始时展开,为0不展开
// 菜单组结束:m_end();
// 添加菜单项:add_Sub("菜单项名称","url地址","框架名");
var tObj = new treeClass("A1")
tObj.start();
tObj.m_start("贵州省","src/guizhou.html","1");
tObj.m_start("贵阳市","src/guiyang.html",0);
tObj.m_start("花溪区","src/huaxi.html",0);
tObj.m_start("花溪局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("花溪局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("金牛区","src/huaxi.html",0);
tObj.m_start("金牛局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("六盘水市","src/guiyang.html",0);
tObj.m_start("六盘区","src/huaxi.html",0);
tObj.m_start("六盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("六盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("七盘区","src/huaxi.html",0);
tObj.m_start("七盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("七盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("遵义市","src/guiyang.html",0);
tObj.m_start("革命区","src/huaxi.html",0);
tObj.m_start("革命局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("革命局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("上沿区","src/huaxi.html",0);
tObj.m_start("上沿局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("上沿局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("安顺市","src/guiyang.html",0);
tObj.m_start("安顺区","src/huaxi.html",0);
tObj.m_start("安顺局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("安顺局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("青阳区","src/huaxi.html",0);
tObj.m_start("青阳局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("青阳局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("铜仁市","src/guiyang.html",0);
tObj.m_start("铜仁区","src/huaxi.html",0);
tObj.m_start("铜仁局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("铜仁局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("毕节市","src/guiyang.html",0);
tObj.m_start("节日区","src/huaxi.html",0);
tObj.m_start("节日局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("节日局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("黔南州","src/guiyang.html",0);
tObj.m_start("迁徙区","src/huaxi.html",0);
tObj.m_start("迁徙局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("迁徙局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.end();
tObj.print();
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>无限级树形菜单</title>
<style>
#A1 td { vertical-align: middle; }
#A1 td.bj { font-family: Wingdings; color: GREEN; text-align: center; }
#A1 td.bj , #A1 td.kg { width: 24; }
#A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; }
#A1 a:hover { color: #0ff080; text-decoration: none; }
a{text-decoration:none;}
</style>
<script language="JavaScript">
function treeClass(id)
{
this.id = id;
this.HTMLdata = "";
this.start = function() //菜单开始
{
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="'+this.id+'">';
}
this.end = function() //菜单结束
{
this.HTMLdata += '</table>';
}
this.m_start = function(name,url,tt) //菜单组开始
{
this.HTMLdata += '<tr><td class="bj"><img src="'+(tt==1?'images/minus.gif':'images/plus.gif')+'" id="'+(tt==1?'1':'0')+'" title="'+(tt==1?'点击折叠':'点击展开')+'" onclick="zgmm()"></td>';
this.HTMLdata += '<td><a href="'+url+'">'+name+'</a></td>';
this.HTMLdata += '</tr>';
this.HTMLdata += '<tr style="display: '+(tt==1?'block':'none')+';">';
this.HTMLdata += '<td class="bj"> </td>';
this.HTMLdata += '<td>';
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0">';
}
this.m_end = function() //菜单组结束
{
this.HTMLdata += '</table></td></tr>';
}
this.add_Sub = function(name,url,kj) //添加菜单项
{
this.HTMLdata += '<tr><td class="bj"><img src="images/browse.gif"></td><td>';
this.HTMLdata += '<a target="'+kj+'" href="'+url+'">'+name+'</a>';
this.HTMLdata += '</td></tr>';
}
this.print = function() //输出菜单
{
document.write(this.HTMLdata);
}
}
//点击后的处理
function zgmm()
{
var ero = event.srcElement;
var mo = event.srcElement.parentElement.parentElement.nextSibling;
mo.style.display = (mo.style.display=="none")?"block":"none";
if(ero.id==0){
ero.src = "images/minus.gif";
ero.title = "点击折叠";
ero.id=1;
}else if(ero.id==1){
ero.src = "images/plus.gif";
ero.title = "点击展开";
ero.id=0;
}
}
</script>
</head>
<body>
<script language="JavaScript">
// 说明:
// 菜单组开始,m_start(name,tt); name为菜单组名称,tt为1菜单组初始时展开,为0不展开
// 菜单组结束:m_end();
// 添加菜单项:add_Sub("菜单项名称","url地址","框架名");
var tObj = new treeClass("A1")
tObj.start();
tObj.m_start("贵州省","src/guizhou.html","1");
tObj.m_start("贵阳市","src/guiyang.html",0);
tObj.m_start("花溪区","src/huaxi.html",0);
tObj.m_start("花溪局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("花溪局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("金牛区","src/huaxi.html",0);
tObj.m_start("金牛局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("六盘水市","src/guiyang.html",0);
tObj.m_start("六盘区","src/huaxi.html",0);
tObj.m_start("六盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("六盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("七盘区","src/huaxi.html",0);
tObj.m_start("七盘局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("七盘局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("遵义市","src/guiyang.html",0);
tObj.m_start("革命区","src/huaxi.html",0);
tObj.m_start("革命局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("革命局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("上沿区","src/huaxi.html",0);
tObj.m_start("上沿局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("上沿局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("安顺市","src/guiyang.html",0);
tObj.m_start("安顺区","src/huaxi.html",0);
tObj.m_start("安顺局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("安顺局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("青阳区","src/huaxi.html",0);
tObj.m_start("青阳局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("青阳局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("铜仁市","src/guiyang.html",0);
tObj.m_start("铜仁区","src/huaxi.html",0);
tObj.m_start("铜仁局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("铜仁局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_start("南明区","src/huaxi.html",0);
tObj.m_start("南明局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("南明局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("毕节市","src/guiyang.html",0);
tObj.m_start("节日区","src/huaxi.html",0);
tObj.m_start("节日局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("节日局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_start("黔南州","src/guiyang.html",0);
tObj.m_start("迁徙区","src/huaxi.html",0);
tObj.m_start("迁徙局站1","src/huaxijuzhan1.html",0);
tObj.add_Sub("1号机房","src/huaxijifang1.html","");
tObj.add_Sub("2号机房","src/huaxijifang2.html","");
tObj.add_Sub("3号机房","src/huaxijifang3.html","");
tObj.m_end();
tObj.m_start("迁徙局站2","src/huaxijuzhan2.html",0);
tObj.add_Sub("1号机房","src/huaxijifang4.html","");
tObj.add_Sub("2号机房","src/huaxijifang5.html","");
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.m_end();
tObj.end();
tObj.print();
</script>
</body>
</html>
相关文章推荐
- javascript数组的扩展实现代码集合
- JavaScript Array扩展实现代码
- 使用JAVA反射技术实现代码零耦合与功能无限扩展!
- 多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法)
- Javascript实现自动无限级关联下拉菜单
- 扩展javascript的Date方法实现代码(prototype)
- JavaScript与Web Service组合实现无刷新交互(扩展)--查询数据库
- Javascript扩展String.prototype实现格式金额、格式时间、字符串连接、计算长度、是否包含、日期计算等功能
- JavaScript Array扩展实现代码
- 用原生的javascript 实现一个无限滚动的轮播图
- 基于JavaScript实现移动端无限加载分页
- javascript(js),XML,DOM实现无限级下拉菜单,不会被任何标签或元素遮住
- JavaScript与Web Service组合实现无刷新交互(扩展)--查询数据库
- 使用TreeView实现无限级扩展节点(原创)
- javascript继承扩展类方法实现
- javascript技巧之实现add方法无限调用
- 浅谈javascript对象、如何实现继承、jQuery方法的扩展(jquery插件)
- Java和JavaScript实现扩展的九宫格算法
- Struts+Hibernate+Javascript 实现无限级树形菜单(重新上传带图片)
- 用prototype实现JavaScript的扩展