http://www.microsoft.com/china/MSDN/library/archives/technic/dhtml/corner042699.asp 这篇来自George Young -开发MSDN ONLINE的负责人 写的,可能对你有帮助:)
.js // JavaScript Document function menu(treedata,id) //画菜单 { var currdata = new Array(); var i = 0; var printstr = "<table border='0' cellspacing='0' cellpadding='0'>";
根本就不是dom解析xml文件组成
所有动作都是由一个htc文件来控制
这篇来自George Young -开发MSDN ONLINE的负责人 写的,可能对你有帮助:)
// JavaScript Document
function menu(treedata,id) //画菜单
{
var currdata = new Array();
var i = 0;
var printstr = "<table border='0' cellspacing='0' cellpadding='0'>";
for(; i<treedata.length; i++)
{ //判断有无此节点
if(treedata[i][1]==id) currdata[currdata.length] = treedata[i];
}//end for
for(i=0; i<currdata.length; i++)
{ //遍历数组,执行判断
if(itemExists(treedata,currdata[i][0]))
{ //判断是否有子节点
if(i==currdata.length-1)
{
menutype = "menu3";
listtype = "list1";
}
else
{
menutype = "menu1";
listtype = "list";
}//end if
onmouseup = "chengstate("+currdata[i][0]+")";
menuname = currdata[i][2];
}
else
{ //没有子节点
if(i==currdata.length-1)
{
menutype = "file1";
}
else
{
menutype = "file";
}//end if
menuname = "<a href='"+currdata[i][3]+"' target='_blank'>"+currdata[i][2]+"</a>";
onmouseup = "";
}//end if
printstr += "<tr><td id='pr"+currdata[i][0]+"' class="+menutype+" onMouseUp="+onmouseup+">"+menuname+"</td></tr>";
printstr += "<tr id='item"+currdata[i][0]+"' style='display:none'><td class="+listtype+">"+menu(treedata,currdata[i][0])+"</td></tr>"; }//end for
printstr += "</table>";
return printstr;
}//end function menufunction itemExists(treedata,id)
{
for(var i=0;i<treedata.length;i++)
{
if(treedata[i][1]==id)return true;
}//end for
return false;
}//end function itemExistsfunction chengstate(menuid,save)
{ //切换节点的开放/关闭
menuobj = eval("item"+menuid);
obj = eval("pr"+menuid);
if(menuobj.style.display == '')
{
menuobj.style.display = 'none';
}else{
menuobj.style.display = '';
}//end if
switch (obj.className)
{
case "menu1":
obj.className = "menu2";
break;
case "menu2":
obj.className = "menu1";
break;
case "menu3":
obj.className = "menu4";
break;
case "menu4":
obj.className = "menu3";
break;
}//end switch
if(save!=false)
{
setupcookie(menuid); //保存状态
}//end if
}//end funciton chengstautfunction setupcookie(menuid)
{ //存入cookie 保存节点状态
var menu = new Array();
var menustr = new String();
menuOpen = false;
if(checkCookieExist("menu"))
{ //判断是否是是否已经保存过cookie
menustr = getCookie("menu");
//alert(menustr);
if(menustr.length>0)
{ //判断menu是否为空,,,否则分解为数组
menu = menustr.split(",");
for(i=0;i<menu.length;i++)
{
if(menu[i]==menuid)
{ //如果是打开状态,,,删除记录
menu[i]='';
menuOpen = true;
}//end if
}//end for
if(menuOpen==false)menu[i] = menuid;
}else{
menu[0] = menuid;
}//end if
}else{
menu[0] = menuid;
}//end if
menustr = menu.join(",");
menustr = menustr.replace(",,",",");
if(menustr.substr(menustr.length-1,1)==',')menustr = menustr.substr(0,menustr.length-1); //去掉最后的 ","
if(menustr.substr(0,1)==',')menustr = menustr.substr(1,menustr.length-1); //去掉开始的 ","
saveCookie("menu",menustr,1000);
//alert(menustr);
//deleteCookie("menu");
}//end function setupcookiefunction initialize()
{ //取得cookie 设置节点的缩放,,初始化菜单状态
var menu = new Array();
var menustr = new String();
if(checkCookieExist("menu"))
{ //判断是否是是否已经保存过cookie
menustr = getCookie("menu");
if(menustr.length>0)
{ //判断长度是否合法
menu = menustr.split(",");
for(i=0;i<menu.length;i++)
{
if(objExists(menu[i]))
{ //验证对象是否存在
chengstate(menu[i],false);
}//end if
}//end for
objExists(99);
}//end if
}//end if
}//end funciton setupstatefunction objExists(objid)
{ //验证对象是否存在
try
{
obj = eval("item"+objid);
}//end try
catch(obj)
{
return false;
}//end catch
if(typeof(obj)=="object")
{
return true;
}//end if
return false;
}//end function objExists
//--------------------------------------------------↓↓↓↓↓↓↓↓↓↓↓↓ 执行Cookie 操作
function saveCookie(name, value, expires, path, domain, secure)
{ // 保存Cookie
var strCookie = name + "=" + value;
if (expires)
{ // 计算Cookie的期限, 参数为天数
var curTime = new Date();
curTime.setTime(curTime.getTime() + expires*24*60*60*1000);
strCookie += "; expires=" + curTime.toGMTString();
}//end if
// Cookie的路径
strCookie += (path) ? "; path=" + path : "";
// Cookie的Domain
strCookie += (domain) ? "; domain=" + domain : "";
// 是否需要保密传送,为一个布尔值
strCookie += (secure) ? "; secure" : "";
document.cookie = strCookie;
}//end funciton saveCookiefunction getCookie(name)
{ // 使用名称参数取得Cookie值, null表示Cookie不存在
var strCookies = document.cookie;
var cookieName = name + "="; // Cookie名称
var valueBegin, valueEnd, value;
// 寻找是否有此Cookie名称
valueBegin = strCookies.indexOf(cookieName);
if (valueBegin == -1) return null; // 没有此Cookie
// 取得值的结尾位置
valueEnd = strCookies.indexOf(";", valueBegin);
if (valueEnd == -1)
valueEnd = strCookies.length; // 最後一个Cookie
// 取得Cookie值
value = strCookies.substring(valueBegin+cookieName.length,valueEnd);
return value;
}//end function getCookiefunction checkCookieExist(name)
{ // 检查Cookie是否存在
if (getCookie(name))
return true;
else
return false;
}//end function checkCookieExistfunction deleteCookie(name, path, domain)
{ // 删除Cookie
var strCookie;
// 检查Cookie是否存在
if (checkCookieExist(name))
{ // 设置Cookie的期限为己过期
strCookie = name + "=";
strCookie += (path) ? "; path=" + path : "";
strCookie += (domain) ? "; domain=" + domain : "";
strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT";
document.cookie = strCookie;
}//end if
}//end function deleteCookie
/* CSS Document */
.menu1 {
font-size: 9pt;
background-image: url(folder1.gif);
background-repeat: no-repeat;
height: 17px;
left: 32px;
padding-left: 32px;
cursor: hand;
}
.menu2 {
font-size: 9pt;
background-image: url(folder2.gif);
background-repeat: no-repeat;
height: 17px;
left: 32px;
padding-left: 32px;
cursor: hand;
}
.menu3 {
font-size: 9pt;
background-image: url(folder3.gif);
background-repeat: no-repeat;
height: 17px;
left: 32px;
padding-left: 32px;
cursor: hand;
}
.menu4{
font-size: 9pt;
background-image: url(folder4.gif);
background-repeat: no-repeat;
height: 17px;
left: 32px;
padding-left: 32px;
cursor: hand;
}
.list{
font-size: 9pt;
padding-left: 20px;
background-image: url(list.gif);
background-repeat: repeat-y;
}
.list1{
font-size: 9pt;
padding-left: 20px;
}
.file{
font-size: 9pt;
background-image: url(file.gif);
background-repeat: no-repeat;
height: 16px;
cursor: hand;
padding-left: 32px;
}
.file1 {
font-size: 9pt;
background-image: url(file1.gif);
background-repeat: no-repeat;
height: 16px;
cursor: hand;
padding-left: 32px;
}
body {
font-size: 9pt;
color: #000000;
background-color: #FFFFFF;
}
a:link {
font-size: 9pt;
color: #000000;
text-decoration: none;
}
a:visited {
font-size: 9pt;
color: #000000;
text-decoration: none;
}
a:hover {
font-size: 9pt;
color: #0000FF;
text-decoration: none;
position: relative;
right: 1px;
bottom: 1px;
}
a:active {
font-size: 9pt;
color: #000000;
text-decoration: none;
}
.test {
font-size:9pt;
background-color:#FF0000;
}
.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>=========目录树 for ALL 1.0 =========</title>
<link href="menu.css" rel="stylesheet" type="text/css">
<script src="menu.js" type="text/javascript"></script>
</head>
<body onLoad="initialize()">
<script language="javascript">
var yematree = new Array();yematree[0] = new Array("1","0","技术文档","http://www.yemaweb.com");
yematree[1] = new Array("2","0","情感世界","http://www.yemaweb.com");
yematree[2] = new Array("3","0","未来之窗","http://www.yemaweb.com");
yematree[3] = new Array("4","1","编程语言","http://www.yemaweb.com");
yematree[4] = new Array("5","1","服务器","http://www.yemaweb.com");
yematree[5] = new Array("6","1","代码共享","http://www.yemaweb.com");
yematree[6] = new Array("7","2","那年我18","http://www.yemaweb.com");
yematree[7] = new Array("8","4","Java","http://www.yemaweb.com");
yematree[8] = new Array("9","2","不要再给我温柔","http://www.yemaweb.com");
yematree[9] = new Array("10","3","未来技术","http://www.yemaweb.com");
yematree[10] = new Array("11","4","VC++","http://www.yemaweb.com");
yematree[11] = new Array("12","3","科幻世界","http://www.yemaweb.com");
yematree[12] = new Array("13","4","VB","http://www.yemaweb.com");
yematree[13] = new Array("14","4","C#","http://www.yemaweb.com");
yematree[14] = new Array("14","4","C#","http://www.yemaweb.com");
document.write(menu(yematree,0));
</script></body>
</html>
http://community.csdn.net/Expert/topic/3472/3472337.xml?temp=.1701624