一.htc的两种使用方式:
  1. 关联行为(Attach Behavior): IE 5.0以上支持, htc 技术出现的初衷. 主要目的是把对象复杂的样式变化包装起来,替代 javascript + css.
  2. 元素行为(Element Behavior): IE 5.5以上支持, htc 技术的高级应用. 主要目的是用htc创建html文件中的自定义标签(相当于jsp技术中自定义标签).

二.关联行为示例 (在Windows Xp, IE6.0中测试)

  1. 编写.htc文件. (style.htc)

<public:attach event="onmouseover" onevent="f_mouse_over()"/>

<public:attach event="onmouseout" onevent="f_mouse_out()"/>

<public:attach event="onclick" onevent="f_click()"/>

<public:method name="makeDisplay()"/>

<public:method name="makeUnDisplay()"/>

<script>

function f_mouse_over(){ //使字体显红色,位置右移5px

element.style.color="red";

element.style.posLeft+=5;

}

function f_mouse_out() { //使字体显蓝色,位置左移5px

element.style.color="blue";

element.style.posLeft-=5;

}

function f_click(){  //点击鼠标后变成辉光显示,可用onmousedown,onmouseup事件细化处理

element.style.color="red";

element.style.filter="glow(color=red,strength=2)";

}

function makeDisplay(){    //使该对象可见

element.style.display="block";

}

function makeUnDisplay(){  //使该对象不可见

element.style.display="none";

}

</script>

2.编写 html文件 (test.html)

<html>

<head>

<style>

.testStyle{

behavior:url(style.htc);

}

</style>

</head>

<body>

<div style="width:200px;height:200px" class="testStyle" id="testDiv">Test Text;Please move mouse on this area!</div><br/>

<button onclick="testDiv.makeDisplay();" name="display"/><button onclick="testDiv.makeUnDisplay();" name="no display"/>

</body>

</html>

3.说明: 理论上htc文件里可以用className修改对象的样式,用的是html里的样式,htc里面用style定义的样式不能用. 但是,修改了className后可能对象就不再与本htc样式关联,本htc样式对该对象就没有作用了.

三. 元素行为示例 (WindowsXp, IE6.0上测试)

  1. 编写.htc文件 (element.htc)

<public:component tagName="loginForm">

<public:property name="userName" value="用户名"/>

<public:property name="password" value="密码"/>

<public:property name="action"/>

<public:property name="firstStyle"/>  <!--用户名输入框的样式 -->

<public:property name="secondStyle"/>

<public:attach event="oncontentready" onevent="init()"/>

<public:method name="close"/>

<public:defaults tabStop=true  contentEditable=false canHaveHTML=true viewInheritStyle=false viewMasterTab=false/>

</public:component>

<style>

.name{
        
background-color:red;
       }

.pass{
        
background-color:blue;
      
}

</style>

<script>

var
_table;

