<html>
<head>
<title>MSDN的示例</title>
<link href="menu.css" type=text/css rel=stylesheet>
<style>
body
{
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
scrollbar-3dlight-color:#D3D3D3 ;
scrollbar-arrow-color:#656565 ;
scrollbar-base-color:#FFFFFF ;
scrollbar-darkshadow-color:#D3D3D3 ;
scrollbar-face-color:#E1E1E1 ;
scrollbar-highlight-color:#FFFFFF ;
scrollbar-shadow-color:#E1E1E1 ;
background-color:#F5F9FD;
}
.tdmenu
{
font-size:14px;
padding-left:10px;
padding-right:10px;
letter-spacing:0px;
text-align:center;
height:30px;
onmouseover: expression(onmouseover=function (){show(this,this.menuid)});
}
.tdmenu A:link { COLOR: #FFFFFF; TEXT-DECORATION: none }
.tdmenu A:visited { COLOR: #FFFFFF; TEXT-DECORATION: none }
.tdmenu A:hover { COLOR: #FFFF00; TEXT-DECORATION: none }
.tdmenumid
{
width:4px;
}
</style>
<script>
var oPopup = window.createPopup();
oPopupBody = oPopup.document.body;
oPopupBody.style.background="#eee";
oPopupBody.style.fontSize="12px";
oPopupBody.style.textAlign="center";
oPopupBody.style.padding="0px 0px 0px 0px";
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopupBody = oPopup.document.body;
oPopupBody.style.background="#000";
oPopupBody.style.fontSize="12px";
oPopupBody.style.textAlign="center";
oPopupBody.style.padding="0px 0px 0px 0px";
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 84, contextobox);
}
function show(obj,id){
if(cSonMenu(id)){
oPopup.document.body.innerHTML = document.getElementById("menuson").outerHTML;
if(!oPopup.document.getElementById("oContext")){
oPopup.document.getElementById("menuson").id="menusontmp";
oPopup.document.body.innerHTML += document.getElementById("oContext").outerHTML;
oPopup.document.getElementById("menuxmlpos").value+="/Item_"+id;
}
loadjscssfile(oPopup.document,"menu.css","css");
loadjscssfile(oPopup.document,"menu.js","js");
oPopup.show(0, 30, document.getElementById("menuson").clientWidth, document.getElementById("menuson").clientHeight, obj);
}else{
oPopup.hide();
}
}
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
if (degree < 0) // 层数不能小于0
return null;
if (pops[degree] != null) //如果已经存在则不需创建
return pops[degree];
if (degree == 0)
pops[0] = window.createPopup(); //创建最顶层Popup窗口
else{
if (pops[degree - 1] == null)
pops[degree - 1] = CreatePopup(degree - 1) //递归回溯一层一层开始创建
pops[degree] = pops[degree - 1].document.parentWindow.createPopup();
//从父Popup窗口创建子Popup窗口
}
pops[degree].document.body.setAttribute("degree", degree);
pops[degree].document.body.innerHTML="hello";
pops[degree].show(degree*100,degree*100,100,100,menutable);
return pops[degree];
}
function loadjscssfile(doc,filename,filetype){
var fileref;
if (filetype=="js"){ //判断文件类型
fileref=doc.createElement("script")//创建标签
fileref.setAttribute("type","text/javascript")//界说属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
}else if(filetype=="css"){//判断文件类型
fileref=doc.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined"){
doc.getElementsByTagName("head")[0].appendChild(fileref);
}
}
var menuxml = new ActiveXObject("MSXML2.DOMDocument.3.0");
menuxml.async=false;
//async属性可规定XML文件的下载是否应当被同步处理。
//True意味着load()方法可在下载完成之前向调用程序返回控制权。
//False意味着在调用程序取回控制权之前下载必须被完成。
//asp程序只能用False
menuxml.load("menu.xml");
var menus = menuxml.selectNodes("/Order/Item");
function cMainMenu(){
var mt=document.getElementById("menutable");
var newTr=mt.insertRow();
for(var i=0;i<menus.length;i++){
var newTd=newTr.insertCell();
newTd.className="tdmenu";
newTd.menuid=menus[i].attributes[0].value;
newTd.innerHTML="<a href='"+menus[i].attributes[2].value+"'>"+menus[i].attributes[1].value+"</a>";
if(window.addEventListener){ // Mozilla, Netscape, Firefox
newTd.addEventListener('mouseover', show(newTd,menus[i].attributes[0].value), false);
} else { // IE
//newTd.attachEvent('onmouseover', function(this,menus[i].attributes[0].value){show();});
//newTd.onmouseover=function(){alert(this.tagName)}
}
}
}
function cSonMenu(id){
var mt=document.getElementById("menuson");
var sonmenus=menuxml.selectNodes(document.getElementById("menuxmlpos").value+"/Item_"+id);
if(mt.firstChild)mt.firstChild.removeNode(true);//删除所有行
for(var i=0;i<sonmenus.length;i++){
var newTr=mt.insertRow();
var newTd=newTr.insertCell();
newTd.className="trmenu";
newTd.innerHTML="<a href='"+sonmenus[i].attributes[2].value+"'>"+sonmenus[i].attributes[1].value+"</a>";
newTd.menuid=sonmenus[i].attributes[0].value;
}
if(sonmenus.length>0){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" background="top_bg.jpg">
<tr>
<td valign="bottom">
<table id="menutable" border="0" cellspacing="0" cellpadding="0">
<!--tr>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">监控台</a>
</td>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">客户管理</a>
</td>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">客户管理</a>
</td>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">客户管理客户管理客户管理客户管理客户管理</a>
</td>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">客户管理</a>
</td>
<td class="tdmenumid">
</td>
<td class="tdmenu" onmouseover="show(this)">
<a href="#">客户管理</a>
</td>
<td class="tdmenumid">
</td>
</tr-->
</table>
</td>
</tr>
</table>
<!--span id="contextobox" style=" cursor:hand; margin-left:0px; margin-right:0px; background:#e4e4e4; width:300; height:40; padding:0px;" onmouseover="richContext();" >Right-click inside this box.</span-->
<div id="oContext" style="width:1000px;height:1000px;position:absolute;overflow:hidden;margin-left:-2000px;margin-top:-2000px;">
<table id="menuson" style="font:12px;border:#C6D8E0 0px solid;" cellspacing="0" cellpadding="0">
<!--tr>
<td class="trmenu" onmouseover="this.style.background='#fff';show(this);" onmouseout="this.style.background='#eee'">
<a href="#">菜单1</a>
</td>
</tr>
<tr>
<td class="trmenu" onmouseover="this.style.background='#fff';show(this);" onmouseout="this.style.background='#eee'">
<a href="#">菜单1</a>
</td>
</tr>
<tr>
<td class="trmenu" onmouseover="this.style.background='#fff';show(this);" onmouseout="this.style.background='#eee'">
<a href="#">菜单1</a>
</td>
</tr>
<tr>
<td class="trmenu" onmouseover="this.style.background='#fff';show(this);" onmouseout="this.style.background='#eee'">
<a href="#">菜单1</a>
</td>
</tr>
<tr>
<td class="trmenu" onmouseover="this.style.background='#fff';show(this);" onmouseout="this.style.background='#eee'">
<a href="#">菜单1</a>
</td>
</tr-->
</table>
<input type="hidden" id="menuxmlpos" value="/Order/Item">
</div>
<!--D
实现跨frame的js加载xml动态生成的菜单
4星 · 超过85%的资源 需积分: 14 123 浏览量
2010-10-26
10:17:55
上传
评论
收藏 8KB RAR 举报 
跨frame菜单.rar （8个子文件） 
跨frame菜单 
top.htm 10KB menu.css 527B menu.xml 662B bottom.htm 187B Thumbs.db 5KB menu.js 2KB demo.htm 375B
top_bg.jpg 558B资源评论
北极星5312012-06-06谢谢分享，只是还是不完美，不能兼容多种浏览器。
eddy446002013-07-11只支持IE，效果可以，稍有复杂
