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也照搬过来： 

 .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中实现。

 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代码：

 <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>