求Tab控件:能动态添加删除页签,谢

fangcheng 2004-06-07 10:17:39
求Tab控件:能动态添加删除页签(提供AddPage, DelPage之类的方法

万分感谢
...全文
503 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
fangcheng 2004-06-07
  • 打赏
  • 举报
回复
楼上兄弟,Tab.htc 是个文件吗?引用是怎么回事?我应该怎么把它放到文件里,
请把我所知当作0来看
gjd111686 2004-06-07
  • 打赏
  • 举报
回复
最简单的:
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输出控制就可以了.
fangcheng 2004-06-07
  • 打赏
  • 举报
回复
要实现的功能:在浏览器中用javascript设计界面,功能需求如下:
浏览器左边树每个节点对应一个页面,点击一个节点,则在右边的Tab上增加一个页签并抬前(如果已经存在对应的页签项则仅抬前),然后在页签下面显示树节点的链接页面;另,Tab 每个页签有个关闭钮,选择关闭则去除此项,同时关闭下面的页面,将下一个Tab项的页面打开。
(如果需要,可以在点击树节点时,传参节点名称、节点的连接)
附加功能:Tab 页签多了,能有个左右钮移动显示,如果认为不好做,就算了。

相关参考:
TabStrip应用例子 (关键字:TabStrip)
http://dev.csdn.net/develop/article/15/15124.shtm

WebFXTabPane、WebFTabXPage
http://webfx.eae.net (这个站点我昨天还很好连,今天就难连了,版面也变了)(demo见附件"Tab_Pane_Demo.jpg" 改jpg为 rar )
---以上例子不知道怎么调用提供的API动态增加页签,我对弱类型语言还不适应,且不知道怎么获得其对象的属性等东东  :)  ------


请各位大虾帮帮忙,我刚接触脚本不久,几日来头绪全无,乃至寝食难安,不得已恳请各位大虾出手相助,感激不尽(本人语法尚未学好,且对javascript操作标签知之甚少,所以还请大侠对定义的方法做个详细的能动态添加页签的例子,谢谢)
fangcheng 2004-06-07
  • 打赏
  • 举报
回复
各位老大,给份控件源码、使用示例,谢谢了
gjd111686 2004-06-07
  • 打赏
  • 举报
回复
Tab.htc就是一个文本文件.扩展名为htc,是HTML的控件形式.

应用部分作为一个HTML文件就可以了.

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