来读代码咯，一个关于在页面生成树的代码，考IQ，考人品,

帮我解释下下面这个html文件。特别是它是这么实现把节点加到树上的....
html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>系统菜单</title>
</HEAD>
<body text="#FFFFFF" topmargin="0" leftmargin=0>
<SCript LANGUAGE=JSCRIPT>
OutBarFolder1=new Array("会员管理","images/admin.gif","会员管理","member/MemberCount.jsp","parent.parent.main"); 
OutBarFolder2=new Array("商品管理","images/admin.gif","添加库存商品","goodsAndSource/AddToStore.html","parent.parent.main",  "images/admin.gif","客户评论管理","member/MemberCount.jsp","parent.parent.main", "images/admin.gif","(直接在页面上修改)前台商品管理","goodsAndSource/AddToPage.jsp","parent.parent.main","images/admin.gif","当前库存商品","goodsAndSource/Now_Store.html","parent.parent.main","images/admin.gif","页面在售商品","goodsAndSource/Now_page.html","parent.parent.main"); 
OutBarFolder3=new Array("销售统计","images/admin.gif","销售汇总表","sellling/All_Selling.html","parent.parent.main","images/admin.gif","月度销售明细表","sellling/Detail_moth.html","parent.parent.main");
OutBarFolder4=new Array("论坛管理","images/admin.gif","贴子管理（删帖、置顶、精华）","member/MemberCount.jsp","parent.parent.main","images/admin.gif","论坛区公告","member/MemberCount.jsp","parent.parent.main"); 
OutBarFolder5=new Array("系统管理","images/admin.gif","设置管理员","member/MemberCount.jsp","parent.parent.main","images/admin.gif","系统预警设置","member/MemberCount.jsp","parent.parent.main"); 
OutBarFolder6=new Array(""); 
OutBarFolder7=new Array(""); 
 </Script>
<SCRIPT LANGUAGE="JAVASCRIPT">

