zoukankan      html  css  js  c++  java
  • Div Vertical Menu ver2

    参考前一篇http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html,是将一个table格式的Vertical菜单,改为Div Vertical 菜单。

    今天发现它有一些问题,就是div 的ID会有重复的error,另外onmouseover和onmouseout事件可以重构,简化代码。

    故产生这修正篇。

    css样式中,需要把ID选择器改为类选择器,"#div_menu"已经改为".div_menu":

    Div Menu Style
    <style>   
        .div_menu
        
    {
            margin-top
    : 2px;
            margin-bottom
    : 2px;
            padding
    : 5px;
            padding-left
    : 20px;
            background-color
    : #dcdcdc;
            height
    : 16px;
        
    }  
    </style>

    为了重构onmouseover和onmouseout事件,因此Insus.NET写了段Javascript:

    View Code
    <script language="javascript">
        function InsusOver(id) {
            id.style.backgroundColor = '#faf0e6';        
        }

        function InsusOut(id) {
            id.style.backgroundColor = '#dcdcdc';
        }
    </script>

    下面是Div vertical 菜单Html代码,与第一篇比较,语法变化部分(red highlight)

    View Code
    id="div?class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">

    完整代码:

    Div Vertical Menu html
    <div style="background-color: #FFFFFF; height: 3px;">
    </div>
    <div id="div1" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default1.aspx") %>'>
            Hyperlink1</a>
    </div>
    <div id="div2" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default2.aspx") %>'>
            Hyperlink2</a>
    </div>
    <div id="div3" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<a
            
    href='<%= ResolveUrl("~/Default3.aspx") %>'>Hyperlink3</a>
    </div>
    <div id="div4" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;
        <href='<%= ResolveUrl("~/Default4.aspx") %>'>
            Hyperlink4</a>
    </div>
    <div id="div5" class="div_menu" onmouseover="InsusOver(this)" onmouseout="InsusOut(this)">
        &nbsp;&nbsp;<img src='<%= ResolveUrl("~/link.gif")%>' align="absmiddle" />&nbsp;&nbsp;<a
            
    href='<%= ResolveUrl("~/Default5.aspx") %>'>Hyperlink5</a>
    </div>
  • 相关阅读:
    创建你自己的依赖注入容器Ioc Container(转) dodo
    LINQ to XML 介绍(转) dodo
    使用jquery修复ie6/7不支持focus的bug dodo
    ASP.NET MVC 2强类型HTML辅助方法 dodo
    Ioc容器Autofac介绍 dodo
    serverU上传中文文件乱码 dodo
    LINQ语法二 dodo
    DIV+CSS解决IE6,IE7,IE8,FF兼容问题 dodo
    依赖注入容器Autofac与MVC集成 dodo
    mvc VIEW部分介绍 dodo
  • 原文地址:https://www.cnblogs.com/insus/p/2216157.html
Copyright © 2011-2022 走看看