原创－无限级XP类菜单-控件新闻-慧都网

原创－无限级XP类菜单

翻译|其它|编辑：郝浩|2004-08-12 09:39:00.000|阅读 1770 次

概述：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Dhtml:原创－无限级XP类菜单</title>
<style type="text/css">
a.menuitem:hover {
color: #ff3300; font-size: 12px; text-decoration: none
}
a.menuitem {
color: #3333cc; font-size: 12px; text-decoration: none
}
a.menu:hover {
color: #ffffff; font-size: 12px; text-decoration: underline
}
a.menu {
color: #ffffff; font-size: 12px; text-decoration: underline
}
#menubar {
width:100%; height:100%; overflow:auto; overflow-x:hidden;
}
TD {
font-size: 12px;
}
</style>

<script type="text/javascript">
/***************************
** 树对象及方法定义 **
****************************/
function TMenu(out,name) {
this.name=typeof(name)=="undefined"?"xpmenu":name;
this.out=out;
this.item=new Array();
this.root=new TMenuNode();
this.root.owner=this;
this.root.name=this.name;
this.add=this.root.add;
this.show=this.root.build;
this.item=this.root.item;
this.find=TMenu_find;
//display
this.img_root="res/"; //目录图片的存放位置
this.target="main"; //打开链接的窗口名字
this.menu_space=5; //一级菜单的间隔
this.title_color="#cccccc"; //一级菜单背景色
this.title_height=18; //一级菜单高度
this.max_level=2; //菜单显示的最大深度
}

function TMenuNode() {
this.name="";
this.text="";
this.url="";
this.level=-1;
this.owner=null;
this.parent=null;
this.index=-1;
this.item=new Array();
this.haschild=false;
this.isopen=false;
this.add=TMenu_add;
this.build=TMenu_show;
this.open=TMenu_open;
this.close=TMenu_close;
}

function TMenu_add() {
var self=typeof(this.out)=="undefined"?this:this.root;
var ss=typeof(this.out)=="undefined"?this:this.root;
var node=new TMenuNode();
node.name=self.name+"_"+self.item.length;
node.text=arguments.length>0?arguments[0]:"";
node.url=arguments.length>1?arguments[1]:"";
node.level=self.level+1;
node.owner=self.owner;
node.parent=self;
node.index=self.item.length;
self.item[node.index]=node;
self.haschild=true;
node.isopen=(node.index==0)&&(node.level%node.owner.max_level==0);
return node;
}

function TMenu_find(menuname,offset) {
var node=eval(this.name+menuname.replace(/^[^_]*_/,".item[").replace(/_/g,"].item[")+"]");

if (typeof(offset)=="number") {
for (var i=0;i<offset;i++) {
if (node.parent==null) break;
node=node.parent;
}
}
return node;
}

function TMenu_show(menuname,offset) {
var self=typeof(this.out)=="undefined"?this:this.root;
var node=typeof(menuname)=="undefined"?self:self.owner.find(menuname,offset);
var s="<table cellspacing=0 cellpadding=0 width=\"100%\" border=0 onselectstart=\"return false\">\n"+TMenu_build(node)+"</table>\n";
self.owner.out.innerHTML=s;
}