//以下为初始化外观参数。（会被首先执行）
OB_Top=0; //菜单距离顶部的象素值；
OB_Left=0; //菜单距离左侧的象素值；
OB_Margin=10; //top and bottom margins between icons and borders
OB_Width=172; //菜单宽度
newHeight=window.screen.height
OB_Height=newHeight-225;                  //菜单高度
OB_SlideSpeed=10; //菜单运动速度
OB_BackgroundColor="#000000";     //背景色
OB_ItemsSpacing=25; //2个图标间的距离
OB_BorderWidth=3; //border宽度
OB_BorderStyle="ridge"; //border风格
OB_BorderColor="#dddddd"; //border颜色
OB_IconsWidth=32; //图标宽度
OB_IconsHeight=32; //图标高度
OB_ButtonFontFamily="arial"; //按钮上字体的字型
OB_ButtonFontSize=9; //按钮上字体大小 
OB_ButtonFontColor="black"; //按钮上字体颜色    
OB_ButtonHeight=22; //按钮的高度
OB_LabelFontFamily="arial"; //LOGO下字体的字型
OB_LabelFontSize=9; //LOGO下面的字体大小
OB_LabelFontColor="white"; //LOGO下的字体颜色
OB_LabelMargin=3; //margin between labels and icons
OB_DownArrow="images/arrowup.gif"; //向下滚动的logo箭头
OB_UpArrow="images/arrowdown.gif"; //向上滚动的logo箭头
OB_ArrowWidth=15; //箭头的宽度
OB_ArrowHeight=15; //箭头的高度
OB_ArrowSlideSpeed=10; //项目列表滚动的速度；/*以下的代码中你需要改动菜单的数目与实际一致，本例用了4个按钮菜单。*/
function MakeItems(Folder,zorder,top)
{
var items=0;
var folderWidth=(OB_Width-OB_BorderWidth*2);
while(Folder[items+1])
items+=4;  //需要改这里及下面的4；
items/=4;
document.write("<DIV id='OB_Folder"+zorder+"' style='position:absolute;left:0;top:"+top+";width:"+folderWidth+";height:"+(OB_Margin*2+items*(OB_IconsHeight+OB_LabelFontSize+OB_LabelMargin)+(items-1)*OB_ItemsSpacing)+";z-index:"+zorder+";clip:rect(0 0 0 0);'>");
for(var i=1;i<items*4;i+=4)
{
document.write("<div targetFrame='"+Folder[i+3]+"' link='"+Folder[i+2]+"' onMouseDown='OutlookLikeBar.ItemClicked(this)' onMouseUp='OutlookLikeBar.ItemSelected(this)' onMouseOver='OutlookLikeBar.OverItems(this)' onMouseOut='OutlookLikeBar.OutItems(this)' style='position:absolute;left:"+(Math.ceil((OB_Width-OB_BorderWidth*2-OB_IconsHeight)/2)-1)+";top:"+(OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";cursor:hand;clip:rect(0 "+OB_IconsWidth+" "+OB_IconsHeight+" 0;width:"+OB_IconsWidth+";height:"+OB_IconsHeight+"'>");
  document.write("<img src='"+Folder[i]+"'>");
document.write("</div>");
document.write("<div align='center' style='position:absolute;width:160;left:0;top:"+(OB_LabelMargin+OB_IconsHeight+OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";font-family:"+OB_LabelFontFamily+";font-size:"+OB_LabelFontSize+"pt;color:"+OB_LabelFontColor+"'>");
// document.write("<div align='center' style='position:absolute;width:160;left:50;top:"+(OB_LabelMargin+OB_IconsHeight+OB_Margin+Math.ceil((i-1)/4)*(OB_ItemsSpacing+OB_LabelFontSize+OB_IconsHeight))+";font-family:"+OB_LabelFontFamily+";font-size:"+OB_LabelFontSize+"pt;color:"+OB_LabelFontColor+"'>");
document.write(Folder[i+1]);
document.write("</div>");
}
document.write("</DIV>");
}//***************************
//* Outlook-Like Bar Object *
//***************************
function OutBar(width,height,items,buttonHeight,borderWidth,slideSpeed,slideArrowValue,ArrowSlideSpeed)
{
this.currentFolder=1;
this.currentItem=null;
this.slideCount=0;
this.slideStep=1;
this.slideArrowValue=slideArrowValue;
this.slideSpeed=slideSpeed;
this.borderWidth=borderWidth;
this.width=width;
this.visibleAreaHeight=height-2*borderWidth-items*buttonHeight;
this.visibleAreaWidth=width;
this.FolderClicked=FolderClicked;
this.SlideFolders=SlideFolders;
this.ItemClicked=ItemClicked;
this.ItemSelected=ItemSelected;
this.OverItems=OverItems;
this.OutItems=OutItems;
this.OverArrow=OverArrow;
this.OutArrow=OutArrow;
this.ArrowClicked=ArrowClicked;
this.ArrowSelected=ArrowSelected;
this.ArrowSlideSpeed=ArrowSlideSpeed;
this.SlideItems=SlideItems;
this.SlideItemsAction=SlideItemsAction;
this.Start=Start;
this.ClipFolder=ClipFolder;
this.SetArrows=SetArrows;
this.HideArrows=HideArrows;
this.sliding=false;
this.items=items;
this.started=false;
this.Start();
}function FolderClicked(folder)
{
if(this.sliding)
return;
if(folder==this.currentFolder)
return;
this.sliding=true;
this.slideCount=this.visibleAreaHeight;
this.slideStep=1;
this.countStep=0;
this.HideArrows();
this.SlideFolders(folder,document.all["OB_Button"+folder].position=="DOWN");
}function SlideFolders(folder,down)
{
var step;
if(down)
{
this.slideCount-=Math.floor(this.slideStep);
if(this.slideCount<0)
this.slideStep+=this.slideCount;
step=Math.floor(this.slideStep);
for(var i=2;i<=folder;i++)
if(document.all["OB_Button"+i].position=="DOWN")
{
document.all["OB_Button"+i].style.pixelTop-=step;
document.all["OB_Folder"+i].style.pixelTop-=step;
}     filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/; var clipString=document.all["OB_Folder"+folder].style.clip;
var clip=clipString.match(filter);
this.ClipFolder(folder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])+step),0); var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
var clip=clipString.match(filter);
this.ClipFolder(this.currentFolder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])-step),0); this.slideStep*=this.slideSpeed;
if(this.slideCount>0)
setTimeout("OutlookLikeBar.SlideFolders("+folder+",true)",20);
else
{
for(var k=2;k<=folder;k++)
document.all["OB_Button"+k].position="UP";
this.currentFolder=folder;
this.SetArrows();
this.sliding=false;
}
}
else
{
this.slideCount-=Math.floor(this.slideStep);
if(this.slideCount<0)
this.slideStep+=this.slideCount;
step=Math.floor(this.slideStep);
for(var i=folder+1;i<=this.items;i++)
if(document.all["OB_Button"+i].position=="UP")
{
document.all["OB_Button"+i].style.pixelTop+=step;
document.all["OB_Folder"+i].style.pixelTop+=step;
}     filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/; var clipString=document.all["OB_Folder"+folder].style.clip;
var clip=clipString.match(filter);
this.ClipFolder(folder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])+step),0);
var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
var clip=clipString.match(filter);
this.ClipFolder(this.currentFolder,parseInt(clip[1]),this.visibleAreaWidth,(parseInt(clip[3])-step),0); this.slideStep*=this.slideSpeed;
if(this.slideCount>0)
setTimeout("OutlookLikeBar.SlideFolders("+folder+",false)",20);
else
{
for(var k=folder+1;k<=this.items;k++)
document.all["OB_Button"+k].position="DOWN";
this.currentFolder=folder;
this.SetArrows();
this.sliding=false;
}
}
}
树结构HTML源码动作事件

