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' onmouseover=/"static_onmouseover(this)/" id='"+id+"' onclick=/"static_onclick(this)/" onmouseout=/"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 "   ";

}

function getLeftSpaceIsHaveChild(){

return "  ";

}

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 + "' onmouseover=/"dynamic_onmouseover(this)/" onmouseout=/"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 + "' onmouseover=/"dynamic_onmouseover(this)/" onmouseout=/"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 + "' onmouseover=/"dynamic_onmouseover(this)/" onmouseout=/"dynamic_onmouseout(this)/"><td class='dynamicTDCenter' colspan='2'><a href='" + node.attributes[1].value + "' onclick=/"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来做菜单，不用控件。做完之后反应也蛮快的。

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