基于xml数据源的js动态菜单

//

//基于xml数据源的js动态菜单

//作者:curllion

//欢迎访问我的博客:  http://blog.csdn.net/curllion

//

document.write("<style type=/"text/css/" >.menuitemH{float: left;} .menuitemV{float: none;}</style>");
function Menu(div,childNodes)
{
    var base = this;
    this.type = "script";//可以是a,script
    this.model = false;//是否为模态窗口中打开,如果是,将打开最大化窗口
    this.childNodes = childNodes;//xml数据源,nodeList
    this.length = this.childNodes.length;//一级子菜单的个数
    this.items = new Array();//子菜单
    this.menu = this;//当前控件的主菜单,为与子菜单保持一至
    this.backgroundColor = "buttonface";//背景色,不设背景色,设置z-index时会出错
    this.fontSize = "21px";
    this.fontColor = "menutext";
    this.overBackgroundColor = "activecaption";
    this.overFontSize = "21px";
    this.overFontColor = "captiontext";
    this.cursor = "hand";
    this.map =           //对于数据源的映射
    {
        root:     "menus",
        item:     "menu",
        itemid:   "menuid",
        text:     "text",
        href:     "href",
        target:   "target",
        tooltip:  "title"
    }
    this.Orientation = "Horizontal";//可以是Vertical,Horizontal
    this.childDiv = div;//存放一级子菜单的容器
    for(var i=0;i<this.length;i++)//递归添加子菜单
        this.items[i] = new MenuItem(base,base.childNodes.item(i));
}

//

//基于xml数据源的js动态菜单

//作者:curllion

//欢迎访问我的博客:  http://blog.csdn.net/curllion

