javascript读取xml实现应用程序菜单效果_张国富的博客-程序员宅基地

技术标签: null  xml  xmlhttprequest  function  class  javascript  

/*样式*/

<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来做菜单,不用控件。做完之后反应也蛮快的。

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhangguofu2/article/details/5164757

智能推荐

AIX操作系统卷组故障维护_weixin_34051201的博客-程序员宅基地

故障描述:4.20日早晨,发现日报没有正常发送,登录数据库备机查看原因,查看系统的log命令:errpt |more没有发现什么异常,不过发现有如下错误:F3931284 0410055009 I H ent2 ETHERNET NETWORK RECOVERY MODEF3931284 0410055009 I H...

程序设计思维与实践 Week4 作业 (3/4/数据班)_明天可以有猫吗的博客-程序员宅基地

A - DDL 的恐惧题目ZJM 有 n 个作业,每个作业都有自己的 DDL,如果 ZJM 没有在 DDL 前做完这个作业,那么老师会扣掉这个作业的全部平时分。所以 ZJM 想知道如何安排做作业的顺序,才能尽可能少扣一点分。请你帮帮他吧!Input输入包含T个测试用例。输入的第一行是单个整数T,为测试用例的数量。每个测试用例以一个正整数N开头(1&lt;=N&lt;=1000),表示...

泵体inventor制作教程_水泵体Inventor创建实例教程.ppt_平骧的博客-程序员宅基地

水泵体Inventor创建实例教程课件隐藏多余线条 右击多余线条,单击取消可见 同理,隐藏其他多余线条 调整轮廓线显示方式 在弹出窗口选择“可见窄的” 选择该轮廓线 利用基础视图命令投出俯视图 保留底盘,隐藏其他线条,完成向视图A 同理完成向视图B 进入尺寸标注面板 在弹出窗口选择“工程图标注面板” 为各视图添加中心线 利用中心标记下的中心线命令添加中心线 完成各视图中心线的添加 利用通用尺寸工具...

String、StringBuffer与StringBuilder区别_aa1215018028的博客-程序员宅基地

工作中很多时候都会用到String,封装类的时候为了方便省劲也是能用String就不用其他的(不建议这样做),关于字符串的操作有String,StringBuffer,StringBuilder三种形式,今天整理一下梳理一下记忆。1 String、StringBuffer与StringBuilder区别(1)区别String内容不可变,StringBuffer和StringBuilder内容可变;...

uniapp 点击显示全屏视频_二梦媛的博客-程序员宅基地_uniapp video 点击放大

官网html&lt;video v-show="popup_show" id="popup_video" :src="视频路径" object-fit="fill" :show-center-play-btn="false" :controls="true" @fullscreenchange="fullscreenchange"&gt;&lt;/video&gt;js// 点击显示全屏this.videoContext = uni.createVideoContext('popup_video

顶部栏样式1:左侧对齐,右侧贴边,同时缩放出现不换行_yanwuhc的博客-程序员宅基地

最近做项目遇到一个小问题,需要做以下顶部栏需求:这里利用flex布局实现上面的需求。整体思路:最上方logo和中间的板块看成一个整体,设置display为flex,称为板块1。右边的板块称为板块2。板块1与板块2设置flex,同时两端对齐。html代码:&lt;div class="top"&gt; &lt;div class="quick"&gt; // logo跟middle整体构成板块1 &lt;div class="logo"&gt;

随便推点

ubuntu设置始终亮屏_ubuntu开机自动设置屏幕亮度_weixin_39966376的博客-程序员宅基地

安装了Ubuntu12.04 后,发现每次开机屏幕都是最大亮度,每次都要设置亮度很是麻烦,于是在网上搜索解决办法,可是能找到的办法都试过,还是不能解决问题。通过自己的摸索,终于能开机自动设置亮度了。以下将解决方法简单描述,给存在同样问题的Ubuntu用户参考。 :)Ubuntu 12.04 开机自动设置亮度的方法:1. 打开软件中心,安装laptop-mode包,或者sudo apt-get in...

RAID_阿瓦隆*勒*菲的博客-程序员宅基地

什么是RAID磁盘阵列RAID简述RAID 0 (条带化存储)RAID 1 (镜像存储)RAID 5 磁盘阵列RAID 6 磁盘阵列RAID 1+0 磁盘阵列RAID简述RAID是Redundant Array of Independent Disks的缩写, 中文简称为独立冗余磁盘阵列。RAID就是把多块独立的物理硬盘按不同的方式组合起来形成一个硬盘组(逻辑硬盘),从而提供比单个硬盘更高的存储性能和提供数据备份技术。磁盘阵列因组成方式的不同,可以把RAID分为不同的级别(RAID Levels)

VMware vsphere中的名词关系_weixin_33860737的博客-程序员宅基地

vSphere,ESXi,vCenter之间的关系VMware vSphere集成容器(VIC)建立了一个在轻量级虚拟机内部署并管理容器的环境。全新的虚拟机环境提供了更高级别的硬件隔离度,灵活性以及可扩展性使得容器对开发人员以及企业应用具有如此大的吸引力。VMware vSphere 是业界领先且最可靠的虚拟化平台。vSphere中的核心组件为VMwa...

STL set 应用 HDU2096 产生冠军_生于忧患,死于安乐2017的博客-程序员宅基地

产生冠军Time Limit: 1000/1000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 25048Accepted Submission(s): 11194Problem Description有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最...

关于Android的一些设计_le4的博客-程序员宅基地

谈到应用程序设计,对设计师来说,Android就像是房间里的大象。很多设计师会更希望这是iOS,在那里所有任何人都只需要关心iPhone手机,iPad和App Store。然后没有人可以忽略Android,它目前已占据智能手机中最大的市场份额,且已经被广泛用于从平板电脑到电子阅读器等各种产品。总之,谷歌的Android平台正在迅速遍地开花,品牌厂商们很难不注意到。  让我们一起面对吧。Andr

c# 检测中英输入法_C# 切换中英文输入法_weixin_39941262的博客-程序员宅基地

在界面输入时,有时需要限定输入法。在不自定义正则表达式或者其它输入处理的情况下,切换中英文时与当前语言栏匹配,有以下的几种系统方案:InputLanguage方案1 /// 2 ///获取当前输入法3 /// 4 /// 5 private stringGetCultureType()6 {7 var currentInputLanguag...

推荐文章

热门文章

相关标签