javascript、CSS、XML动太生成树菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Untitled</title>

<Style>

/* .on

{

background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;

text-decoration:none;

border: 1px solid #2a4dab;

font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;

}*/

.list{margin:0;padding:0;}

.list ul

{

/*background:#5eeDBE url(images/menu_head_bg.gif) repeat-x;背景样式依次为：颜色，图片路径，横向重复*/

list-style-type:none;

margin:0,0,0,9;

padding:0;

padding-left:1px;

}

.list li

{

font:bold 12px/22px "lucida Grande", verdana, lucida, Arial, helvetica, "宋体", sans-serif;/*文字样式依次为：粗体大小/行高字族*/

list-style-type:none;

margin:0;

padding:0;

padding-left:12px;

cursor:hand;

background:#008080

}

A:link {font-size:12px;text-decoration:none;color: #FFFFFF}

A:visited {font-size:12px;text-decoration:none;color: #FFFFFF}

A:active {font-size:12px;text-decoration: none;color: ##FFFFFF}

A:hover {font-size:12px;text-decoration:none;color: #ff00ff;border: 1px solid #2a4dab;/*边框颜色*/ }

</Style>

function showhide(thisobj,id)

{

var obj=document.getElementById(id);

//alert(thisobj.previousSibling.previousSibling.getAttribute("src"));

if(obj.style.display=="")

{

obj.style.display="none";

//thisobj.innerText="+"+thisobj.innerText.substring(1);

thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_close.gif")

thisobj.previousSibling.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\plus.gif")

}

else

{

obj.style.display="";

//thisobj.innerText="-"+thisobj.innerText.substring(1);

thisobj.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif")

thisobj.previousSibling.previousSibling.setAttribute("src","C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif")

}

function show(thisobj)

{

alert(thisobj);

}

</script>

var xmlDoc;

function CreateXmlObj()

{

if(window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

else

{

xmlDoc==document.implementation.createDocument("","",null);

}

//xmlDoc.async=false;

xmlDoc.load("C:\\Documents and Settings\\kevin.long\\桌面\\Tree.xml");

if(xmlDoc.parseError.errorCode!=0)

{

var xmlErr=xmlDoc.parseError;

alert("出错:"+xmlErr.reason);

}

var str="<div class=\"list\" id=\"menu1_child\" title=\"菜单功能区\">";

function CreateTreeNode(root)

{

if(root.hasChildNodes)

{

var uid=root.getAttribute("Id")+"-1";

str+="<ul id=\""+uid+"\">"

for(var i=0;i<root.childNodes.length;i++)

{

var node=root.childNodes[i];

var id=node.getAttribute("Id");

var name=node.getAttribute("Name");

if(node.hasChildNodes)

{

//str+="<li id=\""+id+"\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\minus.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >-"+name+"</a></SPAN>"

str+="<li id=\""+id+"\"><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\minus.gif\"/><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\books_open.gif\"/><SPAN onclick=\"showhide(this,'"+id+"-1')\"><a >"+name+"</a></SPAN>"

CreateTreeNode(node)

str+="</li>";

}

else

{

str+="<li id=\""+id+"\" style=\"margin-left:18px;\" ><img src=\"C:\\Documents and Settings\\kevin.long\\桌面\\Web\\leaf.gif\"/><a href=\"javascript:\">"+name+"</a></li>"

}

str+="</ul>"

// alert(root.childNodes.length);

}

function showAll()

{

}

function closeAll()

{}

function Test()

{

CreateXmlObj();

//alert(xmlDoc.documentElement.firstChild.getAttribute("Name"));

var root=xmlDoc.documentElement;

CreateTreeNode(root);

str+="</div>";

//alert(str);

document.getElementById("codeText").value=str

idmenu.innerHTML=str;

}

</script>

</head>

<body>

</body>

</html>

Tree.xml

<?xml version="1.0" encoding="UTF-8"?>

<Root>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Menu>

</Root>

posted @ 2008-01-16 16:01 龍的傳人阅读(1964) 评论(2) 编辑收藏举报

刷新页面返回顶部

javascript、CSS、XML动太生成树菜单

公告