function TMenu_build(node,root_,showme) {
var s="",width,color,bgcolor;
var firstcall=typeof(root_)=="undefined";
var root=firstcall?node:root_;
var level=node.level-root.level;
var rlevel=root.level<0?0:root.level;
var prefix="<tr>\n<td valign=top align=center>\n";
var suffix="<table cellspacing=\"5\" cellpadding=\"0\" border=\"0\"><tr><td></td></tr></table>\n</td>\n</tr>\n";

//一次显示三级
if (level==0) { width= "96%"; bgcolor="#6699cc"; color="#ffffff"; }
if (level==1) { width="100%"; bgcolor="#ffcc66"; color="#000000"; }
if (level==2) { width="100%"; bgcolor="#66ff33"; color="#000000"; }

//当下层菜单做为根菜单时显示带有返回功能的标题栏
if (firstcall&&root.level>0) {
s+=prefix+"<table style=\"cursor:hand\" cellspacing=0 cellpadding=0 width=\"96%\" border=0>\n"+
"<tr valign=center align=left onclick=\""+node.owner.name+".show('"+node.name+"',"+node.owner.max_level+");\">\n"+
"<td width=15>"+
"<img height="+node.owner.title_height+" width=15 src=\""+node.owner.img_root+"curve"+level+".gif\" border=0>"+
"</td>\n<td bgcolor=\""+bgcolor+"\"><font color=\""+color+"\"><b>";
if (node.url=="") {
s+=node.text;
} else {
s+="<a class=menu href=\""+node.url+"\" target=\""+node.owner.target+"\" onclick=\"event.cancelBubble=true;\">"+node.text+"</a>";
}
s+="</b></font></td>\n"+
"<td width=21 align=\"right\">"+
"<img height="+node.owner.title_height+" width=21 src=\""+node.owner.img_root+"parent.gif\" border=0></td>\n</tr>\n</table>\n"+suffix;
}

for (var i=0;i<node.item.length;i++) {
if (typeof(showme)!="undefined") {
if (i!=showme) continue;
}
var n=node.item[i];
var img_click=n.isopen?"collapse":"expand";
var display=n.isopen?"":"none";
var maxlevel=false;
if (firstcall) s+=prefix;
if (n.haschild) {
s+="<div id=\""+n.name+"\" style=\"left:0px;top:0px\" valign=\"top\">\n"+
"<table style=\"cursor:hand\" cellspacing=0 cellpadding=0 width=\""+width+"\" border=0>\n"+
"<tr valign=center align=left onclick=\"";
if (maxlevel)
s+=n.owner.name+".show('"+n.name+"');";
else
s+="showMenu('"+n.name+"');";
s+="\">\n<td width=15>"+
"<img height="+n.owner.title_height+" width=15 src=\""+n.owner.img_root+"curve"+level+".gif\" border=0>"+
"</td>\n<td bgcolor=\""+bgcolor+"\"><font color=\""+color+"\"><b>";
if (n.url=="") {
s+=n.text;
} else {
s+="<a class=menu href=\""+n.url+"\" target=\""+n.owner.target+"\" onclick=\"event.cancelBubble=true;\">"+n.text+"</a>";
}
s+="</b></font></td>\n"+
"<td width=21>\n"+
"<img height="+n.owner.title_height+" width=21 src=\""+n.owner.img_root+img_click+level+".gif\" border=0 id=\""+n.name+"_IMG\">"+
"</td>\n</tr>\n</table>\n";
s+="<div id=\""+n.name+"_MENU\" style=\"border-right:"+bgcolor+" 1px solid; "+
"display:"+display+";width:"+width+";border-left:"+bgcolor+" 1px solid;border-bottom:"+bgcolor+" 1px solid;background-color:#f1f1f1\">\n"+
"<table style=\"border-collapse: separate\" cellspacing=\"0\" cellpadding=\"3\" width=\"100%\" border=\"0\">\n"+
"<tr>\n<td colspan=\"3\" height=\"4\"></td>\n</tr>\n";
for (var j=0; j<n.item.length; j++) {
var n2=n.item[j];
if (!n2.haschild) {
s+="<tr>\n<td valign=\"top\"><font color=\"#bababa\" size=\"2\"> •</font></td>\n"+
"<td width=\"100%\" colspan=2>\n<a class=menuitem href=\""+n2.url+"\" target=\""+n2.owner.target+"\">"+n2.text+"</a>\n"+
"</td>\n</tr>\n";
} else
if (n2.level-rlevel+1>=n2.owner.max_level) { //到达最大显示数则返回
s+="<tr style=\"cursor:hand;background-color:#dfdfdf\"onclick=\""+n2.owner.name+".show('"+n2.name+"');\">\n"+
"<td valign=\"top\"><font color=\"#bababa\" size=\"2\"> •</font></td>\n"+
"<td width=\"100%\">\n<a class=menuitem href=#>"+n2.text+"</a>\n"+
"<td width=16 align=\"right\"><img height=15 width=16 src=\""+n.owner.img_root+"more.gif\" border=0></td>\n</tr>\n";
} else {
s+="<tr>\n<td width=\"100%\" valign=\"top\" colspan=3>\n"+TMenu_build(n,root,j)+"</td>\n</tr>\n";
}
}
s+="</table>\n</div>\n";
} else if (level==0) {
s+="<table style=\"cursor: hand\" cellspacing=0 cellpadding=0 width=\"96%\" border=0 bgcolor=\"#f1f1f1\" height="+n.owner.title_height+">\n"+
"<tr valign=\"bottom\">\n<td width=15><font color=\"#bababa\" size=\"2\"> •</font></td>\n"+
"</td>\n<td width=\"100%\"> \n<a class=\"menuitem\" href=\""+n.url+"\" target=\""+n.owner.target+"\">"+n.text+"</a>\n"+
"</td>\n<td width=21>\n"+
"</td>\n</tr>\n</table>\n";
}
s+="</div>\n";
if (firstcall) s+=suffix;
}
return s;
}

