Web上的Tab控件的HTC及应用演示
2004-07-15 10:12
495 查看
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].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>
<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].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>
相关文章推荐
- 系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab
- 【华磊原创】原创分享-在Asp.net下实现变长连接的web即时应用的实现范例及ReverseAjax的演示介绍
- Web控件tbSkin主题的应用
- 在WEB下的客户端控件+Activex控件的开发应用
- [VB][测试技术应用]VB与IE交互实现WEB画面的自动测试(用VB填写IE中控件的内容和提交表单)
- 使用Jasperreport作为报表控件开发Web 报表应用
- 系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chronometer, ScrollView
- 使用QuickPart时应用自定义属性和Web Part Connection功能的演示视频
- win8应用商店程序开发-WebView控件
- 在Asp.net下实现变长连接的web即时应用的实现范例及ReverseAjax的演示介绍
- 使用Dundas控件在web应用上展现多维数据集
- 系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chrono
- 在ASP.NET WEB控件中应用样式(Style)[转]
- AJAX技术与asp.net 2.0的完美结合之Timer的web应用 及使用AJAX控件时的“Sys 未定义”错误解决办法
- (原创)OpenDialog控件在WEB上的应用
- 在ASP.NET WEB控件中应用样式(Style)
- 在Asp.net下实现变长连接的web即时应用的实现范例及ReverseAjax的演示介绍
- C#在WinForm和Web中实现回车键代替TAB键切换控件焦点
- 使用QuickPart时应用自定义属性和Web Part Connection功能的演示视频
- Web FarPoint控件的应用: