Web上的Tab控件的HTC及应用演示

Tab控件.htm

<html xmlns:page>
<head>
<title></title>
<style type="text/css">
    page/:tab {behavior:url(Tab.htc);}
</style>
</head>
<body bgcolor="ButtonFace">
<page:tab style="width:300px; height:150px; background:ButtonFace; font:9pt; color:black; text-align:left;">
    <page:frame text="设定一">内容
    </page:frame>
    <page:frame text="设定二">内容
    </page:frame>
    <page:frame text="其它选项">内容
    </page:frame>
</page:tab>
</body>
</html>

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].οnclick=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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值