求Tab控件：能动态添加删除页签，谢

要实现的功能：在浏览器中用javascript设计界面，功能需求如下：
浏览器左边树每个节点对应一个页面，点击一个节点，则在右边的Tab上增加一个页签并抬前（如果已经存在对应的页签项则仅抬前），然后在页签下面显示树节点的链接页面；另，Tab 每个页签有个关闭钮，选择关闭则去除此项，同时关闭下面的页面，将下一个Tab项的页面打开。
（如果需要，可以在点击树节点时，传参节点名称、节点的连接）
附加功能：Tab 页签多了，能有个左右钮移动显示，如果认为不好做，就算了。相关参考：
TabStrip应用例子 （关键字：TabStrip）
http://dev.csdn.net/develop/article/15/15124.shtmWebFXTabPane、WebFTabXPage
http://webfx.eae.net (这个站点我昨天还很好连，今天就难连了，版面也变了）（demo见附件"Tab_Pane_Demo.jpg" 改jpg为 rar ）
---以上例子不知道怎么调用提供的API动态增加页签，我对弱类型语言还不适应，且不知道怎么获得其对象的属性等东东 　：）　　------
请各位大虾帮帮忙，我刚接触脚本不久，几日来头绪全无，乃至寝食难安，不得已恳请各位大虾出手相助，感激不尽（本人语法尚未学好，且对javascript操作标签知之甚少，所以还请大侠对定义的方法做个详细的能动态添加页签的例子，谢谢）

解决方案 »

  1.   

    最简单的:
    Tab.htc
    <PUBLIC:COMPONENT>
    <PUBLIC:PROPERTY NAME="default" />
    <SCRIPT LANGUAGE="JScript">
    function open(mIndex)
    {
    if(event)
    {
    for(iIndex=0;iIndex<varArray.length;iIndex++)
    if(varArray[iIndex]==event.srcElement)
    {
    mIndex=iIndex;
    }
    }
    for(iIndex=0;iIndex<varArray.length;iIndex++)
    {
    if(iIndex==mIndex)
    {
    varArray[iIndex].style.zIndex=varArray.length*2+1; childNodes[iIndex+varArray.length].style.zIndex=varArray.length*2;
    varArray[iIndex].style.posTop=0; varArray[iIndex].style.posLeft=varArray[iIndex].left-2; varArray[iIndex].style.padding="5px";
    childNodes[iIndex+varArray.length].style.visibility="visible";
    　　　　　　　　}
    else
    {
    childNodes[iIndex+varArray.length].style.visibility="hidden";
    }
    if(iIndex<mIndex)
    {
    varArray[iIndex].style.zIndex=iIndex*2+1; childNodes[iIndex+varArray.length].style.zIndex=iIndex*2;
    }
    if(iIndex>mIndex)
    {
    varArray[iIndex].style.zIndex=iIndex*2-1; childNodes[iIndex+varArray.length].style.zIndex=iIndex*2-2;
    }
    if(iIndex<mIndex||iIndex>mIndex)
    {
    varArray[iIndex].style.posTop=2; varArray[iIndex].style.posLeft=varArray[iIndex].left;
    varArray[iIndex].style.padding="3px";
    }
    varArray[iIndex].style.paddingTop="2px";
    }
    }
    function nothing()
    {event.returnValue=false;}
    var Object,strValue,varRule,varArray=new Array(),iIndex,kIndex,varBgColor,nIndex;
    if(hasChildNodes())
    {
    if(!style.position||style.position=="static") style.position="relative";
    varBgColor=style.background;
    style.background="transparent";
    style.overflow="hidden";
    varRule=childNodes.item(0);
    for(iIndex=0;iIndex<childNodes.length;iIndex++)
    if(childNodes[iIndex].nodeName!="frame")
    removeChild(childNodes[iIndex]);
    for(iIndex=0;iIndex<childNodes.length;iIndex++)
    {
    varArray[iIndex]=document.createElement("span");
    varArray[iIndex].style.position="absolute";
    varArray[iIndex].style.posTop=2;
    varArray[iIndex].style.color="black";
    varArray[iIndex].innerText=childNodes[iIndex].text;
    varArray[iIndex].style.borderTop="1px solid white";
    varArray[iIndex].style.borderLeft="1px solid white";
    varArray[iIndex].style.borderRight="1px solid black";
    varArray[iIndex].style.padding="3px";
    varArray[iIndex].style.paddingTop="2px";
    varArray[iIndex].style.background=varBgColor;
    varArray[iIndex].style.cursor="default";
    varArray[iIndex].onclick=open;
    varArray[iIndex].onselectstart=nothing;
    childNodes[iIndex].style.width=style.posWidth;
    childNodes[iIndex].style.borderTop="1px solid white";
    childNodes[iIndex].style.borderLeft="1px solid white";
    childNodes[iIndex].style.borderRight="1px solid black";
    childNodes[iIndex].style.borderBottom="1px solid black";
    childNodes[iIndex].style.background=varBgColor;
    childNodes[iIndex].style.position="absolute";
    childNodes[iIndex].style.padding="5px";
    }
    for(iIndex in varArray)
    {
    insertBefore(varArray[iIndex],varRule);
    if(iIndex>0)
    {
    nIndex=2;
    for(kIndex=0;kIndex<iIndex;kIndex++)
    {
    nIndex+=varArray[kIndex].clientWidth+4;
    }
    varArray[iIndex].style.posLeft=nIndex;
    }
    else
    {
    varArray[iIndex].style.posLeft=2;
    }
    varArray[iIndex].left=varArray[iIndex].style.posLeft;
    varArray[iIndex].style.zIndex=iIndex*2+1;
    childNodes[iIndex*2+1].style.height=style.posHeight-varArray[iIndex].clientHeight-2;
    childNodes[iIndex*2+1].style.posTop=varArray[iIndex].clientHeight+2;
    childNodes[iIndex*2+1].style.zIndex=iIndex*2;
    }
    }
    open(0);
    </SCRIPT>
    </PUBLIC:COMPONENT>引用:
    <html xmlns:page><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title></title>
    <style>
    page\:tab{behavior:urlTab.htc);}
    </style>
    <link rel="stylesheet" type="text/css" href="#">
    </head><body bgcolor="buttonface">
    <page:tab style="width:expression(document.body.clientWidth);height:expression(document.body.clientHeight);background:buttonface;">
        <page:frame text="任务">内容
        </page:frame>
        <page:frame text="控制">内容
        </page:frame>
        <page:frame text="其它选项">内容
        </page:frame>
    </page:tab>
    </body></html>增删改可以直接用tab的innerHTML输出控制就可以了.
      

  2.   

    楼上兄弟，Tab.htc 是个文件吗？引用是怎么回事？我应该怎么把它放到文件里，
    请把我所知当作0来看
      

  3.   

    Tab.htc就是一个文本文件.扩展名为htc,是HTML的控件形式.应用部分作为一个HTML文件就可以了.