javascript读取xml实现应用程序菜单效果

/*样式*/

<style type="text/css">
    td{font-size:12px;}
    .item{text-decoration:none;width:100%;height:100%; line-height:22px;cursor:default;color:Black;vertical-align:middle}
    .staticTab{cursor:default;height:22px}
    .staticTD{width:70px;text-align:center; vertical-align:middle;white-space:nowrap}
    .dynamicTR{height:22px; vertical-align:middle}
    .dynamicTab{width:60px;cursor:default;background-color:#ccebff;position:absolute;z-index:1}
    .dynamicTDRight{text-align:right;font-size:9px;}
    .dynamicTDCenter{text-align:left;white-space:nowrap}
    </style>

/*--------------菜单应用到的js--------------------*/
var menuHTML="";
function createXMLHttpRequest(){xmlHttp=(window.ActiveXObject)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();}
function getMenuData(){//从后太获取头部的单据或审批人等的信息
    createXMLHttpRequest();
    xmlHttp.open("GET","Menu.ashx?id="+(new Date()).getTime(),true);
    xmlHttp.onreadystatechange=getMenu_onreadystatechange;//用函数名,不加括号.
    xmlHttp.send(null);
}
function getMenu_onreadystatechange(){//相应处理
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            var menuXML=xmlHttp.responseXML.getElementsByTagName("menu");//childNodes
            createStaticMenu(menuXML[0]);
        }else
            alert('服务器端发生错误!');
    }
}
function getId(number,fatherId){
    number+=1;
    if(number<10)
        return fatherId+"00"+number;
    else if(number>=10&number<100)
        return fatherId+"0"+number;
    else{
        alert("id范围不够了,请重新设置");
    }
}
function createStaticMenu(menu){//创建静态菜单
    var lis="";
    for(var i=0;i<menu.childNodes.length;i++){
        var node=menu.childNodes[i];
        var id=getId(i,"");
        lis+="<td class='staticTD' οnmοuseοver=/"static_onmouseover(this)/" id='"+id+"' οnclick=/"static_onclick(this)/" οnmοuseοut=/"static_onmouseout(this)/">"+node.attributes[0].value+"<//td>";
        var childNodesCount=node.childNodes.length;
        if(childNodesCount>0)
            createDynamicMenu(node,id);//创建旗下动态菜单
    }
    menuHTML += "<table cellpadding='0' cellspacing='0' class='staticTab' ><tr>" + lis + "</tr></table>";
    divMenu.innerHTML = menuHTML;
    //alert(menuHTML);
}
function getLeftSpace(){
   return "&nbsp;&nbsp;&nbsp;";
}
function getLeftSpaceIsHaveChild(){
    return "&nbsp;&nbsp;";
}
function createDynamicMenu(pNode,fatherId){//创建动态菜单,这里用到递归,以便遍历到叶节点
    var lis="";
    for(var i=0;i<pNode.childNodes.length;i++){
         var node=pNode.childNodes[i];
         var id=getId(i,fatherId);
         if(node.attributes.length==1){//是父节点
            var childNodesCount=node.childNodes.length;
            if(childNodesCount>0){
                lis += "<tr class='dynamicTR' id='" + id + "' οnmοuseοver=/"dynamic_onmouseover(this)/" οnmοuseοut=/"dynamic_onmouseout(this)/"><td class='dynamicTDCenter'>"+getLeftSpace()+ node.attributes[0].value + "</td><td class='dynamicTDRight'>"+getLeftSpaceIsHaveChild()+"▶</td></tr>";
                createDynamicMenu(node,id);
            }else
                lis += "<tr class='dynamicTR' id='" + id + "'  οnmοuseοver=/"dynamic_onmouseover(this)/" οnmοuseοut=/"dynamic_onmouseout(this)/"><td class='dynamicTDCenter' colspan='2'><a href='#' class='item'>" +getLeftSpace()+ node.attributes[0].value + getLeftSpace()+"</a></td></tr>";
         }else
            lis += "<tr class='dynamicTR' id='" + id + "' οnmοuseοver=/"dynamic_onmouseover(this)/" οnmοuseοut=/"dynamic_onmouseout(this)/"><td class='dynamicTDCenter' colspan='2'><a href='" + node.attributes[1].value + "' οnclick=/"item_onclick()/" target='mainfram' class='item'>" +getLeftSpace()+ node.attributes[0].value +getLeftSpace()+ "</a></td></tr>";
    }
    menuHTML+="<table cellpadding='0' cellspacing='0' class='dynamicTab' style='display:none' id='"+fatherId+"Child'>"+lis+"</table>";
}
function getTop(e){//获取元素的纵坐标 
    var offset=e.offsetTop;
    if(e.offsetParent!=null)
        offset+=getTop(e.offsetParent);
    return offset;
}
function getLeft(e){//获取元素的横坐标
    var offset=e.offsetLeft;
    if(e.offsetParent!=null)
        offset+=getLeft(e.offsetParent);
        return offset;
}
var xmlHttp=null;//存储XMLHttpRequest
var itemIdLine="";//存储显示的菜单节点id线,格式为:id,id,id,id
var childIdLine="";//存储显示的子节点集合的id线,格式:id,id,id,id(包括现实的项)
var isOnMenu=false;//存储是不是在菜单上
var isClickedRoot = false; //存储是不是单击了根节点,也就是静态项
function setBodyEvent() {
    var theIframe = document.getElementById('lmain');
    if (theIframe.readyState == "complete")
        theIframe.contentWindow.document.body.onclick = body_onclick;
}
function static_onmouseover(objLI){//静态项移进事件
    itemIdLine=objLI.id;
    if(isClickedRoot){//单击了静态节点
        if(childIdLine.length>0)
            staticCloseChild();
        var childs=document.getElementById(objLI.id+"Child");
        if(childs!=null){
            staticShowChild(objLI,childs);
            childIdLine=childs.id;
        }
    }else
        objLI.style.background="url(images/menuimages/df.gif) no-repeat";
    isOnMenu=true;
}

