HTC学习笔记

添加一个属性的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:不知道什么时候抄的了,偶然翻到,希望有用

HTC学习笔记的更多相关文章

Android自动化学习笔记：编写MonkeyRunner脚本的几种方式
---------------------------------------------------------------------------------------------------- ...
【学习笔记】移动Web手册（PPK力作）
又是好久没写博客了,最近把近半年的总结,全部总结到博客园吧.先写最近的一个移动端的学习笔记.毕竟移动端开发了一段时间,就写一写读<移动web手册>中,对我感触比较深的几个点—— 一.浏览器 ...
【转】Pro Android学习笔记（二）：开发环境：基础概念、连接真实设备、生命周期
在Android学习笔记(二):安装环境中已经有相应的内容.看看何为新.这是在source网站上的Android架构图,和标准图没有区别,只是这张图颜色好看多了,录之.本笔记主要讲述Android开发 ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
2014年暑假c#学习笔记目录
2014年暑假c#学习笔记一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

云计算的三种服务模式:SaaS/PaaS/IaaS
转载http://blog.chinaunix.net/uid-22414998-id-3141499.html 定义云计算主要分为三种服务模式,而且这个三层的分法重要是从用户体验的角度出发的: S ...
Mysql 主从热备份
工作原理首先锁定并备份主服务器数据库,从服务器导入备份的数据库,实现两个数据库的初态一样.然后把主服务器上执行过的sql语句都记录到二进制日志 Binarylog 中,从服务器会来读取这个log, ...
【2016-11-3】【坚持学习】【Day18】【我认识的ORM】
我学过或者用过的ORM有几种 EF NHibernate DevExpress xpo (第一家公司用这个,也是很省力的orm,现在已经不记得了.) 今天晚上想找一下有没有轻量级的orm: flue ...
Utils
import org.apache.commons.beanutils.BeanUtils; import org.apache.commons.collections.CollectionUtils ...
knockoutJS学习笔记04：监控属性
一.语法介绍先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...
点击按钮后到底发生了什么，Touch，LongClick或者Click?
按钮点击事件详解最近一个项目需要给应用初始界面上的动态按钮添加在不同状态的变换效果,如点击(俗一点也可称为按压)后实现背景图的更换或者图标的缩放等效果.由于按钮点击的时间有长有短,所以采用OnTou ...
SQL 常用操作
今天网龙笔试遇到了几个SQL题,现在顺便就总结一下常用的SQL操作. 内连接:只将符合条件的行显示出来 SELECT s.name,m.mark FROM student s,mark m WHERE ...
SharePoint远程发布Solution
1.在本地修改好代码,选择publish,将.wsp文件保存到本地: 2.将wsp文件上传到目标网站,停止原解决方案并删除,上传新解决方法并且激活: 停止原来的解决方案上传解决方案 3.激活Solu ...
jquery版的全选，全不选和反选
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
前台checkbox复选框提交到后台处理
前台 <input type="hidden" id="tempString" name="tempString" /> < ...

HTC学习笔记

HTC学习笔记的更多相关文章

随机推荐

热门专题