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

原创 2004年07月15日 10:12:00

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>

三分钟用Unity3D开发第一个HTC VIVE的VR程序

三分钟用Unity3D开发第一个HTC VIVE的VR程序
  • caodongfang126
  • caodongfang126
  • 2017年01月06日 09:57
  • 3774

使用VS2010开发ActiveX(MFC)控件(3)——添加接口及WEB调用

上一节实现了控件在页面中的加载及界面显示,这一节开始在上一节的基础上添加接口供WEB调用。 手动在CMainDlg.h中添加一方法: public:          LONG SetPar...
  • haoxingfeng
  • haoxingfeng
  • 2014年04月28日 21:15
  • 3010

HTCVive VR开发场景事件交互指南

与场景互动Vive手柄介绍除了视野和位置的控制是由头盔完成,Vive的主要输入方式是通过手柄。手柄在输入方面一是提供手的定位和定向,使得玩家的双手的位置、手柄的方向、手心的朝向都可以体现在VR中;二是...
  • u012519228
  • u012519228
  • 2017年02月17日 20:13
  • 1586

自定义tab控件的经典源码,非常好用,调试通过并已经应用于专业工具中

  • 2008年08月30日 12:38
  • 31KB
  • 下载

VB tab控件的应用例子

  • 2008年11月05日 16:24
  • 3KB
  • 下载

tab控件的应用(MFC)

  • 2011年12月03日 10:30
  • 47KB
  • 下载

VC2008 Tab Control控件的应用(附源码)

首先,新建一个基于对话框的MFC应用程序,添加Tab Control控件,并为其添加变量CTabCtrl m_tab; 然后,新建两个对话框,均设置属性如下(这步很重要):Style--Child,...
  • u010987339
  • u010987339
  • 2014年01月10日 09:54
  • 519

android应用开发--------------看RadioGroup源码,写类似单选选项卡的集成控件(如底部导航,tab等等)

博客为 有时个哥 原创,如需转载请标明出处: 上面就是需求设计,4个类似的布局控件,每次只能选择一个,然后得到上面对应的钱数。(上面只是效果图,实际数据是从服务器获取,然后付到控件上) 看到这种,我...
  • ls703
  • ls703
  • 2015年06月30日 15:14
  • 2137

MFC中属性表单,向导,Tab控件演示实例

刚刚学习MFC编程不久,指导师兄交代了几个小任务,现将自己的工作再梳理一面,以加深印象! 达到的目的是这样的,在第一个和第二个页面各输入一个值,再把这两个值求和的结果输入到第三个页面中来。共用三种方法...
  • dby3579
  • dby3579
  • 2015年03月09日 15:25
  • 760

Web端的Tab控件在切换Tab时Load数据出错的处理

我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错...
  • jcx5083761
  • jcx5083761
  • 2013年11月21日 14:20
  • 2850
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web上的Tab控件的HTC及应用演示
举报原因:
原因补充:

(最多只允许输入30个字)