HTC经典实例(一)

转载 2006年06月13日 16:08:00

1.摘要
本文在实例的基础上讨论了HTC(HTML Component)的编程方法,提出了一种编写脚本组件的基本模式。
2.目标读者
HTML开发人员,脚本开发人员,系统分析人员
3.背景知识
HTML, DHTML, CSS
4.引言
HTC(HTML Component)直译为HTML组件,并不是一项新技术。可是说谈不上是一门技术。实际上只是IE浏览器内置的一种脚本封装机制。由于讨论的人很少,而Microsoft也没有什么技术支持,故而应用的人很少。但是HTML有着很好的特性可以使我们的开发工作高效。并且你有可能发现,HTC或许可以改变你以往开发应用的方式。

在MSDN online对HTC的定义仅如下几句:
HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. Saved with an .htc extension, an HTC is an HTML file that contains script and a set of HTC-specific elements that define the component.
(HTC是由HTML标记、特殊标记和脚本组成的定义了DHTML特性的组件.)

一般而言,HTC是组件化了的脚本过程。尽管引入浏览器的机制不同,但遵循相同的SDK规范。无论是脚本运行环境,还是DOM文档结构。但HTC有着极高的扩展性。也就是说,HTC可以为我们的HTML引入高级的自定义行为(behavior)。例如自定义的attribute, method, 或者事件。这就说明,我们可以使用HTC机制来开发一个有着高级特性的,可重用的,可扩展的组件。

5.实例
为了使篇幅不会太大,我们设想一个实例。话说有一天你的项目经理找到你,说客户不满意我们的项目中的用户UI设计,因为我们的客户是比较有审美情趣的人,讨厌那些windows样式的灰秃秃的按钮。所以要你设计一系列平面的,而且能随着鼠标变化颜色的按钮。你说这没问题,但是需要一天时间,不出意料地使你的项目经理惊讶之后,你解释到以你的技术水准,不可能写一堆脚本和CSS class到HTML里,你的产品一定是reusable, flexiable, 和extendable的。他答应了。于是第二天,你交给他如下源代码:

ButtonStyleFlat.htc:
另外有一个sample用于参考:
sample.html:
(分别见以下文本框)

 


sample.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Sample</title>
</head><body bgcolor=#ffffff>
<button id=oButton style='behavior: url(ButtonStyleFlat.htc)'>push me please</button>
<script>
oButton.onpush=function(){
   oButton.showMessage();
}
</script>
</body>

 

<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoMouseOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="DoMouseOut()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoMouseDown()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="DoMouseUp()" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="DoClick()" />

<PUBLIC:PROPERTY NAME="ColorOver" />
<PUBLIC:PROPERTY NAME="ColorOut" />
<PUBLIC:PROPERTY NAME="ColorDown" />
<PUBLIC:PROPERTY NAME="ColorUp" />
<PUBLIC:PROPERTY NAME="Scheme" />

<PUBLIC:EVENT NAME="onPush" ID="push"  />

<PUBLIC:METHOD NAME="showMessage"  />

<script>
function DoInit(){
    switch(Scheme){
        case "Normal":
            if(ColorOver==null) ColorOver='Orange';
            if(ColorOut==null) ColorOut='RoyalBlue';
            if(ColorDown==null) ColorDown='Black';
            if(ColorUp==null) ColorUp='YellowGreen';
        break;
        default:
            if(ColorOver==null) ColorOver='Orange';
            if(ColorOut==null) ColorOut='RoyalBlue';
            if(ColorDown==null) ColorDown='Black';
            if(ColorUp==null) ColorUp='YellowGreen';
    }
   
        runtimeStyle.borderWidth='0px';
        runtimeStyle.textAlign='center';
        runtimeStyle.padding='3';
        runtimeStyle.verticalAlign='bottom';
        runtimeStyle.color='white';
        runtimeStyle.cursor='hand';
        runtimeStyle.background=ColorOut;
        runtimeStyle.unselectable='on';
}

function DoMouseOver(){
    runtimeStyle.background=ColorOver;
}

function DoMouseOut(){
    runtimeStyle.background=ColorOut;
}

function DoMouseDown(){
    runtimeStyle.background=ColorDown;
}

function DoMouseUp(){
    runtimeStyle.background=ColorUp;
}

function DoClick(){
    push.fire();
}

function showMessage(){
    alert("showMessage run.");
}
</script>
</PUBLIC:COMPONENT>

HTC经典实例(一)

 1.摘要本文在实例的基础上讨论了HTC(HTML Component)的编程方法,提出了一种编写脚本组件的基本模式。2.目标读者HTML开发人员,脚本开发人员,系统分析人员3.背景知识HTML, D...
  • lxiron
  • lxiron
  • 2007年11月06日 22:04
  • 423

HTC经典实例(二)

6.分析让我们看看所完成的工作。我们把ButtonStyleFlat.htc和sample.html放在一起。我们发现button变平了,而且鼠标经过,移开,按下,弹起动作时颜色都会发生变化,而且仔细...
  • hellowutong
  • hellowutong
  • 2006年06月13日 16:09
  • 500

HTC经典实例(二)

 6.分析让我们看看所完成的工作。我们把ButtonStyleFlat.htc和sample.html放在一起。我们发现button变平了,而且鼠标经过,移开,按下,弹起动作时颜色都会发生变化,而且仔...
  • lxiron
  • lxiron
  • 2007年11月06日 22:06
  • 489

javascript--经典实例锦集

一,javascript动态显示: 如显示效果上图所示: 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下: head> title>/title> scr...
  • shan1774965666
  • shan1774965666
  • 2015年01月26日 14:37
  • 2728

三分钟用Unity3D开发第一个HTC VIVE的VR程序

三分钟用Unity3D开发第一个HTC VIVE的VR程序
  • caodongfang126
  • caodongfang126
  • 2017年01月06日 09:57
  • 4170

JavaScript 经典实例日常收集整理(常用经典)

跨浏览器添加事件 ? 1 2 3 4 5 6 7 8 //跨浏览器添加事件 function ...
  • daimomo000
  • daimomo000
  • 2017年04月07日 16:03
  • 612

JavaScript经典实例.pdf 免费下载

下载地址: JavaScript经典实例.pdf
  • jiongyi1
  • jiongyi1
  • 2018年01月19日 23:11
  • 81

PHP经典实例读书笔记 (类和对象)

PHP经典实例读书笔记 (类和对象)PHP经典实例读书笔记 类和对象 0x07类和对象 类的构造函数 析构函数对象删除时调用 定义对象字符串化 接口抽象类与方法访问修饰符 trait 对象的赋值 引...
  • s502414680
  • s502414680
  • 2017年06月24日 19:34
  • 456

The Lab Render (Valve开源VR渲染优化插件)

valve公司将他们的TheLabRenderer渲染器开源了,前来学习学习。   首先我们知道,在手游中一般使用的都是传统的烘焙范式---把光照信息渲染到模型的UV上做成一个LightingM...
  • mryu9958
  • mryu9958
  • 2017年05月16日 18:24
  • 489

HTC实例

 HTC实例 作者:闪吧   类型:原创   来源:闪吧   1.单元格背景色切换 这里以简单的背景颜色变换效果为例,说明如何将一般的效果用HTC写出来。 (1)最简单也是最麻烦的做法,在每个单元...
  • zhengzhichen
  • zhengzhichen
  • 2008年09月22日 16:18
  • 1043
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTC经典实例(一)
举报原因:
原因补充:

(最多只允许输入30个字)