function static_onmouseout(objLI){//静态项移出事件
    objLI.style.background="url()";
    isOnMenu=false;
}
function staticShowChild(objLI,objShow){//静态项下显示子菜单
    var rLeft=getLeft(objLI);
    var rTop= getTop(objLI)+objLI.clientHeight;
    objShow.style.left=rLeft+"px";
    objShow.style.top=rTop+"px";
    objShow.style.display="block";
}
function staticCloseChild(){//静态项下关闭菜单
    var childNodes=childIdLine.split(',');
    for(var i=childNodes.length-1;i>-1;i--){
        document.getElementById(childNodes[i]).style.display="none";
    }
    childIdLine="";
}
function static_onclick(objLI){//静态项点击事件
    if(!isClickedRoot){
        var childs=document.getElementById(objLI.id+"Child");
        if(childs!=null){
            staticShowChild(objLI,childs);
            childIdLine=childs.id;
        }
        objLI.style.background="";
        isClickedRoot=true;
    }else{
        staticCloseChild();
        objLI.style.background="url(images/menuimages/df.gif) no-repeat";
        isClickedRoot=false;
    }
}
function item_onclick(){
    staticCloseChild();
    childIdLine="";
    itemIdLine="";
    isClickedRoot=false;
}
function body_onclick(){//文档点击事件
    if(!isOnMenu){//不再菜单上的单击事件且单击了i
        if(isClickedRoot){//单击了菜单
            if(childIdLine.length>0){
                staticCloseChild();
                childIdLine="";
            }
            itemIdLine="";
        }
        isClickedRoot=false;
    }
}

function dynamic_onmouseover(objLI) {//动态项节点移进事件
    objLI.style.backgroundColor="#e5f5fc";
    setItemIdLine(objLI.id);//设置节点id线
    setChildIdLine(objLI.id);//设置子节点集合id线
    var childs=document.getElementById(objLI.id+"Child");
    if(childs!=null){
        dynamicShowChild(objLI,childs);
        childIdLine+=","+childs.id;//显示子节点集合
    }
    isOnMenu=true;
}

function dynamic_onmouseout(objLI){//动态项节点移出事件
    objLI.style.backgroundColor="Transparent";
    isOnMenu=false;
}
function dynamicShowChild(objLI,objShow){//动态项下显示子菜单
    objShow.style.display="block";
    var rLeft=getLeft(objLI)+objLI.clientWidth;
    var rTop= getTop(objLI);
    var bodyWidth=document.body.clientWidth;
    var bodyHeight=document.body.clientHeight;
    var childsWidth=objShow.clientWidth;
    var childsHeight=objShow.clientHeight;
    if(rLeft+childsWidth>bodyWidth)
        rLeft=rLeft-objLI.clientWidth-childsWidth;
    if(rTop+childsHeight>bodyHeight)
        rTop=rTop-childsHeight;
    objShow.style.left=rLeft+"px";
    objShow.style.top=rTop+"px";
}
function setItemIdLine(itemId){//重构节点id线
    var aryItemLine=itemIdLine.split(',');
    itemIdLine="";
    for(var i=0;i<aryItemLine.length;i++){
        if(aryItemLine[i]<itemId.length)
            itemIdLine+=aryItemLine[i]+",";
    }
    itemIdLine+=itemId;
}
function setChildIdLine(itemId){//重构子节点集合的id线
    itemId=itemId.substring(0,itemId.length-3)+"Child";//构建了此节点所在的子节点集合的id
    var aryChildLine=childIdLine.split(',');
    childIdLine="";
    for(var i=0;i<aryChildLine.length;i++){
        if(aryChildLine[i].length>itemId.length)
            document.getElementById(aryChildLine[i]).style.display="none";
        else
            childIdLine+=aryChildLine[i]+",";
    }
    if(childIdLine.lastIndexOf(",")==childIdLine.length-1)
        childIdLine=childIdLine.substr(0,childIdLine.length-1);
}

//在做web开发时,以前用的菜单是微软的菜单控件,后来发现菜单项弹出其子项集合时比较慢。所以决定用js来做菜单,不用控件。做完之后反应也蛮快的。

后感:做之前要琢磨琢磨它的规律。这样就会发现节点线。鼠标从根节点到叶节点始终在两条线上。一条是节点从根到叶的线。另一条是节点集合依据级别关系产生的线。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值