function init(){

if (typeof(action)=="undefined" || action==null){

alert("Action property is missing!");

return;

}//action 属性必须
          
var
_form=document.createElement("<form></form>");
          
_form.action=action;

_table=document.createElement("<table></table>");
          
var oTr1=_table.insertRow();
          
var oTd1=oTr1.insertCell();
          
oTd1.innerText=userName+":";
          
var oTd2=oTr1.insertCell();
          
var _userName=document.createElement("<input
type=text></input>");
          
if (typeof(firstStyle)!="undefined" &&
firstStyle!=null){
            
_userName.className=firstStyle;
          
}
          
oTd2.appendChild(_userName);
          
var oTr2=_table.insertRow();
          
var oTd3=oTr2.insertCell();
          
oTd3.innerText=password+":";
          
var oTd4=oTr2.insertCell();
          
var _password=document.createElement("<input
type=password></input>");
          
if (typeof(secondStyle)!="undefined" &&
secondStyle!=null){
            
_password.className=secondStyle;
          
}
          
oTd4.appendChild(_password);
          
oTr3=_table.insertRow();
          
oTd5=oTr3.insertCell();
          
var _okBtn=document.createElement("<input
type=submit></input>");
          
oTd5.appendChild(_okBtn);
          
oTd6=oTr3.insertCell();
          
var _resetBtn=document.createElement("<input
type=reset></input>");
          
oTd6.appendChild(_resetBtn);

_form.appendChild(_table);

document.body.appendChild(_form);

defaults.viewLink=document;

}

function close(){ //调用时删除自身
          
var allEle=document.body.childNodes;
          
for (var i=0;i<allEle.length;i++){
            
document.body.removeChild(allEle[i]);
          
}
        }

</script>

<body></body>

二.编写.html 文件 (test.html)

<html>
      
<head>
       
<?xml:namespace prefix="custom"/>
       
<?IMPORT NAMESPACE="custom"
IMPLEMENTATION="element.htc"/>

<style>
        
.name{
          
color:red;
        
}
        
.pass{
          
color:blue;
        
}
     
 </style>
     
</head>
     
<body>
       
<custom:loginForm action="/login.do" id="aaa" firstStyle="name"
secondStyle="pass"></custom:loginForm><br/>
      
 <input type="button" onclick="aaa.close();"
value="删除登录框"/>
    
</body>
    
</html>

3.说明: 在htc里用javascript生成的元素可以加在自定义控件中(用document.body.appendChild()),也可以直接加在主html文件中(用window.document.body.appendChild()).
(htc文件和宿主html文件共用一个window对象,所以htc可以直接控制html文件)

4.htc官方msdn文档:htc参考

htc使用方式(转)的更多相关文章

  1. IE兼容性问题汇总【持续更新中】

    问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...

  2. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  3. 基于AngularJS的企业软件前端架构[转载]

    这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...

  4. 如何透过HTC Vive拍摄Mixed Reality （混合现实）影片

    https://www.vive.com/cn/forum/1706?extra=page%3D1 也许你是一位开发者,想为自己的HTC Vive游戏制作酷炫的宣传片:或者你是游戏主播,想为观众带来高 ...

  5. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  6. Android自动化学习笔记：编写MonkeyRunner脚本的几种方式

    ---------------------------------------------------------------------------------------------------- ...

  7. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  8. [转]史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  9. 用Unity开发HTC VIVE——手柄控制篇

    写这篇文章的原因主要是因为现在虚拟现实非常的火爆但目前主流的虚拟现实设备(HTC VIVE)的教程却少的可怜,这个我深有体会.所以,我想将我平时开发中遇到的问题以及解决方法记录下来,分享给大家,若其中 ...

随机推荐

  1. mysql库安装

    如果缺少<mysql/mysql.h> 先安装mysql,然后apt-get install libmysqlclient-dev即可

  2. solr、Lucene、IKAnalyzer这三者关系是怎样的？

    lucene 是开源搜索引擎 solr 是基于 lucene开发的搜索引擎 IK 是中文分词. lucene 不是一个搜索引擎,只是一个基础的文件索引工具包,或者叫“搜索引擎开发包”.不能单独作为程序 ...

  3. 04_Apache Hadoop 生态系统

    内容提纲: 1)对 Apache Hadoop 生态系统的认识(Hadoop 1.x 和 Hadoop 2.x) 2) Apache Hadoop 1.x 框架架构原理的初步认识 3) Apache ...

  4. 【bzoj5055】膜法师（离散化+树状数组）

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=5055 这道题……不得不说,从标题到题面都能看出一股浓浓的膜法气息……苟…… 题意就是统计顺序 ...

  5. js限制输入内容

    1,限制输入正整数 onkeyup="value=value.replace(/[^\d]/g,'')" 2,限制输入为数字,包括小数(有瑕疵) onkeyup="val ...

  6. Hibernate 关于实体映射常用注解

    注解 类注解(写在类上面的) @Entity       标明实体类 @Table(name="数据库标明")      生成数据库时的表名由这个决定 @DynamicInsert ...

  7. Spring Boot入门——邮件发送

    1.引入依赖 <!-- mail依赖 --> <dependency> <groupId>org.springframework.boot</groupId& ...

  8. python基础6 - while 循环与转义字符

    8. while 循环基本使用 8.1 while 语句基本语法 初始条件设置 —— 通常是重复执行的 计数器 while 条件(判断 计数器 是否达到 目标次数): 条件满足时,做的事情1 条件满足 ...

  9. Android在layout xml中使用ViewStub完成动态加载

    Android在layout xml中使用ViewStub完成动态加载 一.Layout XML文件常见的两种模块加载方式 1.静态加载:被加载的模块和其它模块加载的时间一样. <include ...

  10. 【疯了Labview】（一）仿JKI的RCF 挂件

    最近在疯狂的学习C#中,学习的最好的一个途径便是论坛,发帖,看帖和被骂,新手往往在这个过程中慢慢长大一直想做个类似JKI RCF挂件的东西,目前实现了,想想其实思路也不是很难, RCF是JKI做的通过 ...