htc学习

原创 2005年05月16日 16:55:00

初识HTC

HTCHTML Component的缩写,是IE5及后续版本浏览器所支持的客户端组件。据我个人理解,HTC就是一组以DHTML为基础封装了客户端行为的脚本,每HTC*.htc的文件存储,一个HTC是一个客户端“类”。

编写HTC最重要的一点是知道element对象的意思,它代表了当前的HTC,类似于C#类中的this。例如element.innerHTML可以访问当前HTC对象在document中所包含的html代码。既然HTC是“类”,它当然有属性、方法、事件,下面简要说明其定义方式:

l         <PUBLIC:COMPONENT></PUBLIC:COMPONENT>:定义HTC,这个标签是其他定义的父元素。

l         <PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” /> 定义HTC的属性,里面三个定义分别代表属性名、读取属性、设置属性时HTC所调用的方法。

l         <PUBLIC:METHOD NAME=”mName” />:定义HTC的方法,NAME定义了方法名。

l         <PUBLIC:EVENT NAME=”eName” ID=”eId” />:定义了HTC的事件,NAME定义了事件名,ID是个可选属性,在HTC中唯一标识这个事件。

l         <PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />:定义了浏览器传给HTC事件的相应方法,其中EVENT是浏览器传入的事件,ONEVENT是处理事件的方法。

常用的HTC定义就这么多,有关更详细的信息,请参阅http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp,英文d,嘿嘿。

我们经常看到某些网页上有这样的效果:用户点击一个按钮,文本显示,再次点击这个按钮,文本消失,但浏览器并不刷新。下面我就用HTC来实现这个简单效果。编程思路是这样的:用HTC模拟一个开关,它有”on””off”两种状态(可读/写属性status);用户可以设置这两种状态下开关所显示的文本(设置属性 turnOffTextturnOnText);用户点击开关时,开关状态被反置,并触发一个事件(onStatusChanged)通知用户,用户可以自己写代码来响应这个事件;该HTC还定义了一个方法(reverseStatus),用来反置开关的状态。下面是这个HTC的代码:

<!—switch.htc定义 -->

<PUBLIC:COMPONENT TAGNAME="Switch">

    <!--属性定义-->

    <PUBLIC:PROPERTY NAME="turnOnText" PUT="setTurnOnText" VALUE="Turn on" />

    <PUBLIC:PROPERTY NAME="turnOffText" PUT="setTurnOffText" VALUE="Turn off" />

    <PUBLIC:PROPERTY NAME="status" GET="getStatus" PUT="setStatus" VALUE="on" />

    <!--定义事件-->

    <PUBLIC:EVENT NAME="onStatusChanged" ID="changedEvent" />

    <!--定义方法-->

    <PUBLIC:METHOD NAME="reverseStatus" />

    <!--关联客户端事件-->

    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="initialize()"/>

    <PUBLIC:ATTACH EVENT="onclick" ONEVENT="expandCollapse()"/>

</PUBLIC:COMPONENT>

<!-- htc脚本 -->

<script language="javascript">

    var sTurnOnText;  //关闭状态所显示的文本

    var sTurnOffText;  //开启状态所显示的文本

    var sStatus;    //开关状态

    var innerHTML      //使用开关时包含在开关中的HTML

   

    //设置开关关闭状态所显示的文本

    function setTurnOnText(value)

    {

        sTurnOnText = value;

    }

 

    //设置开关开启状态所显示的文本

    function setTurnOffText(value)

    {

        sTurnOffText = value;

    }

   

    //设置开关状态

    function setStatus(value)

    {

        sStatus = value;

    }

 

     //读取开关状态

    function getStatus()

    {

        return sStatus;

    }

   

    //反向开关的状态

    function reverseStatus()

    {

       sStatus = (sStatus == "on") ? "off" : "on";

    }

    //获取htc控制界面html文本

    function getTitle()

    {

        var text = (sStatus == "on") ? sTurnOffText : sTurnOnText;

       text = "<div id='innerDiv'>" + text + "</div>";

       return text;

    }

 

    //htc初始化代码

    function initialize()

    {

       //back up innerHTML

       innerHTML = element.innerHTML;

       element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();

    }

 

    //响应用户鼠标事件的方法

    function expandCollapse()

    {

       reverseStatus();

       //触发事件

       var oEvent = createEventObject();

       changedEvent.fire(oEvent);

      

       var srcElem = element.document.parentWindow.event.srcElement;

       if(srcElem.id == "innerDiv")

       {

           element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();

       }

    }