解决方案 »

  1.   

    function ItemClicked(item)
    {
    if(this.sliding)
    return;
    item.style.border="2 inset #ffffff";
    }function ItemSelected(item)
    {
    if(this.sliding)
    return;
    item.style.border="1 outset #ffffff";
    if(item.link.indexOf("javascript")!=-1) 
    eval(item.link)
    else 
    eval(item.targetFrame+".location='"+item.link+"'");
    }function OverItems(item)
    {
    if(this.sliding)
    return;
    item.style.border="1 outset #ffffff";
    }function OutItems(item)
    {
    if(this.sliding)
    return;
    item.style.border="0 none black";
    }function ArrowClicked(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="1 inset #ffffff";
    }function ArrowSelected(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="0 none black";
    this.SlideItems(arrow.id=="OB_SlideUp");
    }function OverArrow(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="1 outset #ffffff";
    }function OutArrow(arrow)
    {
    if(this.sliding)
    return;
    arrow.style.border="0 none black";
    }function ClipFolder(folder,top,right,bottom,left)
    {
    document.all["OB_Folder"+folder].style.clip=clip='rect('+top+' '+right+' '+bottom+' '+left+')';
    }function Start()
    {
    if(!this.started)
    {
    this.ClipFolder(1,0,this.visibleAreaWidth,this.visibleAreaHeight,0);
    this.SetArrows();
    }
    }function SetArrows()
    {
    document.all["OB_SlideDown"].style.pixelTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight+20;
    document.all["OB_SlideDown"].style.pixelLeft=this.width-document.all["OB_SlideUp"].width-this.borderWidth-10;
    document.all["OB_SlideUp"].style.pixelTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight+this.visibleAreaHeight-document.all["OB_SlideDown"].height-20;
    document.all["OB_SlideUp"].style.pixelLeft=this.width-document.all["OB_SlideDown"].width-this.borderWidth-10; var folder=document.all["OB_Folder"+this.currentFolder].style;
    var startTop=document.all["OB_Button"+this.currentFolder].style.pixelTop+document.all["OB_Button"+this.currentFolder].style.pixelHeight; if(folder.pixelTop<startTop)
    document.all["OB_SlideDown"].style.visibility="visible";
    else
    document.all["OB_SlideDown"].style.visibility="hidden"; if(folder.pixelHeight-(startTop-folder.pixelTop)>this.visibleAreaHeight)
    document.all["OB_SlideUp"].style.visibility="visible";
    else
    document.all["OB_SlideUp"].style.visibility="hidden";
    }function HideArrows()
    {
    document.all["OB_SlideUp"].style.visibility="hidden";
    document.all["OB_SlideDown"].style.visibility="hidden";
    }function SlideItems(up)
    {
    this.sliding=true;
    this.slideCount=Math.floor(this.slideArrowValue/this.ArrowSlideSpeed);
    up ? this.SlideItemsAction(-this.ArrowSlideSpeed) : this.SlideItemsAction(this.ArrowSlideSpeed);
    }function SlideItemsAction(value)
    {
    document.all["OB_Folder"+this.currentFolder].style.pixelTop+=value;
        filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/;
        var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
        var clip=clipString.match(filter);
        this.ClipFolder(this.currentFolder,(parseInt(clip[1])-value),parseInt(clip[2]),(parseInt(clip[3])-value),parseInt(clip[4]));
    this.slideCount--;
    if(this.slideCount>0)
    setTimeout("OutlookLikeBar.SlideItemsAction("+value+")",20);
    else
    {
    if(Math.abs(value)*this.ArrowSlideSpeed!=this.slideArrowValue)
    {
    document.all["OB_Folder"+this.currentFolder].style.pixelTop+=(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed));
        filter = /rect\((\d*)px (\d*)px (\d*)px (\d*)px\)/;
    var clipString=document.all["OB_Folder"+this.currentFolder].style.clip;
    var clip=clipString.match(filter);
        this.ClipFolder(this.currentFolder,(parseInt(clip[1])-(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed))),parseInt(clip[2]),(parseInt(clip[3])-(value/Math.abs(value)*(this.slideArrowValue%this.ArrowSlideSpeed))),parseInt(clip[4]));
    }     
    this.SetArrows();
    this.sliding=false;
    }
    }
    </script>
    <Script>
    //判断浏览器类型
    if (document.all)
    {
    document.write("<DIV id='OutlookLikeBar' style='position:absolute;top:"+OB_Top+";left:"+OB_Left+";width:"+OB_Width+";height:"+OB_Height+";border:"+OB_BorderWidth+" "+OB_BorderStyle+" "+OB_BorderColor+";background-color:"+OB_BackgroundColor+";z-index:0;visibility:hidden;clip:rect(0,"+OB_Width+","+OB_Height+",0)'>");
    document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideUp' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_UpArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>");
    document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideDown' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_DownArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>");
    j=1;
    while(eval("window.OutBarFolder"+j))
    j++;
    i=j-1;
    while(i>0)
    {
    Folder=eval("OutBarFolder"+i);
    // window.status="Outlook-Like Bar is making folder '"+Folder[0]+"'";
    if(i==1)
    {
    document.write("<INPUT position='UP' id='OB_Button1' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:0;left:0;width:"+(OB_Width-2*OB_BorderWidth)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,OB_ButtonHeight);
    }
    else
    {
    document.write("<INPUT position='DOWN' id='OB_Button"+i+"' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:"+(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+";left:0;width:"+(OB_Width-2*OB_BorderWidth)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+OB_ButtonHeight);
    }

    i--;
    }
    document.write("</DIV>");
    var OutlookLikeBar=new OutBar(OB_Width,OB_Height,j-1,OB_ButtonHeight,OB_BorderWidth,OB_SlideSpeed,OB_IconsHeight+OB_LabelFontSize+OB_LabelMargin+OB_ItemsSpacing,OB_ArrowSlideSpeed);
    document.all["OutlookLikeBar"].style.visibility="visible";
    }else{
    document.write("<DIV id='OutlookLikeBar' style='position:absolute;top:"+OB_Top+";left:"+OB_Left+";width:"+OB_Width+";height:"+OB_Height+";border:"+OB_BorderWidth+" "+OB_BorderStyle+" "+OB_BorderColor+";background-color:"+OB_BackgroundColor+";z-index:0;visibility:hidden;clip:rect(0,"+OB_Width+","+OB_Height+",0)'>");
    document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideUp' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_UpArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>");
    document.write("<img onMouseUp='OutlookLikeBar.ArrowSelected(this)' onMouseDown='OutlookLikeBar.ArrowClicked(this)' onMouseOver='OutlookLikeBar.OverArrow(this)' onMouseOut='OutlookLikeBar.OutArrow(this)' id='OB_SlideDown' height='"+OB_ArrowHeight+"' width='"+OB_ArrowWidth+"' src='"+OB_DownArrow+"' style='position:absolute;top:0;left:0;cursor:hand;visibility:hidden;z-index:500'>");
    j=1;
    while(eval("window.OutBarFolder"+j))
    j++;
    i=j-1;
    while(i>0)
    {
    Folder=eval("OutBarFolder"+i)
    // window.status="Outlook-Like Bar is making folder '"+Folder[0]+"'";
    if(i==1)
    {
    document.write("<INPUT position='UP' id='OB_Button1' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:0;left:0;width:"+(OB_Width-2*OB_BorderWidth)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,OB_ButtonHeight);
    }
    else
    {
    document.write("<INPUT position='DOWN' id='OB_Button"+i+"' onDblClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' onClick='OutlookLikeBar.FolderClicked("+i+");this.blur()' TYPE='button' value='"+Folder[0]+"' style='position:absolute;top:"+(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+";left:0;width:"+(OB_Width-2*OB_BorderWidth)+";height:"+OB_ButtonHeight+";font-family:"+OB_ButtonFontFamily+";font-size:"+OB_ButtonFontSize+"pt;cursor:hand;color:"+OB_ButtonFontColor+";z-index:100'>");
    MakeItems(Folder,i,(OB_Height-(j-i)*OB_ButtonHeight-OB_BorderWidth*2)+OB_ButtonHeight);
    }

    i--;
    }
    document.write("</DIV>");
    var OutlookLikeBar=new OutBar(OB_Width,OB_Height,j-1,OB_ButtonHeight,OB_BorderWidth,OB_SlideSpeed,OB_IconsHeight+OB_LabelFontSize+OB_LabelMargin+OB_ItemsSpacing,OB_ArrowSlideSpeed);
    document.all["OutlookLikeBar"].style.visibility="visible";
    }
    </SCript>
    </body>
    </HTML>
      

  2.   

    应该导入的有3个script文件,有一个根树为-1.
      

  3.   

    好吧 大家，我错了，深深地悔过不该贴这么多代码.
    那谁能解释下，它把每个节点都放在Array里面，然后是这么加到树上的？
      

  4.   

    好吧 大家，我错了，深深地悔过不该贴这么多代码.
    那谁能解释下，它把每个节点都放在Array里面，然后是这么加到树上的？
      

  5.   

    好吧 大家，我错了，深深地悔过不该贴这么多代码.
    那谁能解释下，它把每个节点都放在Array里面，然后是这么加到树上的？ 代码样式怎么用...求资料
      

  6.   

    好吧 大家，我错了，深深地悔过不该贴这么多代码.
    那谁能解释下，它把每个节点都放在Array里面，然后是这么加到树上的？
    树上？你把这段代码执行后的结果截个图得了