Div Vertical Menu ver3

看这篇之前，首先看这篇http://www.cnblogs.com/insus/archive/2011/10/18/2216157.html最后的结果，你会发现html的代码会有很多重复的，也许以后的菜单随之增多，网页的大小也会随之增大，这也许不是问题，问题是图片更改或是样式有变更，涉及的div都要随之变更。

因此，Insus.NET再次重构它。让它在以后的维护更好管理。下面视频为重构过程：

文件格式：.wmv；大小11,750KB；长度：00:09:15。

下载地址：http://download.cnblogs.com/insus/ASPDOTNET/Div_Vartical_Menu_Refactoring.rar

 

样式code，添加了一个imgstyle，是为了简化hmtl的img前后空格( )，其没有改变，为了方便你拷贝与粘贴无需要两篇之后切换来回，Insus.NET也照搬过来： 

View Code

 .div_menu
        {
            margin-top:  2px;
            margin-bottom:  2px;
            padding:  5px;
            padding-left:  20px;
            background-color:  #dcdcdc;
            height:  16px;
        }

        .imgStyle
        {
            margin-left:  5px;
            margin-right:  5px;
        }

 

Javascript code中，删除函数(function) InsusOver(id)和InsusOut(id)，并改写如下javascript 代码，这样可以简化html的内容，当菜单增多或减少时，只是修改javascript内的array元素，作相应的增多或减少。另外图片的src与align在每个菜单中也相同，因此也抽取放在javascript中实现。

View Code

 window.onload =  function () {
             var divs =  new Array("div1", "div2", "div3", "div4", "div5");
             for ( var o  in divs) {
                 var divTag = document.getElementById(divs[o]);
                divTag.className = "div_menu";

                divTag.onmousemove =  function () {
                     this.style.backgroundColor = "#faf0e6";
                };

                divTag.onmouseout =  function () {
                     this.style.backgroundColor = "#dcdcdc";
                };
            };

             var pics =  new Array("img1", "img2", "img3", "img4", "img5");
             for ( var o  in pics) {
                 var pic = document.getElementById(pics[o]);
                pic.src = '<%= ResolveUrl("~/link.gif")%>';
                pic.align = "absmiddle";
                pic.className = "imgStyle";
            };
        };

 

 接下来，是简化后的html代码：

View Code

  < div  style ="background-color: #FFFFFF; height: 3px;" >
     </ div >
     < div  id ="div1" >
         < img  id ="img1"   />
         < a  href ='<%=  ResolveUrl("~/Default1.aspx") % >'>Hyperlink1 </ a >
     </ div >
     < div  id ="div2" >
         < img  id ="img2"   />
         < a  href ='<%=  ResolveUrl("~/Default2.aspx") % >'>Hyperlink2 </ a >
     </ div >
     < div  id ="div3" >
         < img  id ="img3"   />< a  href ='<%=  ResolveUrl("~/Default3.aspx") % >'>Hyperlink3 </ a >
     </ div >
     < div  id ="div4" >
         < img  id ="img4"   />
         < a  href ='<%=  ResolveUrl("~/Default4.aspx") % >'>Hyperlink4 </ a >
     </ div >
     < div  id ="div5" >
         < img  id ="img5"   />< a  href ='<%=  ResolveUrl("~/Default5.aspx") % >'>Hyperlink5 </ a >
     </ div >