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

yxylwt

浏览: 14532 次
性别:
来自: 上海

最近访客更多访客>>

zsgamon8708

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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 onmouseover='ItemOver(this)' onmouseout='ItemOut(this)' onclick='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>

分享到：