json+pop窗体实现的无限菜单（网上的代码改进）

最新推荐文章于 2019-01-12 23:39:19 发布

iteye_68

最新推荐文章于 2019-01-12 23:39:19 发布

阅读量202

点赞数

文章标签： json IE XSL Microsoft XML

从后台代码直接返回json对象就可以显示成菜单了
<HTML>
<HEAD>
<style>
body,td{
font-size:9pt;margin:0;overflow:hidden;border:0;
}
.PopMenuOutset{border:1px solid;border-color: buttonface threeddarkshadow threeddarkshadow buttonface;FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=buttonshadow,strength=3); }
.PopMenuInset{border:1px solid;border-color: buttonhighlight buttonshadow buttonshadow buttonhighlight;}
.PopMenu{background-color: buttonface;}
.PopMenuItem{height:18px;cursor:default;}
.PopMenuItemOver{height:18px;background-color: highlight;color:highlighttext;cursor:default;}
.PopMenuItemOver img{height:18px;background-color: highlight;color:highlighttext;cursor:default;}
</style>

<SCRIPT LANGUAGE="JScript">

var Menu={
MenuItem:[
{
id:1,
title:"menu1",
MenuItem:[
{id:11,title:"menu11"},{id:12,title:"menu12",MenuItem:[{id:121,title:"menu121"}]}
]
},
{
id:2,
title:"menu2"
},
{
id:3,
title:"menu3"
}
]
}

// 当前展开的菜单项
var preObj = null;

// 创建当前窗体（可以是IE窗体也可以是Popup窗体）的Popup对象
// 这个Popup对象就是用来存储子菜单数据的
var oPopup = document.parentWindow.createPopup();

// 鼠标经过菜单项
function ItemOver(obj)
{
// 隐藏已经打开的菜单项
if (preObj != null)
{
if (preObj == obj)
return;
oPopup.hide();

// 要清空原Popup中的数据——document.write()方法是接着原来的内容往里面写，所以如果不清空会出现重复数据
oPopup = document.parentWindow.createPopup();

// 恢复前一个菜单项的状态
ItemNormal(preObj);
preObj = null;
}

if (obj.cells(2).children.length > 0) //有子菜单
{
// 根据子菜单xml数据和当前xsl文档生成HTML
var sHtml = document.documentElement.outerHTML;

sHtml=sHtml.replace(/<TABLE class(=+[\s\S]*)<\/TD><\/TR><\/TBODY><\/TABLE><\/TD><\/TR><\/TBODY><\/TABLE><\/TD><\/TR><\/TBODY><\/TABLE>/ig,'');

sHtml=sHtml.replace(/document.write\(ShowMenu\(([^\(]*)\)\)/,'document.write(ShowMenu("'+obj.cells(1).id+'"))');

oPopup.document.write(sHtml);

// 计算popup内容的实际宽度高度
oPopup.show(0, 0, 1, 1, document.body);
var width = oPopup.document.body.scrollWidth;
var height = oPopup.document.body.scrollHeight;
oPopup.hide();

// 显示菜单
oPopup.show(obj.offsetWidth, 0, width, height, document.body);

preObj = obj;
obj.cells(2).children(0).src = "images/ArrowRHighlight.gif";
}
obj.className='PopMenuItemOver';
}

function ItemClick(obj)
{
ItemOver(obj);
}

// 鼠标移出菜单项
function ItemOut(obj)
{
if (oPopup.isOpen && preObj == obj) // 如果子菜单被打开则跳过
return;
ItemNormal(obj);
}

// 恢复到菜单项的默认状态
function ItemNormal(obj)
{
obj.className='PopMenuItem';
if (obj.cells(2).children.length > 0)
{
obj.cells(2).children(0).src = "images/ArrowR.gif";
}
}

function ShowMenu(id){

var shtml="";
shtml+="<table id=popupmenu border='0' cellpadding='0' cellspacing='0' width='110' class='PopMenuOutset' >";
shtml+="<tr><td><table border='0' cellpadding='1' cellspacing='0' width='100%' class='PopMenuInset'>";
shtml+="<tr><td class='PopMenu'><table border='0' cellpadding='0' cellspacing='0' width='100%' onselectstart='return false;'>";

for (var i=0; i< eval(id+".length");i++){

shtml+="<tr height=18 οnmοuseοver='ItemOver(this)' οnmοuseοut='ItemOut(this)' οnclick='ItemClick(this)' >";
shtml+="<td width='17' align='center'><IMG SRC='images/dot1.gif' WIDTH='6' HEIGHT='6' BORDER='0' ALT=''/></td>";

shtml+="<td id='"+id+"["+i+"].MenuItem'>"+eval(id+"["+i+"].title")+"</td>";

shtml+="<td width='20' align='right' valign='top' style='padding-right: 6px; padding-top:4px;'>";

if (eval(id+"["+i+"].MenuItem")!=null)
shtml+="<img src='images/arrowR.gif'/>";

shtml+="</td></tr>";
}

shtml+="</table></td></tr></table></td></tr></table>";

return shtml;

}

</SCRIPT>

</head>

<body>
<script>document.write(ShowMenu("Menu.MenuItem"));</script>
</body>

</html>

iteye_68

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json+pop窗体实现的无限菜单（网上的代码改进）

从后台代码直接返回json对象就可以显示成菜单了body,td{ font-size:9pt;margin:0;overflow:hidden;border:0;}.PopMenuOutset{border:1px solid;border-color: buttonface threeddarkshadow threeddarkshadow buttonface;FI...
复制链接

扫一扫