</script>

下面是如何使用这个HTC,注释写的比较清楚了,不再多解释了!

 

<!--learnhtc.html-->

<html xmlns:frogone><!--定义一个新的命名空间-->

<head>

       <!--告诉浏览器命名空间是由哪个HTC实现的-->

       <?IMPORT namespace="frogone" implementation="switch.htc">

</head>

<body>

   <!--设置开关的各个属性及内部包含的内容-->

   <frogone:Switch id="mySwitch"

                                   TurnOffText="off"

                                   TurnOnText="on"

                                   status="off"

                                   onStatusChanged="confirmChange()">

        <div id="dBody">文本内容...... </div>

    </frogone:Switch>

</body>

<script language="javascript">

       //相应开关事件

       function confirmChange()

       {

              if(!confirm("是否改变开关状态?"))

                     mySwitch.reverseStatus();

       }

</script>

</html>

如何在htm文件中调用.htc文件中的js函数

如何在htm文件中调用.htc文件中的js函数 Reader_1 »             TABLE   {     width:100%;     }     TD   {     text...
  • jiangxng
  • jiangxng
  • 2008年04月22日 09:12
  • 1097

HTC Vive的Lighthouse工作原理

在虚拟现实(VR)这样一个新兴产业里,获得了最多注目的自然是明星公司Oculus。很多人都体验过Oculus Rift,知道VR头显会是一种什么样的体验。但是由Valve和HTC合作而开发的Vive,...
  • liulong1567
  • liulong1567
  • 2016年03月09日 10:25
  • 12340

HTC ruu 解密 工具编译 提取解密key 自行解密 流程记录

熟悉ruuveal的同学自然熟悉本文 编译ruuveal工具: 下载源码: https://github.com/kmdm/ruuveal/ 编译流程 1) sudo apt-g...
  • kylevast
  • kylevast
  • 2015年08月13日 17:58
  • 2176

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

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

[HTC教程] HTC相关开发所需SDK等工具都在这里了。

OpenVR SDK https://github.com/ValveSoftware/openvr  OpenVR SDK是由原本的SteamWorks SDK更新而来,新增对HTC VIVE开...
  • shenshen211
  • shenshen211
  • 2016年07月01日 13:44
  • 4648

HTC国行获取Google服务框架方法-最简

Gmail什么的都得用到谷歌的服务框架但是官方固件里边都没有……其实你只要打开HTC商城,搜索GMS安装器,安装好之后打开,然后会提示你再拨号盘输入*#*#442#*#*,输完了它会自动重启进reco...
  • invLong
  • invLong
  • 2015年11月09日 10:00
  • 1017

HTC Vive Unity 教程

原文:HTC Vive Tutorial for Unity 作者: Eric Van de Kerckhove 译者:kmyhy HTC Vive 是一个虚拟现实头盔,由 HTC 和 ...
  • kmyhy
  • kmyhy
  • 2017年04月06日 13:45
  • 11268

HTC vive开发:关于手柄按键

一、关于左右手柄的对应关系 两个手柄和SteamVR_TrackedObject.EIndex是对应的,一个是EIndex.Device2,另一个是EIndex.Device3(有编号的那个)在...
  • qiaochaoqc
  • qiaochaoqc
  • 2016年08月01日 16:27
  • 2670

HTC Vive 激光线+选中边缘高亮效果

准备场景如下: 之前有详细讲解过激光线效果,不会的可以看看下面地址文章: http://blog.csdn.net/qq_15267341/article/details/53379523本篇文章...
  • qq_15267341
  • qq_15267341
  • 2016年12月02日 10:29
  • 1029

什么是HTC文件

在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复...
  • shineHoo
  • shineHoo
  • 2010年04月12日 09:27
  • 1171
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:htc学习
举报原因:
原因补充:

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