function TMenu_open() {
var xMenu=document.all(this.name+"_MENU");
var xImg=document.all(this.name+"_IMG");
if (!xMenu||!xImg) return false;
xMenu.style.display="";
xImg.src=xImg.src.replace(/collapse/,"expand");
this.isopen=true;
return true;
}

function TMenu_close() {
var xMenu=document.all(this.name+"_MENU");
var xImg=document.all(this.name+"_IMG");
if (!xMenu||!xImg) return false;
xMenu.style.display="none";
xImg.src=xImg.src.replace(/expand/,"collapse");
this.isopen=false;
return true;
}

/*******************
** 公共方法 **
*******************/
function showMenu(id) {
eval("var menu="+id.replace(/_.*/,"")+";");
var node=menu.find(id);
var root=node.parent==null?menu:node.parent;
var curropen=node.isopen;
for (i=0; i<root.item.length; i++) root.item[i].close();
if (!curropen) node.open();
}

//框架页隐藏/显示
function switchsysbar(){
var point=event.srcElement;
if (point.tagName!="SPAN" || point.className!="navpoint") return;

if (point.innerText==3){
switchpoint2.innerText=4;
document.all("menubox").style.display="none";
parent.menupage.cols="10,*";
return;
}

if (point.innerText==4){
switchpoint2.innerText=3;
document.all("menubox").style.display="";
parent.menupage.cols="206,*";
return;
}

if (point.innerText==5){
switchpoint1.innerText=6;
parent.toppage.rows="2,*";
return;
}

if (point.innerText==6){
switchpoint1.innerText=5;
parent.toppage.rows="60,*";
return;
}
}
</script>

<script type="text/javascript">
var xpmenu;
function createTree(owner) {
xpmenu = new TMenu(owner);
var node = new Array;
node[0] = xpmenu.add("客户贷款合同管理");
node[1] = node[0].add("客户贷款合同");
node[2] = node[1].add("贷款合同资料");
node[3] = node[2].add("基本信息","tXD01.event");
node[3] = node[2].add("帐务信息");
node[1] = node[0].add("担保合同资料");
node[2] = node[1].add("抵押合同");
node[2] = node[1].add("质押xpmenu合同");
node[2] = node[1].add("保证合同");
node[2] = node[1].add("贷款关系人");
node[1] = node[0].add("房产资料");
node[1] = node[0].add("个人客户资料","tPC01.event");
node[1] = node[0].add("还款历史记录");
node[1] = node[0].add("合同相关文档资料");
node[0] = xpmenu.add("系统管理");
node[1] = node[0].add("查看相关资料");
node[1] = node[0].add("选择其它协议");

xpmenu.show();
}
</script>
</head>
<body>
<body scroll=no style="margin: px; font-size: 12px;">
<div align="center"><pre>
因为没有图片可能效果不太好:)
</pre>
<table border=0 cellpadding=0 cellspacing=0 height="250" width="206">
<tr>
<td align=center valign=top><div id="menubar"></div></td>
</tr>
</table>
设置每次显示的最深层数
<select onchange="xpmenu.max_level=this.options[this.selectedIndex].text;xpmenu.show();">
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<pre>本菜单已包装为对象，支持无限级子菜单。</pre>
</div>
<script>createTree(menubar)</script>
</body>
</html>