热点排行

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

类别：网站制作 点击：0 评论：0 推荐：

菜单的效果见我的相册里面的作品截屏。
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"></textarea><XML ID="xmlData" SRC="MenuData.xml"></XML>
</body>

</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
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("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(LeftHalf.gif);
}
.PicColummRightHalf
{
 height:25px;
 width:26px;
 padding-left:5px;
 afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8EB3E7,endcolorstr=#88AEE4,gradientType=1);
 background-image:url(RightHalf.gif);
}

.PicColummFull
{
 padding-left:5px;
 height:25px;
 width:26px;
 afilter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#DDECFE,endcolorstr=#81A9E2,gradientType=1);
 background-image:url(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;
      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 = "";
        oDiv = createBasePanel(oChildWin);
        oChildWin.document.body.appendChild(oDiv);
        
        for(i=0;i<NodeData.childNodes.length;i++){
      oTR = createItemTemp(oDiv,oChildWin);
            aNode = NodeData.childNodes.item(i)
         fillMenuItemData(aNode,oTR,oChildWin);
        }
        createHLDiv(oChildWin);
        oCurrWin.document.body.preShowItem = oEle;
                }
               
               
                //如果当前将要显示的窗口已经显示，则隐藏该子窗口上的高亮区，并不再做显示菜单的动作
                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,1,1,oCurrWin.document.body);
    var width  = oChildWin.document.body.scrollWidth;
    var height = oChildWin.document.body.scrollHeight;
    oChildWin.show(XConer,YConer,width,height,oCurrWin.document.body);
    

        //使用淡入效果显示菜单
        fadeIn(oChildWin.document.DivPanel);
  
    //禁止系统右键菜单的弹出。
    try{
        event.returnValue = false;
       }
       catch(e){
       }
    }
   
    function createHLDiv(oPopup){
     //创建一个鼠标移动到菜单项的高亮效果层
                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();
             
              oTD = oTR.insertCell();
       oTD.style.width = 22;
       oTD.className = "ItemHL" ;
       oTR.checkTD = oTD;
      
       oTD = oTR.insertCell();
       oTD.style.width = 22;
       oTD.className = "ItemHL" ;
       oTR.picTD = oTD;
      
       oTD = oTR.insertCell();
       oTD.style.width = 10;
       oTD.className = "ItemHL" ;
       oTD.innerHTML = "&nbsp;"
           
             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";
       oTD.style.fontFamily = "Webdings";
              
        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){
            if(oEle.cells[0].style.display!="none"){
       oWin.document.body.HLDiv.iTable.cells[0].style.width=23;
       oWin.document.body.HLDiv.iTable.cells[1].style.width=24;
                oWin.document.body.HLDiv.iTable.cells[1].style.paddingLeft = "4px";
                if(oEle.cells[0].innerHTML==""){
                 oWin.document.body.HLDiv.iTable.cells[0].innerHTML="&nbsp;";
       }
                else{
                 oWin.document.body.HLDiv.iTable.cells[0].innerHTML=oEle.cells[0].innerHTML;
                }
   }
               
   oWin.document.body.HLDiv.iTable.cells[0].style.display = oEle.cells[0].style.display;
   oWin.document.body.HLDiv.iTable.cells[1].innerHTML=oEle.cells[1].innerHTML;
         oWin.document.body.HLDiv.iTable.cells[2].innerHTML=oEle.cells[2].innerHTML;
         oWin.document.body.HLDiv.iTable.cells[3].innerHTML=oEle.cells[3].innerHTML;
   oWin.document.body.HLDiv.iTable.cells[4].innerHTML=oEle.cells[4].innerHTML;

         oWin.document.body.HLDiv.style.visibility="visible";
       oWin.document.body.HLDiv.style.top = oEle.offsetTop+1;
       oChildWin.document.body.HLDiv.style.width = oEle.offsetWidth - 2;
      }
   
    //当鼠标移动到没有下级子菜单项上的时候，关闭下级子菜单
    function hideMenu(oWin){
         try{
             oWin.document.childWin.document.body.HLDiv.style.visibility="hidden";
       oWin.document.childWin.hide(); 
      }
      catch(e){
      }
    }
     
   
   //建立基板以便插入菜单项
    function createBasePanel(oWin){
         oDiv = oWin.document.createElement("<DIV>");
         oDiv.className = "DivPanel";
         oDiv.width = element.Width;
         oTable = oWin.document.createElement("<TABLE  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
         oTable.className = "MenuPanel";
         oDiv.appendChild(oTable);
         oWin.document.DivPanel = oDiv;
         oDiv.TablePanel = oTable;
            return(oDiv);
    }
   
    //建立菜单的项的模板
    function createItemTemp(oDiv,oWin){
      oTable = oDiv.TablePanel
      oTR = oTable.insertRow();
      oTD = oTR.insertCell();
      oTD.style.width = 25;
      oTD.className = "PicColummLeftHalf" ;
      oTR.checkTD = oTD;
      
      oTD = oTR.insertCell();
      oTD.style.width = 25;
      oTD.className = "PicColummRightHalf" ;
      oTR.picTD = oTD;
      
      oTD = oTR.insertCell();
      oTD.style.width = 10;
      oTD.className = "ItemNormal" ;
      oTD.innerHTML = "&nbsp;"
           
            oTD = oTR.insertCell();
      oTD.className = "ItemNormal" ;
      oTR.textTD = oTD;
      oTD.noWrap = true;
           
            oTD = oTR.insertCell();
      oTD.style.width = 25;
      oTD.className = "ItemNormal" ;
      oTD.align = "center";
      oTD.style.fontFamily = "Webdings";
      oTR.nextTD = oTD;
      return(oTR);
    }
   

   
    //填充菜单项数据
    function fillMenuItemData(oNode,oTR,oWin){
      oIMG          = oNode.attributes.getNamedItem("img").text;
      oFunc         = oNode.attributes.getNamedItem("Func").text;
   oText         = oNode.attributes.getNamedItem("Text").text;
   iType         = oNode.attributes.getNamedItem("iType").text;
   blIsChecked   = oNode.attributes.getNamedItem("IsChecked").text;
   blhasSub   = oNode.attributes.getNamedItem("hasSub").text;
   blSplitLine   = oNode.attributes.getNamedItem("SplitLine").text;
   iwidth        = oNode.attributes.getNamedItem("width").text;
           
           
   if(iType=="1"){
    oTR.checkTD.style.display = "none";
    oTR.picTD.className       = "PicColummFull";
    oTR.picTD.innerHTML       = "&nbsp;";
    oTR.checkTD.innerHTML     = "&nbsp;";
   }
   else{
    oTR.checkTD.style.display = "";
    oTR.checkTD.className     = "PicColummLeftHalf";
    oTR.picTD.className       = "PicColummRightHalf";
    oTR.picTD.innerHTML       = "&nbsp;";
    oTR.checkTD.innerHTML     = "&nbsp;";
   }
   
   if(blhasSub=="1"){
    oTR.nextTD.innerHTML = "4"; 
    oTR.attachEvent("onmouseover",function(){showMenu(oWin,oNode,oTR)})
   }
   else{
    oTR.nextTD.innerHTML = "&nbsp;&nbsp;";
    oTR.attachEvent("onmouseover",function(){hideMenu(oWin)})
   }
     
   if(blSplitLine=="1"){
    oTR.nextTD.className = "ItemNormalLine";
    oTR.textTD.className = "ItemNormalLine";
    oTR.blSplitLine = "1"
   }
   else{
    oTR.nextTD.className = "ItemNormal";
    oTR.textTD.className = "ItemNormal";
    oTR.blSplitLine = "0"   
   }
   
   if(oIMG!=""){
       strimg = "<img border=\"0\" src=\""+oIMG+"\"  valign=\"absmiddle\" align=\"center\" style=\"filter:progid:DXImageTransform.Microsoft.Shadow(enabled=true,color=#99CCFF,direction=135,strength=0);\">"
    oTR.picTD.innerHTML = strimg ;
   }
   oTR.textTD.innerText = oText;
   oTR.textTD.width = iwidth;
   oTR.attachEvent("onmouseover",function(){highLight(oTR,oWin)})      
    }
   
    function createMenuBar(){
      BarData = element.dataSource.documentElement;
      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").text;
       oNewSPAN.style.width = oNode.attributes.getNamedItem("width").text;
       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!="1") 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=="1") 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>

本文地址：http://com.8s8s.com/it/it31154.htm

Copyright © 2004-2013 信息技术中文网 All rights reserved 版权所有

Powered by 信息技术中文网 Ver2.0