那些效果基本上都是javascript完成的,树的话还结合了xml

解决方案 »

  1.   

    可以应用框架frameset,frame或者iframe对页面进行分割组合,然后在各个部分调用不同得包含各种结构得文件
      

  2.   

    哇噻,楼上的有好多五角星啊,
    楼上所的都对,一般都用javascript的,当然如果你很牛,用什么applet、echo、struts之类也不反对,呵呵。
      

  3.   

    看俺的文档吧,关于用xml+js+jsp种树,跟CSDN左边的树一样!
    http://www.csdn.net/develop/read_article.asp?id=17818
      

  4.   

    http://www.csdn.net/develop/read_article.asp?id=17818 up
      

  5.   

    树的代码,拿去吧,在网页里都可以用,但是图片的问题你要自己解决了。时间的问题一般的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=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>
      

  6.   

    AHUA1001你给的代码怎么用呀?
      

  7.   

    可以使用一些控件。结合 使用javascript ~~