抠出淘宝的菜单树

function AddMenu(selfMenuID,selfMenuText,selfMenusrc,parentMenuID,srcTarget)
{
        // 考虑将来扩展到frame任意定位菜单，需要指定document和document.body
        var menuDoc=document;
        var menuBody=document.body;
        
        var menuPad=$("#menuPad",menuBody);
        if(menuPad.length==0)
        {
                MakeMenu();
                menuPad=$("#menuPad",menuBody);
        }

        var strInnerMenu; // 拼接菜单的html串
        var parentMenu=$("\"#menu_"+parentMenuID+"\"",menuBody);
        if(parentMenu.length==0)  // 一级菜单
        {
                strInnerMenu="<div class='menu-box' id='menu_"+selfMenuID+"'><h3 class='coolMenu-bar'><span>"+selfMenuText+"</span><button class='menu-close'>-</button></h3></div>";
                menuPad.append(strInnerMenu);
        }
        else if(parentMenu.attr("class")=="menu-box")  // 二级菜单
        {
                strInnerMenu="<li id='menu_"+selfMenuID+"'><span><a href='"+selfMenusrc+"' target='"+srcTarget+"'>"+selfMenuText+"</a></span></li>";
                var S_ul=$("\"#ul_"+parentMenuID+"\"",menuBody);
                if(S_ul.length==0)
                {
                        S_ul=$("<ul class='group' id='ul_"+parentMenuID+"'></ul>");
                        parentMenu.append(S_ul);        
                }
                S_ul.append(strInnerMenu);
        }
        else  // 三级以下菜单
        {
                strInnerMenu="<li id='menu_"+selfMenuID+"'><a href='"+selfMenusrc+"' target='"+srcTarget+"'>"+selfMenuText+"</a></li>";
                var T_ul=$("\"#ul_"+parentMenuID+"\"",menuBody);
                if(T_ul.length==0)
                {
                        T_ul=$("<ul id='ul_"+parentMenuID+"'></ul>");
                        parentMenu.append(T_ul);        
                        parentMenu.addClass("fold-open");
                        parentMenu.find("span:first").attr("id","T_span");
                }
                T_ul.append(strInnerMenu);
        }       

}

AddMenu是真正的核心方法，通过它将一级级的菜单加入到树中，并应用对应的css。个参数含义：

selfMenuID:当前菜单编号,

selfMenuText:当前菜单名称,

selfMenusrc:当前菜单url,

parentMenuID:父菜单编号,

srcTarget:地址跳转类型，空白页_blank或frame名称。

实现思路就是：如果当前菜单的父菜单不存在，就是一级菜单；如果父菜单存在并且css类时menu-box，则当前是二级菜单，否则是三级菜单。

正因为这样的实现思路，要求只能有三级菜单，否则三级后面的就平级了。

function BindEclipseFun()
{

        $("span[id='T_span']").toggle(
                function() 
                {
                    $(this).parents("li").removeClass("fold-open").addClass("fold-close");
                },
            function() 
            {
                $(this).parents("li").removeClass("fold-close").addClass("fold-open");
            }
        );

    $("h3[class='coolMenu-bar']").toggle(
        function() 
            {   
                $(this).next("ul:first").addClass("hidden");
                $(this).find("button").removeClass("menu-close").addClass("menu-open");
            },
            function() 
            {
                $(this).next("ul:first").removeClass("hidden");
                $(this).find("button").removeClass("menu-open").addClass("menu-close");
        }
    );  

}

BindEclipseFun方法是给生成的菜单增加样式和事件的，在单击父级菜单时切换折叠和展开效果都是通过css样式的切换实现的。

5、使用小例

在页面的初始化脚本中加入以下代码，就能生成一个淘宝样式的菜单树

$(function() {
                AddMenu('1','系统管理','','0','_blank');
                AddMenu('2','常用操作','','0','_blank');
                AddMenu('3','网上支付','','0','_blank');
                AddMenu('4','用户管理','user.aspx','1','_blank');
                AddMenu('5','部门管理','dept.aspx','1','_blank');
                AddMenu('6','省级用户','supuser.aspx','4','_blank');
                AddMenu('7','地级用户','comuser.aspx','4','_blank');
                AddMenu('8','账户查询','payCheck.aspx','2','_blank');       
                                AddMenu('9','银联支付','unipay.aspx','3','_blank');
                                AddMenu('9','主账户查询','master.aspx','8','_blank');
                                AddMenu('10','子账户查询','sub.aspx','8','_blank');
                BindEclipseFun();
            });