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>

动态添加Tab控件

TabCtrl控件可以通过对话框方式直接采用控件静态添加,但是有时候需要去动态创建一个TabCtrl控件,本文是在CFormView上动态创建TabCtrl控件: 一、Tab控件的动态添加 1、添...
  • cjjwwss
  • cjjwwss
  • 2014年02月11日 11:33
  • 1823

iPhone 4 实现 HTC Sense 时钟动画天气

最近在台湾的论坛上看到了HTC风格的动态桌面HTC Weather clock (HTCAniPPH)这篇教程,我给大家做了个整理,比较适合国内的iphone朋友们使用。 请先看效果图:   ...
  • DavidHsing
  • DavidHsing
  • 2011年08月27日 02:00
  • 17439

怎么向tab control中加其它控件(如文本框等)

1、首先创建一个MFC对话框框架,在对话框资源上从工具箱中添加上一个Tab   Control   控件,根据需要修改一下属性,然后右击控件,为这个控件添加一个变量,将此控件跟一个CTabCtrl类变...
  • ecjtuync
  • ecjtuync
  • 2007年09月03日 19:32
  • 2022

包含tab控件时,,如何让子控件跟随对话框大小变化(上)

这篇文章的生成,是在另一篇的基础上生成的,同时也是这篇博客的说明,令我修改为自己需要的类型。 该博客地址:控件随着窗口大小变化 然后说明下我的实际应用,在项目中,添加了一个tabctrl,通过其切...
  • youxidonxx
  • youxidonxx
  • 2012年09月17日 11:42
  • 2173

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

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

在WEB应用中htc文件为何不能被引用或执行

有人在weblogic6.0  或Websphere或 Jrun 或tomcat或Jboss的某些版本可能遇到使用htc文件时不能正确引用或调用的情况:原因为: Web应用服务器对就些文件类型不知以何...
  • ktyl2000
  • ktyl2000
  • 2008年11月28日 18:02
  • 1092

VS2013/MFC编程入门之三十一(常用控件:标签控件Tab Control )

前面两节讲了树形控件Tree Control,本节开始讲解标签控件Tab Control,也可以称为选项卡控件。        标签控件简介        标签控件也比较常见。它可以把多个...
  • zhaoyinhui0802
  • zhaoyinhui0802
  • 2016年12月03日 23:08
  • 3790

【.Net码农】在 Web 窗体上报表查看器 Web 控件需要 System.Web.UI.ScriptManager

http://zhidao.baidu.com/link?url=NnmMx5Yh1qPWdEdezHznf8NUkSKa_ZwypHrBALz3MDIyWOTgbqvMzRtZEEJVw7k46BU...
  • CrackLibby
  • CrackLibby
  • 2015年07月15日 15:44
  • 1745

如何向Vive Port中上传htc vive应用

一、导出可执行文件 1、File-->Build Settings-->设置信息-->Build  二、上传到Vive Port 1、打开vive port官网,注册并登录https://deve...
  • nicolelili1
  • nicolelili1
  • 2017年09月10日 23:51
  • 363

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

三分钟用Unity3D开发第一个HTC VIVE的VR程序
  • caodongfang126
  • caodongfang126
  • 2017年01月06日 09:57
  • 4195
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web上的Tab控件的HTC及应用演示
举报原因:
原因补充:

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