htc学习
来源:互联网 发布:阿里云 按流量付费 编辑:程序博客网 时间:2024/05/16 17:19
初识HTC
HTC是HTML 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);用户可以设置这两种状态下开关所显示的文本(设置属性 turnOffText和turnOnText);用户点击开关时,开关状态被反置,并触发一个事件(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>
- htc学习
- HTC技术学习之旅
- htc
- htc
- htc
- htc
- 学习htc文件的相关中文资料
- 学习htc的两个好去处
- HTC介绍
- HTC介绍
- 初识HTC
- HTC参考
- HTC介绍
- HTC小注
- HTC入门
- HTC教程
- HTC介绍
- HTC教程
- 数据库暴库整理篇[收藏]
- asp.net 连接数据库基础
- JAVA开发者应该去的20个英文网站
- 打字测试
- 终于能用了
- htc学习
- openmosix+freeswan配置全攻略
- 警告!出门要穿防弹衣!
- 心情如水情如沙
- 说说Perl和PHP的长短
- 我是瞌睡虫
- 倒霉。。。倒霉。。。。。
- 在Struts框架下大型Web应用程序的开发 广东精鹰软件工作室(刘正仁)
- Linux下的设备驱动程序的编写