你的位置:首页 > ASP.net教程

[ASP.net教程]Div Vertical Menu ver5


这个小功能,如果是算此次,已经是第5次修改了。
可以从这里看到前4次:
V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html

V2, http://www.cnblogs.com/insus/archive/2011/10/18/2216157.html

V3, http://www.cnblogs.com/insus/archive/2011/10/19/2217314.html

V4, http://www.cnblogs.com/insus/p/3205293.html


为什么会有第5次修改呢?原因是随菜单多少时,我们需要改好javascript代码。为添加div的Id和image的Id至阵列中去。

因此Insus.NET想到,使用class的样式,加上使用jQuery来实现:

css样式代码,添加一个class:

 

 .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;    }    .overStyle {      background-color: #faf0e6;    }

Source Code

 

在html代码中,你应为div和img标签添加class,或理把其ID改为class也行,在此Insus.NET选择后者:

 

 <div style="background-color: #FFFFFF; height: 3px;">  </div>  <div class="div_menu">    <img class="imgStyle" /><a href='<%= ResolveUrl("~/Default1.aspx") %>'>Hyperlink1</a>  </div>  <div class="div_menu">    <img class="imgStyle" /><a href='<%= ResolveUrl("~/Default2.aspx") %>'>Hyperlink2</a>  </div>  <div class="div_menu">    <img class="imgStyle" /><a href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>  </div>  <div class="div_menu">    <img class="imgStyle" /><a href='<%= ResolveUrl("~/Default4.aspx") %>'>Hyperlink4</a>  </div>  <div class="div_menu">    <img class="imgStyle" /><a href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>  </div>

Source Code

 

引jQuery库:

 <script src="~/Scripts/jquery-2.2.1.js" type="text/javascript"></script>


这样,我们可以把javascript修改为通用的代码:

 

 $(function () {      $(".div_menu").mouseover(function () {        $(this).addClass('overStyle');      }).mouseout(function () {        $(this).removeClass('overStyle');      });      $(".imgStyle").attr('src', '/Content/imgs/link.gif').attr('align', 'absmiddle');    });

Source Code

 

经过这样重构与修改后,我们日后有菜单项的添加与减少,我们不必再去修改js代码。