📄 treemenu.html

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码
💻 HTML
字号:
<HTML>
<HEAD>
<title>IE-Menu</title>

<script LANGUAGE="JavaScript">
<!--
//每个节点有一个数组,包含 4+n个元素 
//  node[0]为0/1 对应节点的展开/关闭
//  node[1]为0/1 对应文件夹的关闭/展开
//  node[2]为1 如果节点的子节点是文档
//  node[3]是节点的名称
//  node[4]...node[4+n]为n个子节点

// 初始化菜单的数据

function generateTree()
{
var aux1, aux2, aux3, aux4

	foldersTree = folderNode("我的网站")
		aux1 = appendChild(foldersTree, folderNode("娱乐天地"))
			aux2 = appendChild(aux1, leafNode("literature"))
				appendChild(aux2, generateDocEntry(0, "文学巨著", "basefolder.htm", ""))
				appendChild(aux2, generateDocEntry(0, "杂家杂谈", "basefolder.htm", ""))
			aux2 = appendChild(aux1, leafNode("Music"))
				appendChild(aux2, generateDocEntry(0, "世纪流行风", "basefolder.htm", ""))
				appendChild(aux2, generateDocEntry(0, "民乐赏析", "basefolder.htm", ""))
				appendChild(aux2, generateDocEntry(0, "器乐演奏", "basefolder.htm", ""))
		aux1 = appendChild(foldersTree, folderNode("资料仓库"))
			aux2 = appendChild(aux1, leafNode("SoftWare"))
				appendChild(aux2,generateDocEntry(1, "系统软件", "basefolder.htm", ""))
				appendChild(aux2,generateDocEntry(1, "工具软件", "basefolder.htm", ""))
				appendChild(aux2,generateDocEntry(1, "游戏", "basefolder.htm", ""))
			aux2 = appendChild(aux1, folderNode("SourcePrograme"))
				aux3 = appendChild(aux2, leafNode("JavaScript"))
					appendChild(aux3, generateDocEntry(1, "第一期", "basefolder.htm",""))
					appendChild(aux3, generateDocEntry(1, "第二期", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "第三期", "basefolder.htm", ""))
				aux3 = appendChild(aux2, leafNode("ASP"))
					appendChild(aux3, generateDocEntry(1, "第一期", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "第二期", "basefolder.htm", ""))
				aux3 = appendChild(aux2, leafNode("PHP"))
					appendChild(aux3, generateDocEntry(1, "第一期", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "第二期", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "第三期", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "第四期", "basefolder.htm", ""))
				aux3 = appendChild(aux2,  leafNode("CGI"))
					appendChild(aux3,generateDocEntry(1, "第一期", "basefolder.htm", ""))
					appendChild(aux3,generateDocEntry(1, "第二期", "basefolder.htm", ""))
					appendChild(aux3,generateDocEntry(1, "第三期", "basefolder.htm", ""))
					appendChild(aux3,generateDocEntry(1, "第四期", "basefolder.htm", ""))
					appendChild(aux3,generateDocEntry(1, "第五期", "basefolder.htm", ""))
					appendChild(aux3,generateDocEntry(1, "第六期", "basefolder.htm", ""))
				aux3 = appendChild(aux2, leafNode("另类"))
					appendChild(aux3, generateDocEntry(1, "Applet效果", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "Flash动画", "basefolder.htm", ""))
			aux2 = appendChild(aux1, folderNode("DownLoad Area"))
				aux3 = appendChild(aux2,  leafNode("免费软件"))
					appendChild(aux3, generateDocEntry(1, "升级程序", "basefolder.htm", ""))
					appendChild(aux3, generateDocEntry(1, "补丁系列", "basefolder.htm", ""))
}

// 创建节点的辅助函数
function folderNode(name)
{
var arrayAux
	arrayAux = new Array
	arrayAux[0] = 0
	arrayAux[1] = 0
	arrayAux[2] = 0
	arrayAux[3] = name
        
        return arrayAux
}
function leafNode(name)
{
var arrayAux
	arrayAux = new Array
	arrayAux[0] = 0
	arrayAux[1] = 0
	arrayAux[2] = 1
	arrayAux[3] = name
        
        return arrayAux
}