//
//菜单子项
function MenuItem(parentItem,node)
{
    var base = this;
    this.visibility = "hiden";
    //数据结构
    this.items = new Array();//子菜单
    this.length = node.childNodes.length;
    this.menu = parentItem.menu;
    this.parentItem = parentItem;
    this.text = node.getAttribute(this.menu.map.text);
    this.href = node.getAttribute(this.menu.map.href);
    this.target = node.getAttribute(this.menu.map.target);
    this.tooltip = node.getAttribute(this.menu.map.tooltip);
    //用户UI
    this.div = document.createElement("div");
    parentItem.childDiv.appendChild(this.div);
    this.div.style.backgroundColor = this.menu.backgroundColor;
    this.div.style.fontSize = this.menu.fontSize;
    this.div.style.color = this.menu.fontColor;
    this.div.style.cursor = this.menu.cursor;
    this.div.style.paddingLeft = "10px";
    this.div.style.paddingRight = "10px";
    this.div.style.paddingTop = "5px";
    this.div.style.paddingBottom = "5px";
    if(this.menu == this.parentItem && this.menu.Orientation)
        this.div.className = "menuitemH" ;
    else
        this.div.className = "menuitemV" ;
    this.div.title = this.tooltip;
    //如果为超级链接
    if(this.menu.type == "a" && this.href != null && this.href != "")
        this.div.innerHTML = "<a style=/"text-decoration: none;background-color:" + this.menu.backgroundColor +
        ";font-size:" + this.menu.fontSize + ";color:" + this.menu.fontColor + ";/" href=/"" + this.href + "/" target=/"" +
        this.target + "/">" + this.text + "</a>";
    else//如果用window.open打开窗口
        this.div.innerText = this.text;
    this.childDiv = document.createElement("div");
    document.body.appendChild(this.childDiv);
    this.childDiv.style.backgroundColor = this.menu.backgroundColor;
    this.childDiv.style.visibility ="hidden";
    this.childDiv.style.position = "absolute";
    this.div.οnmοuseοver=function()
    {
        base.event.x = event.x;
        base.event.y = event.y;
        if(base.menu.type == "a" && base.href != null && base.href != "")
        {
            base.div.style.color = base.menu.overFontColor;
            base.div.style.backgroundColor = base.menu.overBackgroundColor;
            base.div.style.fontSize = base.menu.overFontSize;
            base.div.childNodes.item(0).style.color = base.menu.overFontColor;
            base.div.childNodes.item(0).style.backgroundColor = base.menu.overBackgroundColor;
            base.div.childNodes.item(0).style.fontSize = base.menu.overFontSize;
        }
        else
        {
            base.div.style.color = base.menu.overFontColor;
            base.div.style.backgroundColor = base.menu.overBackgroundColor;
            base.div.style.fontSize = base.menu.overFontSize;
        }
        base.showChilds();
        var e = base;
        while(e=e.parentItem)
        {
            window.clearTimeout(e.Thread);
        }
    };
    this.div.οnmοuseοut=function()
    {
        base.event.x = event.x;
        base.event.y = event.y;
        if(base.menu.type == "a" && base.href != null && base.href != "")
        {
            base.div.style.color = base.menu.fontColor;
            base.div.style.backgroundColor = base.menu.backgroundColor;
            base.div.style.fontSize = base.menu.fontSize;
            base.div.childNodes.item(0).style.color = base.menu.fontColor;
            base.div.childNodes.item(0).style.backgroundColor = base.menu.backgroundColor;
            base.div.childNodes.item(0).style.fontSize = base.menu.fontSize;           
        }
        else
        {
            base.div.style.color = base.menu.fontColor;
            base.div.style.backgroundColor = base.menu.backgroundColor;
            base.div.style.fontSize = base.menu.fontSize;
        }
        base.hide();
    };
    this.div.onclick = function()
    {
        base.event.x = event.x;
        base.event.y = event.y;
        if(base.menu.type != "a" && base.href != null && base.href != "")
        {
            if(base.menu.model)
            {
                window.showModelessDialog(base.href,window,"dialogLeft=0;dialogTop=0;dialogHeight=" + window.screen.availHeight + ";dialogWidth=" + window.screen.availWidth + ";status=yes,toolbar=no,menubar=no,location=no");
            }
            else
            {
                window.open(base.href,base.target,"left=0;top=0;heigh=" + window.screen.availHeight + ";width=" + window.screen.availWidth + ";status=yes,toolbar=no,menubar=no,location=no");
            }
        }
    };
    //递归添加子菜单
    for(var i=0;i<this.length;i++)
    {
        this.items[i] = new MenuItem(base,node.childNodes.item(i));
    }
}
MenuItem.prototype.showChilds=function()//显示下一级子菜单组
{
    if(this.length > 0)
    {
        var e = this.div.offsetParent;
        var y = e.offsetTop + this.div.offsetTop;
        var x = e.offsetLeft + this.div.offsetLeft;
        while (e = e.offsetParent){x += e.offsetTop; y += e.offsetLeft;}
        if(this.menu == this.parentItem && this.menu.Orientation=="Horizontal")
        {
            this.childDiv.style.left = x + "px";
            this.childDiv.style.top  = (y + this.div.offsetHeight) + "px";
        }
        else
        {
            this.childDiv.style.left = (x + this.div.offsetWidth) + "px";
            this.childDiv.style.top  = y + "px";
        }
        this.childDiv.style.visibility = "visible";
    }
    this.parentItem.childDiv.style.visibility = "visible";
    if(this.menu != this.parentItem)//如果不为一级子菜单,显示子菜单
        this.parentItem.showChilds();
}
MenuItem.prototype.hide=function()
{
    var d = this.parentItem.childDiv;
    var base = this;
    var t1 = function(){base.childDiv.style.visibility = "hidden";};
    base.Thread = window.setTimeout(t1,50);
    if(this.menu != this.parentItem)//如果不为一级子菜单
    {
        //如果不在当前子菜单组的范围之内
        if(base.event.x <= d.offsetLeft || base.event.x >= d.offsetLeft + d.offsetWidth || base.event.y <= d.offsetTop || base.event.y >= d.offsetTop + d.offsetHeight)
        {
            var t2 = function()
            {
                d.style.visibility = "hidden";
                d.style.visibility = "hidden";
            };
            base.parentItem.parentItem.Thread = window.setTimeout(t2,500);
        }
        else
        {
            window.clearTimeout(base.parentItem.Thread);
            d.style.visibility = "visible";
        }
        this.parentItem.hide();//将整个子菜单组隐藏
    }
}