学习别人提高自己

自已写的动态二层web菜单

一、数据库为:menu(menuId<pk>、menuName、parentMenuId、pageUrl、remark);
二、左侧菜单:
    1、leftmenu.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.ascx.cs"     Inherits="LeftMenu" %>
<link href="css/leftmenu.css" type="text/css" rel="stylesheet" />
<script src="js/leftmenu.js" type="text/javascript"></script>
<div id="divContain" runat="server" style="width:100px; vertical-align:top; display:block;">
</div>
    2、leftmenu.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Common;
using BL;
using System.Text;

public partial class LeftMenu : System.Web.UI.UserControl
{
    private string _target="_top";//导航栏的目标
    public string Target
    {
        get { return _target; }
        set { _target = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder menuString = new StringBuilder();
        MenuBL menuBl = new MenuBL();
        //获取根结点，即父结点为0的结点
        List<MenuEntity> menus = menuBl.QueryMenu(0);
        //动态加载父菜单
        foreach (MenuEntity menu in menus)
        {
            menuString.Append("<div id='menu");
            menuString.Append(menu.MenuId);
            menuString.Append("' class='parentMenu' onmouseover='parentMenuOver(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")' onmouseout='parentMenuOut(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")' onClick='parentMenuClick(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")'>");
            menuString.Append(menu.MenuName);
            menuString.Append("</div>");

            //加载子菜单
            List<MenuEntity> sonMenus = menuBl.QueryMenu(menu.MenuId);
            if (sonMenus.Count > 0)
            {
                menuString.Append("<div id='sonmenu" + menu.MenuId + "' class='sonMenu'>");
                menuString.Append("<ul>");
                foreach (MenuEntity sonMenu in sonMenus)
                {
                    menuString.Append("<li id='li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("' onmouseover='liOver(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append(")' onmouseout='liOut(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append(")' onclick=\"liClick('");
                    menuString.Append(sonMenu.PageUrl);
                    menuString.Append("','");
                    menuString.Append(Target);
                    menuString.Append("')\">");
                    //menuString.Append("<a href='");
                    //menuString.Append(sonMenu.PageUrl);
                    //menuString.Append("' id='");
                    //menuString.Append(sonMenu.MenuId);
                    //menuString.Append("' target='");
                    //menuString.Append(Target);
                    //menuString.Append("'>");
                    menuString.Append(sonMenu.MenuName);
                    //menuString.Append("</a>");
                    menuString.Append("</li>");

                }
                menuString.Append("</ul></div>");
            }
        }

        this.divContain.InnerHtml = menuString.ToString();
    }
}
    3、leftmenu.css

.parentMenu
{
background-color:#CCCCCC;
cursor:hand;
width:100px;
}
.parentMenuOver
{
background-color:#999999;
cursor:hand;
}
.parentMenuOut
{
background-color:#CCCCCC;
cursor:hand;
}
.sonMenu
{
background-color:#CCCCCC;
display:none;
}
.sonMenuSel
{
background-color:#999999;
}
.view
{
display:block;
}
.hidden
{
display:none;
}
ul
{
margin:0px 0px 0px 0px;
}
li
{
list-style-type:none;
width:100px;
cursor:hand;
}
div
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.liOver
{
background-color:#E8E8E8;
}
.liOut
{
background-color:#F7F7F7;
}
a
{
width:100px;
}

4、leftmenu.js

//当点击父菜单时调用的函数
function parentMenuClick(menuId)
{
    if(document.getElementById("son"+menuId.id).className=="view")
    {
     document.getElementById("son"+menuId.id).className="hidden";
}
else
{
     document.getElementById("son"+menuId.id).className="view";
}
}
//移动到父菜单时调用
function parentMenuOver(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOver";
}
//移出父菜单时调用
function parentMenuOut(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOut";
}
////移动到子菜单时调用
//function sonMenuOver(sonMenuId)
//{
//    document.getElementById(sonMenuId.id).className="view";
//}
////移出子菜单时调用
//function sonMenuOut(sonMenuId)
//{
//    document.getElementById(sonMenuId.id).className="hidden";
//}

//移动到子菜单项时调用
function liOver(liId)
{
    document.getElementById(liId.id).className="liOver";
}
//移出子菜单项时调用
function liOut(liId)
{
    document.getElementById(liId.id).className="liOut";
}
//点击子菜单时调用
function liClick(pageUrl,target)
{
    target.location.href=pageUrl;
}

三、顶部菜单
    1、topmenu.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TopMenu.ascx.cs" Inherits="TopMenu" %>
<link href="css/topmenu.css" type="text/css" rel="stylesheet" />
<script src="js/topmenu.js" type="text/javascript"></script>
<div id="divContain_top" runat="server" style="width:100px; vertical-align:top; display:block;">
</div>
    2、topmenu.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections.Generic;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Common;
using BL;
using System.Text;

public partial class TopMenu : System.Web.UI.UserControl
{
    private string _target = "_top";//导航栏的目标
    public string Target
    {
        get { return _target; }
        set { _target = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder menuString = new StringBuilder();
        StringBuilder jsArray = new StringBuilder();
        jsArray.Append("<script type='text/javascript'>");
        jsArray.Append("var parentArray=new Array();");
        MenuBL menuBl = new MenuBL();
        //获取根结点，即父结点为0的结点
        List<MenuEntity> menus = menuBl.QueryMenu(0);
        menuString.Append("<table id='menu'><tr>");
        //动态加载父菜单
        int count = 0;
        foreach (MenuEntity menu in menus)
        {

            menuString.Append("<td id='menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top' class='parentMenu_top' onmouseover='parentMenuOver_top(menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top)' onmouseout='parentMenuOut_top(menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top)'>");
            menuString.Append(menu.MenuName);
            menuString.Append("</td>");

            jsArray.Append("parentArray[");
            jsArray.Append(count);
            jsArray.Append("]='sonmenu");
            jsArray.Append(menu.MenuId);
            jsArray.Append("_top';");

            count++;
        }
        menuString.Append("</tr></table>");

        //加载子菜单
        foreach (MenuEntity menu in menus)
        {
            List<MenuEntity> sonMenus = menuBl.QueryMenu(menu.MenuId);
            if (sonMenus.Count > 0)
            {
                menuString.Append("<div id='sonmenu" + menu.MenuId + "_top' class='sonMenu_top'");
                menuString.Append("style=' z-index:1;position:absolute;'");
                menuString.Append(">");
                menuString.Append("<ul>");
                foreach (MenuEntity sonMenu in sonMenus)
                {
                    menuString.Append("<li id='li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top' class='li_top' onmouseover='liOver_top(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top)' onmouseout='liOut_top(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top)' onclick=\"liClick_top('");
                    menuString.Append(sonMenu.PageUrl);
                    menuString.Append("','");
                    menuString.Append(Target);
                    menuString.Append("')\">");
                    menuString.Append(sonMenu.MenuName);
                    menuString.Append("</li>");

                }
                menuString.Append("</ul></div>");
            }
        }
        jsArray.Append("</script>");

        menuString.Append(jsArray.ToString());
        this.divContain_top.InnerHtml = menuString.ToString();
    }
}

    3、css
    .parentMenu_top
{
background-color:#CCCCCC;
cursor:hand;
width:100px;
}
.parentMenuOver_top
{
    background-color:#999999;
    cursor:hand;
}
.parentMenuOut_top
{
background-color:#CCCCCC;
}
.sonMenu_top
{
display:none;
}
.li_top
{
background-color:#E8E8E8;
}
.sonMenuSel_top
{
background-color:#999999;
}
.view_top
{
   display:inline-block;
}
.hidden_top
{
display:none;
}
.liOver_top
{
background-color:#E8E8E8;
}
.liOut_top
{
background-color:#F7F7F7;
}
li
{
height:20px;
width:100px;
}
    4、topmenu.js

//当点击父菜单时调用的函数
function parentMenuClick_top(menuId)
{
     var len=parentArray.length;
    for( i=0;i<len;i++)
    {
        document.getElementById(parentArray[i]).className="hidden_top";
    }
    document.getElementById("son"+menuId.id).className="view_top";
}
//移动到父菜单时调用
function parentMenuOver_top(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOver";
    parentMenuClick_top(menuId);
}
//移出父菜单时调用
function parentMenuOut_top(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOut";
}

//移动到子菜单项时调用
function liOver_top(liId)
{
    document.getElementById(liId.id).className="liOver";

}
//移出子菜单项时调用
function liOut_top(liId)
{
    document.getElementById(liId.id).className="liOut";
}
//点击子菜单时调用
function liClick_top(pageUrl,target)
{
    if(target!="_top"&&target!="_self"&&target!="_parent"&&target!="_blank")
    {
        eval(target).location.href=pageUrl;
    }
}
//控件的加载事件,用于子菜单的位置
function load()
{
    var len=parentArray.length;
    for( i=0;i<len;i++)
    {
        var left=0;
        var top=0;
        //获取父菜单的位置
        var obj=document.getElementById(parentArray[i].substring(3,parentArray[i].length));
        left+=obj.offsetLeft;
        top+=obj.offsetTop;
        while(obj = obj.offsetParent){
             left += obj.offsetLeft;
             top +=obj.offsetTop;
        }
        document.getElementById(parentArray[i]).style.left=left;
        document.getElementById(parentArray[i]).style.top=top+20;
    }
}
//自动加载
window.onload=load;

posted @ 2007-12-10 00:39 拐子阅读(83) | 评论 (0) | 编辑