function appendChild(parent, child)
{
	parent[parent.length] = child
	return child
}

function generateDocEntry(icon, docDescription, link)
{
var retString =""

	if (icon==0)
		retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='在右边框架中打开'"
	else
		retString = "<A href='"+link+"' target=_blank><img src='link.gif' alt='在新窗口中打开'"
	retString = retString + " border=0></a><td nowrap><font style='font-size:9pt;font-family:宋体'>" + docDescription + "</font>"

	return retString

}


//刷新树状菜单
function redrawTree()
{
var doc = top.treeFrame.window.document

	doc.clear()
	doc.write("<body bgcolor='white'>")	
	redrawNode(foldersTree, doc, 0, 1, "")
	doc.close()
}

function redrawNode(foldersNode, doc, level, lastNode, leftSide)
{
var j=0
var i=0

	doc.write("<table border=0 cellspacing=0 cellpadding=0>")
	doc.write("<tr><td valign = middle nowrap>")

	doc.write(leftSide)

	if (level>0)
		if (lastNode) //'brother'子节点数组中有否兄弟节点
		{
			doc.write("<img src='lastnode.gif' width=16 height=22>")
			leftSide = leftSide + "<img src='blank.gif' width=16 height=22>" 
		}
		else
		{
			doc.write("<img src='node.gif' width=16 height=22>")
			leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
		}

	displayIconAndLabel(foldersNode, doc)
	doc.write("</table>")

	if (foldersNode.length > 4 && foldersNode[0]) //有更低层的节点和文件夹展开着
	{
		if (!foldersNode[2])//带文件夹的文件夹
		{
			level=level+1
			for (i=4; i<foldersNode.length;i++)
				if (i==foldersNode.length-1)
					redrawNode(foldersNode[i], doc, level, 1, leftSide)
				else
					redrawNode(foldersNode[i], doc, level, 0, leftSide)
		}
		else //带文档的文件夹
		{
			for (i=4; i<foldersNode.length;i++)
			{
				doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
				doc.write("<tr><td nowrap>")
				doc.write(leftSide)
				if (i==foldersNode.length - 1)
					doc.write("<img src='lastnode.gif' width=16 height=22>")
				else
					doc.write("<img src='node.gif' width=16 height=22>")
				doc.write(foldersNode[i])
				doc.write("</table>")
			}
		}
	}
}

function displayIconAndLabel(foldersNode, doc)
{
	doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
	if (foldersNode[1])
		doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
	else
		doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
	doc.write("<td valign=middle align=left nowrap>")
	doc.write("<font style='font-size:9pt;font-family:宋体'>"+foldersNode[3]+"</font>")
}


//树收拢时调用的函数

//当父节点关闭,其所有的子节点也都闭合
function closeFolders(foldersNode)
{
var i=0

        if (!foldersNode[2])
	{
        	for (i=4; i< foldersNode.length; i++)
	           	closeFolders(foldersNode[i])

	}
        foldersNode[0] = 0
        foldersNode[1] = 0
}

//收拢节点
function clickOnFolderRec(foldersNode, folderName)
{
var i=0

        if (foldersNode[3] == folderName)
	{
		if (foldersNode[0])
			closeFolders(foldersNode)
		else
		{
			foldersNode[0] = 1
                	foldersNode[1] = 1
		}
	}
	else
	{
        	if (!foldersNode[2])
        		for (i=4; i< foldersNode.length; i++)
	           		clickOnFolderRec(foldersNode[i], folderName)
	}
}


//打开分支
function openBranch(branchName)
{
	clickOnFolderRec(foldersTree, branchName)
	if (branchName=="Start folder" && foldersTree[0]==0)
		top.folderFrame.location="basefolder.htm"
	timeOutId = setTimeout("redrawTree()",100)
}

//页面载入时的初始化
function initializeTree()
{
	generateTree()
	redrawTree()
}

var foldersTree = 0
var timeOutId = 0
generateTree() 


-->
</script>


</HEAD>

<FRAMESET cols="200,*"  onLoad='initializeTree()'> 
	<FRAME src="basetree.htm" name="treeFrame"> 
	<FRAME SRC="basefolder.htm" name="folderFrame"> 
</FRAMESET> 


</HTML>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -