添加一个属性的setter, getter
建立一个页面
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
input{
behavior: url(bordercolor_htc.htc);
}
</style>
<script>
window.onload = function() {
var el = document.getElementById("tid")
el.borderColor = "red";
alert(el.borderColor)
}
</script>
</head>
<body>
<div>
<input type="text" id="tid" value="司徒正美" />
</div
</body>
</html>
建议一个htc文件,与刚才的页面放在同一页面上
<public:component>
<public:property name="borderColor" get="getBorderColor" put="setBorderColor" />
<script type="text/javascript">
function setBorderColor(vValue) {
element.style.border = "1px solid "+ vValue
} function getBorderColor() {
return element.style.borderColor +"~!"
}
</script>
</public:component>
上面的可以精简成这样
<component>
<property name="borderColor" get="getBorderColor" put="setBorderColor" />
<script>
function setBorderColor(vValue) {
element.style.border = "1px solid "+ vValue
} function getBorderColor() {
return element.style.borderColor +"~!"
}
</script>
</component>
绑定事件
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h1{
behavior: url(hover_htc.htc);
}
</style>
<script> </script>
</head>
<body>
<div>
<h1>司徒正美</h1>
</div
</body>
</html>
对应的HTC
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
this.style.color = "red"
}
function out() {
this.style.color = "blue"
}
</script>
</component>
上面的this可以省略或改成element
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
还可以进一步精简成这样
<component>
<attach event="onmouseover" handler="over" />
<attach event="onmouseout" handler="out" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
HTC专用元素
Attach:将来自组件容器的事件绑定到该组件
Component:在HTC文件中使用,以将其定义为一个组件
Event:由HTC使用,以便展示给它的容器的事件
Method:组件的一个公共过程,它被展示给该组件的容器
Property:组件的公共属性
Note:除了Attach元素外,(Attach元素没有Name属性)每个元素都有Name属性和ID属性.包含文档使用Name属性来引用相应元素,ID属性用来在HTML组件本身中引用相应元素
各个元素用法:
1.Attach
<PUBLIC:ATTACH Event = "eventName" for = "document" onEvent="eventHandle" ID="sID" />
属性说明:
Event:指定一个DHTML事件的名称或者将任意事件的名称指定给一个HTC(必需属性)
For:标识事件的来源.其取值如下所示:document是指HTML文档的文档对象;element是指附加了行为的元素(默认);windows是指浏览器的窗口对象
onEvent:当触发事件或者处理内嵌脚本时,指定将调用的函数名称
ID:为组件的附加元素指定了唯一的标识符
2.Compent
<PUBLIC:COMPONENT NAME ="name" ID="ID" URN ="urn"></PUBLIC:COMPONENT>
属性说明
Name:指定用来在包含文档中所引用的行为的名称
ID:为组件中的组件元素指定唯一标识符
URN:指定唯一的标识组件的"统一资源名称"(Uniform Resource Name,URN)
Note:msdn上的COMPONENT元素不止这几个属性,特别是IE6.0有扩充,具体可以察看
3.DEFAUTLS(IE5.5以后支持)
可以使用DEFAULTS元素来设置HTC的默认属性值,这个元素及其每一个属性都是可选的.
<PUBLIC:DEFAULTS tabStop="true/false" style="sStyle"
contentEditable = "true/false" canHaveHTML = "true/false"
viewInheritStyle = "true/false" viewMasterTab = "true/false"
viewLinkContent = "true/false">
属性说明
tabStop:指定是否可以在父容器页中按Tab键定位到组件.默认值是false
style:指出用来指定HTC定义标签的样式的字符串
contentEditable:设置用户是否可以编辑内容.在默认情况下,HTC将根据其父容器是否拥有允许用户编辑内容的能力来从其父容器中继承这个属性.不论其父容器页的能力如何,都可以将这个属性设置为false来禁用编辑功能.将这个值设置为ture可以启用内容编辑,但仍然会受到其父容器能力的限制
canHaveHTML:指定HTC标签的内容是否能够包含HTML标记
viewInheritStyle:指定HTC标签的内容是否能够包含HTML标记
viewMasterTab:指定HTC的主元素是否是主文档的Tab键顺序的一部分.
viewLinkContent:指定是否将HTC的标记用作ViewLink.默认值是false
4.EVENT
<PUBLIC:EVENT NAME="name" ID="eventID">
属性说明
Name:指定向包含文档展示的事件的名称.(必须属性)
ID:为组件中的事件元素指定唯一的标识符
5.METHOD
<PUBLIC:METHOD Name="name" InternalName = "internalName" ID="ID" />
属性说明
Name:指定包含文档用来调用方法的名称,如果没有指定内部名称,那么在调用该方法时,这就是被调用函数的名称(必须属性)
ID:为组件中的事件元素指定唯一的标识符
InternalName:在调用方法时,指定将在组件内部调用的函数的可选名称
5.PROPERTY
<PUBLIC:PROPERTY Name="name" ID="id" InternalName = "internalName" Get="getFunctionName" Put="putFunctionName" Persist="persist" Value="defaultValue">
属性说明
Name:指定向包含文档展示的属性的名称.(必须属性)
ID:为组件中的属性元素指定唯一的标识符
InternalName:指定在组件中引用属性所使用的名称
Get:指定无论何时检索属性值时都调用的函数
Put:指定在设置属性值时调用的函数
Persist:指定是否将属性保留为页面的一部分
Value:指定属性的默认值
Note:如果该元素只有get功能,那么该属性在公共接口中就是只读的,反之如果只有put功能,则表示这个属性在公共接口中就是只写的.
HTC方法
createEventObject()
说明:创建一个DHTML事件对象,在调用fire方法时,可以使用这个对象来将事件信息传递到包含文档
eventID.fire([eventObject])
说明:将一个事件触发到容器,只能触发组件的<event>元素中指定的事件,允许将一个事件对象传递到包含该事件细节的事件对象中,而不只是触发事件.eventID包含想要触发的事件的ID
HTC事件
oncontentready:在浏览器解析该行为所属的元素时触发
oncontentsave:在复制或者保存到identity行为的元素内容之前触发
ondetach:在从行为所属的元素中删除行为之前触发
ondocumentready:在已经解析了包含页面之后触发.该事件将在下载完页面上的脚本、图像、Microsoft ActiveX控件和其他元素之后触发,这个事件将在触发window.onload事件之后触发
另外还有3个HTC对象
defaults:用来通过程序设置Element行为上的默认行为,所有属性同前面的defaults元素
document:此对象提供了对Element行为中的基本标记的程序访问,该对象的成员于DHTML DOM文档对象的成员相同
element:此对象提供了对行为所绑定到的基本元素的程序访问
Note:defaults和document对象只适合于IE5.5以后版本
注:资料来自windows web脚本开发指南
ps:不知道什么时候抄的了,偶然翻到,希望有用