webmenu编程精彩历程之(一)结构总览和所有原代码

最新推荐文章于 2025-04-11 19:38:51 发布

原创最新推荐文章于 2025-04-11 19:38:51 发布 · 3.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

webmenu编程精彩历程

该博客展示了网页菜单组件的实现，包含menutest.htm测试页面、menudata.xml配置页面、menu.css样式表和webmenu.htc组件原代码。详细给出了菜单的HTML、XML和CSS代码，还包含JavaScript函数用于填充菜单项数据、创建菜单栏等，最后提供源文件下载。

菜单的效果见我的相册里面的作品截屏。
menutest.htm 实际应用测试页面
menudata.xml 菜单配置页面
menu.css 菜单样式表
webmenu.htc 封装后的htc菜单组件

原代码：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
menutest.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 1</title> <link rel="stylesheet" type="text/css" href="Menu.css"> </head> <body topmargin="0" leftmargin="0" oncontextmenu="Menu1.showMenu(window,Menu1.dataSource.documentElement.selectSingleNode('//MenuItem'),window.document.body,event.x,event.y)"> <div id="MenubarDiv"></Div> <WebMenu DataSource="xmlData" class="WebMenu" id="Menu1" Width="100" Effect="2" MenuType="1" Container="MenubarDiv"></WebMenu> <WebMenu DataSource="xmlData" class="WebMenu" id="Menu2" Width="100" Effect="3" MenuType="0" Container="MenubarDiv"></WebMenu> <textarea rows="17" id="Code" cols="73" style="display:none"> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
menudata.xml
<?xml version="1.0" encoding="gb2312"?> <Root> <MenuItem hasSub="1" subWidth="160" > <MenuItem Func="" Text="一级菜单项1" img="save.gif"/> <MenuItem Func="" Text="一级菜单项2" img="addNew.gif" hasSub="1" HeadColumn="2" subWidth="200"> <MenuItem Func="" isCheckItem="1" checked="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" checked="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img="addnew.gif"/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" checked="1" Text="二级级菜单项3" img="save.gif"/> <MenuItem Func="" isCheckItem="1" checked="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> <MenuItem Func="" isCheckItem="1" Text="二级级菜单项3" img=""/> </MenuItem> <MenuItem Func="" Text="一级菜单项3" img="REFRESH.GIF" hasLine="1"/> <MenuItem Func="" Text="一级菜单项4" img=""/> <MenuItem Func="" Text="一级菜单项5" img="" hasSub="1" subWidth="160"> <MenuItem Func="" Text="二级级菜单项3" img="Edit.gif" hasLine="1"/> <MenuItem Func="" Text="二级级菜单项3" img=""/> <MenuItem Func="" Text="二级级菜单项3" img="" hasSub="1" subWidth="160"> <MenuItem Func="" Text="三级级菜单项4" img="SendEmail.gif" hasLine="1"/> <MenuItem Func="" Text="三级级菜单项4" img=""/> <MenuItem Func="" Text="三级级菜单项4" img=""/> </MenuItem> </MenuItem> <MenuItem Func="" Text="一级菜单项6" img="Search.gif"/> </MenuItem> </Root> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
menu.css
.WebMenu{ BEHAVIOR: url(https://blog.csdn.net/"WebMenu.htc") } .MenuPanel { border: 1px solid #002D96; cursor:hand; filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#99CCFF,direction=135,strength=3); table-layout:fixed; } .ItemHightLightDiv { border: 1px solid #000080; background-color: #FFEEC2; position: absolute; z-index:6; height:23px; left:2px; cursor:hand; } .ItemHighLightTable { table-layout:fixed; width:100%; height:100%; cursor:hand; } .ItemHL { padding-left:6px; font-size: 10pt; white-space:nowrap; } .ItemNormal { padding-left:4px; height:25px; font-size: 10pt; padding-top:2px; background-color: #F6F6F6; border-Bottom: 1px solid #F6F6F6; white-space:nowrap; } .ItemNormalLine { padding-left:4px; padding-top:2px; height:25px; font-size: 10pt; background-color: #F6F6F6; border-Bottom: 1px solid #6A8CCB; white-space:nowrap; } .PicColummLeftHalf { padding-left:7px; height:25px; width:26px; afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E3EFFF,endcolorstr=#8EB3E7,gradientType=1); background-image:url(https://blog.csdn.net/LeftHalf.gif); } .PicColummRightHalf { height:25px; width:26px; padding-left:5px; afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8EB3E7,endcolorstr=#88AEE4,gradientType=1); background-image:url(https://blog.csdn.net/RightHalf.gif); } .PicColummFull { padding-left:5px; height:25px; width:26px; afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#DDECFE,endcolorstr=#81A9E2,gradientType=1); background-image:url(https://blog.csdn.net/FullBG.gif); } .DivPanel{ position: relative; height: 1px; z-index: 2; visibility:hidden; } .MenubarHLYellow { text-align:center; padding-right:4px; padding-left:4px; padding-top: 1px; padding-bottom: 1px; filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFF4CC,endcolorstr=#FFD79D,gradientType=0); border: 1px solid #000080; } .MenubarHLBlue { text-align:center; padding-right:4px; padding-left:4px; padding-top: 1px; padding-bottom: 1px; filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#E3EFFF,endcolorstr=#98B9E8,gradientType=0); border: 1px solid #000080; } .Menubar{ background-color: #98B9E8; font-size: 10pt; height:24px; width:100%; cursor:hand; } .MenubarNormal{ font-size: 10pt; white-space:nowrap; padding-left:4px; padding-right:4px; padding-top: 1px; padding-bottom: 1px; cursor:hand; border:1px solid #98B9E8; }

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
webmenu.htc
<PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="fnInit()" /> <PUBLIC:METHOD NAME="showMenu"/> <PUBLIC:PROPERTY NAME = "DataSource" /> <PUBLIC:PROPERTY NAME = "Width" /> <PUBLIC:PROPERTY NAME = "Effect" /> <PUBLIC:PROPERTY NAME = "MenuType" /> <PUBLIC:PROPERTY NAME = "Container" /> <script LANGUAGE=javascript> //初始化默认值 function fnInit(){ element.dataSource = eval("window.document.all."+DataSource); initData = element.dataSource.documentElement.selectSingleNode("//MenuItem"); if(element.MenuType=="1"){ initWindow = window; initoEle = window.document.body; window.document.childWin=null; /*window.document.attachEvent("oncontextmenu",function(){ showMenu(initWindow,initData,initoEle,event.x,event.y) });*/ } else{ oMenubar = createMenuBar(); eval("window.document.all."+element.Container+".appendChild(oMenubar)") } window.document.attachEvent("onmousedown",function(){ hideMenu(window); if(!element.Menubar) return; element.Menubar.isDisplay=false; oEles = element.Menubar.getElementsByTagName("SPAN"); for(i=0;i<oEles.length;i++){ oEles[i].className="MenubarNormal"; } }); } //建立popup窗口,该窗口从属于参数oPopup指向的窗口 function fnCreatePopup(oParentWin){ oNewChildWin = oParentWin.document.parentWindow.createPopup(); oNewChildWin.document.createStyleSheet('Menu.css'); oParentWin.document.childWin = oNewChildWin; } //菜单淡入效果,可以在页面上通过Effect属性设置。 function fadeIn(oDiv){ oDiv.style.visibility="hidden"; switch(element.Effect){ case("1")://从左到右展开 strfilter = "progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.75,motion=forward)" break; case("2")://粒子效果 strfilter = "progid:DXImageTransform.Microsoft.RevealTrans ( duration=0.5,transition=12 )" ; break; case("3")://从上到下 strfilter = "progid:DXImageTransform.Microsoft.GradientWipe ( duration=0.5,gradientSize=0.25,motion=forward,wipeStyle=1)"; break; case("4")://最普通的淡入 strfilter = "progid:DXImageTransform.Microsoft.Fade()"; break; default: strfilter = "progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.75,motion=forward)"; } oDiv.style.filter = strfilter; oDiv.filters[0].Apply(); oDiv.style.visibility="visible"; oDiv.filters[0].play(0.2); } function showMenu(oCurrWin,NodeData,oEle,x,y){ //当前窗口尚未有子窗口，则新建子窗口，然后创建样式。 if(oCurrWin.document.childWin==null){ fnCreatePopup(oCurrWin); } oChildWin = oCurrWin.document.childWin; //如果当前窗口的子窗口存在 //如果当前将要显示的窗口内容不是之前所显示的窗口内容 //或者将要显示的窗口内容不存在,则重新写入将要显示的窗口菜单内容 if(!oCurrWin.document.body.preShowItem||oCurrWin.document.body.preShowItem!=oEle){ oChildWin.document.body.innerHTML = ""; //hasSub="1" HeadColumn="1" subWidth="220" //hasSub = (NodeData.attributes.getNamedItem("hasSub"))?true:false; subWidth = (NodeData.attributes.getNamedItem("subWidth"))?NodeData.attributes.getNamedItem("subWidth").text:false; HeadColumn = (NodeData.attributes.getNamedItem("HeadColumn"))?NodeData.attributes.getNamedItem("HeadColumn").text:"0"; oDiv = createBasePanel(oChildWin,subWidth); oChildWin.document.body.appendChild(oDiv); iHeight=4; for(i=0;i<NodeData.childNodes.length;i++){ oTR = createItemTemp(oDiv,oChildWin,HeadColumn,subWidth*1); aNode = NodeData.childNodes.item(i) fillMenuItemData(aNode,oTR,oChildWin,HeadColumn); iHeight = iHeight + 25; } createHLDiv(oChildWin,HeadColumn); oCurrWin.document.body.preShowItem = oEle; oChildWin.document.iHeight = iHeight*1; oChildWin.document.iWidth = subWidth*1+4; } //如果当前将要显示的窗口已经显示，则隐藏该子窗口上的高亮区，并不再做显示菜单的动作 if(oCurrWin.document.body.preShowItem==oEle&&oChildWin.document.DivPanel.style.visibility=="visible"&&oChildWin.isOpen){ oCurrWin.document.childWin.document.body.HLDiv.style.visibility="hidden"; return } //执行显示子窗口子菜单动作 if(x&&y){ XConer = x; YConer = y; } else{ XConer = oEle.offsetWidth+oEle.offsetLeft; YConer = oEle.offsetTop; } oChildWin.show(XConer,YConer,oChildWin.document.iWidth,oChildWin.document.iHeight,oCurrWin.document.body); //使用淡入效果显示菜单 fadeIn(oChildWin.document.DivPanel); //禁止系统右键菜单的弹出。 try{ event.returnValue = false; } catch(e){ } } function createHLDiv(oPopup,HeadColumn){ //创建一个鼠标移动到菜单项的高亮效果层 oHLDiv = oPopup.document.createElement("DIV"); oTable = oPopup.document.createElement("<TABLE height='100%' border=/"0/" cellspacing=/"0/" cellpadding=/"0/">"); oTBody = oPopup.document.createElement("TBODY");//TBODY是必须要的元素，不然表格无法显示 oTable.className = "ItemHighLightTable"; oHLDiv.className = "ItemHightLightDiv"; oHLDiv.appendChild(oTable); oTable.appendChild(oTBody); oTR = oTable.insertRow(); switch(HeadColumn){ case "0": oTD = oTR.insertCell(); oTD.style.width = 23; oTD.className = "ItemHL" ; oTR.picTD = oTD; break; case "1": oTD = oTR.insertCell(); oTD.style.width = 23; oTD.className = "ItemHL" ; oTR.checkTD = oTD; break; case "2": oTD = oTR.insertCell(); oTD.style.width = 23; oTD.className = "ItemHL" ; oTR.picTD = oTD; oTD = oTR.insertCell(); oTD.style.width = 23; oTD.className = "ItemHL" ; oTR.checkTD = oTD; break; } oTD = oTR.insertCell(); oTD.style.width = 10; oTD.className = "ItemHL" ; oTD.innerHTML = " " oTD = oTR.insertCell(); oTD.className = "ItemHL" ; oTR.textTD = oTD; oTD.noWrap = true; oTD = oTR.insertCell(); oTD.style.width = 22; oTD.className = "ItemHL" ; oTD.align = "center"; oHLDiv.iTable = oTable; oHLDiv.iTable.iTBody = oTBody; oPopup.document.body.appendChild(oHLDiv); oHLDiv.style.visibility="hidden"; oPopup.document.body.HLDiv = oHLDiv; } //鼠标移动高亮效果,把高亮层下面的内容取过来。 function highLight(oEle,oWin){ switch(oEle.HeadColumn){ case "0": oWin.document.body.HLDiv.iTable.cells[0].style.paddingLeft = "3px"; oWin.document.body.HLDiv.iTable.cells[2].style.paddingLeft = "5px"; break; case "1": oWin.document.body.HLDiv.iTable.cells[0].style.paddingLeft = "3px"; oWin.document.body.HLDiv.iTable.cells[2].style.paddingLeft = "5px"; break; case "2": oWin.document.body.HLDiv.iTable.cells[0].style.width=23; oWin.document.body.HLDiv.iTable.cells[1].style.width=25; oWin.document.body.HLDiv.iTable.cells[0].style.paddingLeft = "5px"; break; } for(i=0;i<oWin.document.body.HLDiv.iTable.cells.length;i++){ oWin.document.body.HLDiv.iTable.cells[i].innerHTML=oEle.cells[i].innerHTML; } oWin.document.body.HLDiv.style.visibility="visible"; oWin.document.body.HLDiv.style.top = oEle.offsetTop+1; oWin.document.body.HLDiv.style.width = oEle.offsetWidth - 2; oWin.document.body.HLDiv.attachEvent("onclick",function(){ if (oEle.Func=="") return; eval("window."+oEle.Func); hideMenu(window); }); } //当鼠标移动到没有下级子菜单项上的时候，关闭下级子菜单 function hideMenu(oWin){ try{ oWin.document.childWin.document.body.HLDiv.style.visibility="hidden"; oWin.document.childWin.hide(); } catch(e){ } } //建立基板以便插入菜单项 function createBasePanel(oWin,subWidth){ oDiv = oWin.document.createElement("<DIV>"); oDiv.className = "DivPanel"; oTable = oWin.document.createElement("<TABLE border=/"0/" cellspacing=/"0/" cellpadding=/"0/">"); oTable.className = "MenuPanel"; oDiv.appendChild(oTable); oTBody = oWin.document.createElement("TBODY"); oTable.appendChild(oTBody); oWin.document.DivPanel = oDiv; oDiv.TablePanel = oTable; return(oDiv); } //建立菜单的项的模板 function createItemTemp(oDiv,oWin,HeadColumn,subWidth){ oTable = oDiv.TablePanel oTR = oTable.insertRow(); switch(HeadColumn){ case "0"://只有图片列 oTD = oTR.insertCell(); oTD.style.width = 26; oTD.className = "PicColummFull" ; oTR.picTD = oTD; subWidth = subWidth - 26 break; case "1"://只有选择列 oTD = oTR.insertCell(); oTD.style.width = 26; oTD.className = "PicColummFull" ; oTR.checkTD = oTD; subWidth = subWidth - 26 break; case "2"://两者都有 oTD = oTR.insertCell(); oTD.className = "PicColummLeftHalf" ; oTR.checkTD = oTD; oTD = oTR.insertCell(); oTD.className = "PicColummRightHalf" ; oTR.picTD = oTD; subWidth = subWidth - 26*2 break; default://默认只有图片列 oTD = oTR.insertCell(); oTD.style.width = 26; oTD.className = "PicColummFull" ; oTR.picTD = oTD; subWidth = subWidth - 26 } oTD = oTR.insertCell(); oTD.style.width = 10; oTD.className = "ItemNormal" ; oTD.innerHTML = " " subWidth = subWidth - 10; oTD = oTR.insertCell(); oTD.className = "ItemNormal" ; oTD.style.width = subWidth*1 - 26; oTR.textTD = oTD; oTD.noWrap = true; oTD = oTR.insertCell(); oTD.style.width = 26; oTD.className = "ItemNormal" ; oTD.align = "center"; oTR.nextTD = oTD; oTD.style.paddingTop = "1px"; oTD.style.paddingLeft = "6px"; return(oTR); } //填充菜单项数据 function fillMenuItemData(oNode,oTR,oWin,HeadColumn){ oIMG = oNode.attributes.getNamedItem("img").text; oFunc = oNode.attributes.getNamedItem("Func").text; oText = oNode.attributes.getNamedItem("Text").text; blhasSub = oNode.attributes.getNamedItem("hasSub")?true:false; blSplitLine = oNode.attributes.getNamedItem("hasLine")?true:false; blChecked = oNode.attributes.getNamedItem("checked")?true:false; switch(HeadColumn){ case "0"://只有图片列 oTR.picTD.innerHTML = (oIMG!="")?"<img border=/"0/" src=/""+oIMG+"/" valign=/"absmiddle/" align=/"center/">":" " ; break; case "1"://只有选择列 oTR.checkTD.innerHTML = (blChecked)?"<img border=/"0/" src=/"MenuChecked.gif/" valign=/"absmiddle/" align=/"center/">":" " ; break; case "2"://两者都有 oTR.picTD.innerHTML = (oIMG!="")?"<img border=/"0/" src=/""+oIMG+"/" valign=/"absmiddle/" align=/"center/">":" " ; oTR.checkTD.innerHTML = (blChecked)?"<img border=/"0/" src=/"MenuChecked.gif/" valign=/"absmiddle/" align=/"center/">":" " ; break; default://默认只有图片列 oTR.picTD.innerHTML = (oIMG!="")?"<img border=/"0/" src=/""+oIMG+"/" valign=/"absmiddle/" align=/"center/">":" " ; } if(blhasSub){ oTR.nextTD.innerHTML = "<Img src=/"arrow.gif/" border=/"0/" valign=/"absmiddle/" width=/"16px/" height=/"16px/">"; oTR.attachEvent("onmouseover",function(){showMenu(oWin,oNode,oTR)}) } else{ oTR.nextTD.innerHTML = " "; oTR.attachEvent("onmouseover",function(){hideMenu(oWin)}) } if(blSplitLine){ oTR.nextTD.className = "ItemNormalLine"; oTR.textTD.className = "ItemNormalLine"; } else{ oTR.nextTD.className = "ItemNormal"; oTR.textTD.className = "ItemNormal"; } oTR.textTD.innerText = oText; oTR.HeadColumn = HeadColumn; oTR.attachEvent("onmouseover",function(){highLight(oTR,oWin)}) oTR.Func = oFunc; } function createMenuBar(){ BarData = element.dataSource.documentElement.selectSingleNode("//MenuItem"); oTable = window.document.createElement("TABLE"); oTable.className = "Menubar"; oTBody = window.document.createElement("TBODY"); oTable.appendChild(oTBody); oTR = oTable.insertRow(); oTD = oTR.insertCell(); oIMG = window.document.createElement("IMG") oIMG.src = "left.gif"; oIMG.valign = "absmiddle"; oTD.appendChild(oIMG); for(i=0;i<BarData.childNodes.length;i++){ oNode = BarData.childNodes.item(i); var oNewSPAN = window.document.createElement("SPAN"); oNewSPAN.className = "MenubarNormal"; oNewSPAN.NodeData = oNode; oNewSPAN.innerHTML = oNode.attributes.getNamedItem("Text").text; oNewSPAN.hasSub = (oNode.attributes.getNamedItem("hasSub"))?true:false; oNewSPAN.style.width = 90; oTD.appendChild(oNewSPAN); oNewSPAN.attachEvent("onmouseover",MenuOver); oNewSPAN.attachEvent("onmousedown",MenuMouseDown); } element.Menubar = oTable; return oTable; } function MenuOver(){ hideMenu(window) oEle = event.srcElement; oEles = oEle.parentElement.getElementsByTagName("SPAN"); for(i=0;i<oEles.length;i++){ oEles[i].className="MenubarNormal"; } if(element.Menubar.isDisplay==null||(element.Menubar.isDisplay!=null&&element.Menubar.isDisplay==false)){ oEle.className = "MenubarHLYellow"; } else{ oEle.className = "MenubarHLBlue"; if(!oEle.hasSub) return; showMenu(window,oEle.NodeData,oEle,getAbsLeft(oEle)+2,getAbsTop(oEle)+oEle.offsetHeight+1) } } function MenuMouseDown(){ oEle = event.srcElement; element.Menubar.isDisplay = element.Menubar.isDisplay?false:true; event.srcElement.className = (oEle.className=="MenubarHLYellow")?"MenubarHLBlue":"MenubarHLYellow"; if(element.Menubar.isDisplay&&oEle.hasSub) showMenu(window,oEle.NodeData,oEle,getAbsLeft(oEle)+2,getAbsTop(oEle)+oEle.offsetHeight+1); event.cancelBubble = true; } function getAbsLeft(e){ var l=e.offsetLeft; while(e=e.offsetParent){ l+=e.offsetLeft; } return l; } function getAbsTop(e){ var t=e.offsetTop; while(e=e.offsetParent){ t+=e.offsetTop; } return t; } </script> </PUBLIC:COMPONENT>
应大家要求,我找了个空间把源文件传上去了.
点击下载

标签

#编程 #function #border #stylesheet #filter