htc使用方式(转)
- 关联行为(Attach Behavior): IE 5.0以上支持, htc 技术出现的初衷. 主要目的是把对象复杂的样式变化包装起来,替代 javascript + css.
- 元素行为(Element Behavior): IE 5.5以上支持, htc 技术的高级应用. 主要目的是用htc创建html文件中的自定义标签(相当于jsp技术中自定义标签).
二.关联行为示例 (在Windows Xp, IE6.0中测试)
- 编写.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上测试)
- 编写.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使用方式(转)的更多相关文章
- IE兼容性问题汇总【持续更新中】
问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- 基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
- 如何透过HTC Vive拍摄Mixed Reality （混合现实）影片
https://www.vive.com/cn/forum/1706?extra=page%3D1 也许你是一位开发者,想为自己的HTC Vive游戏制作酷炫的宣传片:或者你是游戏主播,想为观众带来高 ...
- CSS hack方式一览【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- Android自动化学习笔记：编写MonkeyRunner脚本的几种方式
---------------------------------------------------------------------------------------------------- ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 用Unity开发HTC VIVE——手柄控制篇
写这篇文章的原因主要是因为现在虚拟现实非常的火爆但目前主流的虚拟现实设备(HTC VIVE)的教程却少的可怜,这个我深有体会.所以,我想将我平时开发中遇到的问题以及解决方法记录下来,分享给大家,若其中 ...
随机推荐
- Oracle网络服务管理与配置
一.Oracle网络服务概述 1.网络解决方案. (1)可连接性:在Oracle中,由Oracle net组件负责在客户端应用程序与数据服务器之间创建会话.维护会话连接和数据传输. (2)可管理性: ...
- Shell编程之运算
一.变量的数值计算 1.算术运算符 常用的运算符号 常用的运算命令 (1)双小括号 基本语法 1)利用"(())"进行简单运算 [root@codis-178 ~]# echo $ ...
- Complex social network Partition for Balanced Subnetworks---Hao Lan Zhang,Jiming Liu,Chunyu Feng,Chaoyi Pang,Tongliang Li,Jing He阅读
摘要:Abstract—Complex social network analysis methods have been applied extensively in various domains ...
- python进阶03
进程线程不管哪门语言都是一块可以被重视的方向,下面一起学习学习python中的进程,线程 1.进程线程区别 通俗解释:一个程序QQ的运行就是一个进程运行:QQ中打开多个页面互不影响可以同时操作的每个页 ...
- Java 通过JDBC连接Mysql数据库的方法和实例【图文说明】
JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...
- review08
所谓异常就是程序运行时可能出现的一些错误,比如试图打开一个根本不存在的文件等,异常处理将会改变程序的控制流程,让程序有机会对错误做出处理. 各个catch参数中的异常类都是Exception的某个子类 ...
- js的set和get
'use strict' class Student { constructor(_name,age){ this.name = _name; this.age = age; } set name(_ ...
- windows live writer 设置默认字体
下载 Text Template 插件 设置默认字体添加模版. <p style="padding-bottom: 0px; line-height: 130%; margin-t ...
- U14739 X ask Y III 子区间异或和
题意:就是求所有子区间的异或和的和 题解:就是算每一位对结果的贡献(最近好像遇到很多次这种题目),先前缀异或,从左向右扫记录二进制前缀的1,0个数,xor[i]==xor[j]^1的时候就加上这一位的 ...
- Switching from Redhat Linux to Oracle Linux in about 5,000 easy steps
Wayback When I remember being at Oracle Open World when Larry Ellison unveiled Oracle Enterprise Lin ...