用JSP如何开发复杂的界面? 那些效果基本上都是javascript完成的,树的话还结合了xml 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 可以应用框架frameset,frame或者iframe对页面进行分割组合,然后在各个部分调用不同得包含各种结构得文件 哇噻,楼上的有好多五角星啊,楼上所的都对,一般都用javascript的,当然如果你很牛,用什么applet、echo、struts之类也不反对,呵呵。 看俺的文档吧,关于用xml+js+jsp种树,跟CSDN左边的树一样!http://www.csdn.net/develop/read_article.asp?id=17818 http://www.csdn.net/develop/read_article.asp?id=17818 up 树的代码,拿去吧,在网页里都可以用,但是图片的问题你要自己解决了。时间的问题一般的JSP的书里都有,你自己找吧。<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=0var 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 = 0var timeOutId = 0generateTree() --></script></HEAD><FRAMESET cols="200,*" onLoad='initializeTree()'> <FRAME src="basetree.htm" name="treeFrame"> <FRAME SRC="basefolder.htm" name="folderFrame"> </FRAMESET> </HTML> AHUA1001你给的代码怎么用呀? 可以使用一些控件。结合 使用javascript ~~ EL中参数和字符一同显示的问题 用javaBean从前页面取值的基础问题,问题写点很细了,望指点! 要面试了,大家进来吧 web截图问题 很着急!一个关于application的应用! jsp文件上传怎么做? 各位兄台,Eclipse是干啥的? 请问如何判别页面输入的是汉字?(不是小气,主要是没分了) 问几个关于数据库的问题!一定给分! jsp页面动态显示一列相加的数据 struts初学,请问做个HELLO WORLD都需要那些步骤呢?谢谢了 很菜的问题,大家帮帮忙(附源码)!!
楼上所的都对,一般都用javascript的,当然如果你很牛,用什么applet、echo、struts之类也不反对,呵呵。
http://www.csdn.net/develop/read_article.asp?id=17818
<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>