HTC教程_htc

在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML(动态 HEML)的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码,以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”(Behaviors)。 
  “行为”作为一个简单易用的组件,它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时,这个元件的原有行为就会有所改变。因此,网页编程者可以开发通用的DHTML指令,并改变原有对象的一些属性,用“行为”来增强一个对象的功能,同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便,所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解,有过实际编程的经历,学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”,并体验“行为”给页面编辑带来的优点和方便之处。 

  首先新建一个名为font_efftce.htc的文本文件,组成“行为”组件的文件都是以.htc为扩展名,这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下: 
(1)首先给这个“行为”增加几个事件响应,语句书写格式如下: 
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / > 
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / > 
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / > 
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / > 
  “EVENT”对应所需事件名,在这里分别为:onmouseover,onmouseout,onmousedown,onmouseup四个事件名,你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄,即事件触发时所调用的函数名称。glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。 
(2)接下来,再给这个“行为”增加二个“方法”定义,内容如下。 
< PUBLIC:METHOD NAME="move_down" / > 
< PUBLIC:METHOD NAME="move_right" / > 
  “NAME”参数对应的是给定的“方法”名称。move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。注意,在方法名的后面不要带“( )”括号,即不要写成“move_down()”这个样子,这在“方法”定义的语法上是不允许的。 

(3)接下来的工作就是在我们熟悉的DHTML环境下,用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容,实现预期的效果。具体内容参考下面的源程序。其中的“element”参数指的是这个“行为”所附着的对象,因为“行为”总是被附着到页面的元件上面,并通过这个元件发挥作用。其它语句都是DHTML的编程内容,就不再多说了。如有不明之处,可参考微软的MSDN开发文档中有关IE浏览器的内容,上面有详细的DHTML编程参考内容、属性和方法使用说明等,并包含了大量的文章和举例程序。经常访问微软的MSDN文档,尤其对于初学者来说是一个良好的学习习惯,你几乎可以得到任何你想找的答案,它的网址为:http://msdn.microsoft.com/ie/。 
  完整的“行为”文档“font_effect.htc”的内容如下: 
////////////////////////////“行为”文档开始/////////////////////////////////// 
//给“行为”增加四个鼠标事件 
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / > 
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / > 
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / > 
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / > 
//给“行为”定义二个方法 
< PUBLIC:METHOD NAME="move_down" / > 
< PUBLIC:METHOD NAME="move_right" / > 
< SCRIPT LANGUAGE="JScript" > 
//定义一个保存字体颜色的变量 
var font_color; 
//定义向下移动文字的方法 
function move_down() 

element.style.posTop+=2; 

//定义向右移动文字的方法 
function move_right() 

element.style.posLeft +=6; 

//定义鼠标onmouseup事件的调用函数 
function font2blue(){ 
if (event.srcElement == element) 

element.style.color='blue'; 


//定义鼠标onmousedown事件的调用函数 
function font2yellow(){ 
if (event.srcElement == element) 

element.style.color='yellow'; 

//定义鼠标onmouseover事件的调用函数 
function glowit() 

if (event.srcElement == element) 

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

//定义鼠标onmouseout事件的调用函数 
function noglow() 

if (event.srcElement == element) 

element.style.filter=""; 
element.style.color=font_color; 


< /SCRIPT > 
//////////////////“行为”文档结束/////////////////////////////// 

(4)如何在一个页面上使用“行为” 
  在页面上使用“行为”组件,并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已,请看下面的语句。 
< STYLE > 
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;} 
< /STYLE > 
  可以看出,这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名:“myfilter”,其中对我们来说比较新的内容是:“behavior:url(font_effect.htc);”,“behavior”是新增的“行为”属性名,这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名,本例中表明“行为”文档在与页面文件在同一个目录下,如果“行为”文档安置在其它目录下,在此参数的前面要加上相应的路径名,以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置,可根据你的需要增减,但在此例中,由于使用了“glow”滤镜效果,至少要设置一个宽度(width)属性。通过以上的样式指定,我们就有了一个名为:“myfilter”的样式,它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式,同样也很简单,只要把这个“样式名”安置在元件的属性设置区域即可,见下面的语句。 
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br > 
< span class='myfilter' >鼠标指向后产生辉光< /span > 
  以上语句里面没有什么新的内容,class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记,稍后就会看到,这是用来演示调用“行为”内的“方法”而设置的。这样设置后,“span”元件中的内容就可以显示出“行为”组件内的预定效果: 
1. 鼠标指针移动到文字内容上时,在文字周围产生红色的辉光效果,同时文字变成白色。 
2. 当鼠标按钮按下时,文字颜色改变为黄色。 
3. 鼠标按钮抬起后,文字颜色又改变为蓝色。 
4. 当鼠标指针移动到文字区域以外时,去掉了红色辉光效果,文字恢复原样。 
  另外,我们在定义“行为”时设置了二个“方法”,“move_down”和“move_right”。为调用这二个“方法”,定义了二个按钮: 
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br > 
< button onclick="myspan.move_down();" >向下移动第一行文字< /button > 
  用按钮的onclick事件去调用这二个“方法”,先前定义的“id”标记就作为元件的对象名称,用“myspan.move_down”来调用“方法”,操纵这个对象。可以看到,在按下相应的按钮后,会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范,实际上,只要做相应的设置,你也可以移动其它对象。页面源文档的完整内内容如下: 
< html > 
< HEAD > 
< TITLE >行为效果演示< /TITLE > 
< STYLE > 
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;} 
< /STYLE > 
< /HEAD > 
< BODY > 
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br > 
< span class='myfilter' >鼠标指向后产生辉光< /span >< br > 
< span class='myfilter' >同时文字变白< /span >< br > 
< span class='myfilter' >按下鼠标后文字变黄< /span >< br > 
< span class='myfilter' >抬起鼠标后文字变蓝< /span >< br > 
< span class='myfilter' >鼠标离开后文字恢复原状< /span >< br > 
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br > 
< button onclick="myspan.move_down();" >向下移动第一行文字< /button > 
< /BODY > 
< /html > 
  通过以上的简单介绍,可以看出,我们很容易地在一个“行为”中同时组合了多种文字变化效果,通过简单的“样式”设置,任意地将它与页面元件相关连,体现了“行为”组件的优点和强大功能。一个“行为”组件,不仅能在一个页面内重复使用,也可供同一站点上的所有页面使用。试想一下,如果不使用“行为”来完成上述的效果,虽然可以在页面内调用一组预定的函数来完成同样的功能,但页面内每一个使用文字效果的元件都要附加四个鼠标事件,如果在多个页面内使用相同的效果,被调用的函数也需要在每一个页面内重复设置。相比之下,孰优孰劣是很明显的。所以,使用“行为”组件,可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程,使读者对“行为”编程有一个概括的了解,并以此基础制作出自己所需要的“行为”组件,或直接引用满足个人需要的现成“行为”组件,因为“组件共享”的概念也是“行为”开发者的初衷。最后,愿本文能起到“抛砖引玉”的目的,使读者步入精彩的DHTML网页编程天地。 

说明: 
HTC是HTML component的缩写, 
是IE5.0的主要扩展之一, 
除了具备一般组件的可重用优点之外, 
还具有易于开发使用等优点, 
因为需要引入外部文件,这里就不举例了,宝库里有例子. 

控件和组件 
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别,并且以“.htc”为后缀, 

可以使用HTC实现以下行为: 
设定属性和方法。通过“PROPERTY”和“METHOD”元素定义 
设置自定义事件。通过“EVENT”元素实现,用该元素的“fire()”方法释放事件, 
通过“createEventObject()”方法设置事件环境。 
访问所包含该HTC的的HTML页的DHTML对象模型,使用HTC的“element"对象,返回 
一个附加行为的元素,使用该对象,HTC可以访问包含文挡及它的对象模型(属性、方法、事件)。 
收取通知,使用”ATTACH“元素实现,浏览器不但通知HTC标准的DHTML事件,而且通知HTC两种特殊事件:oncontentready事件和ondocumentready事件 。 

定义标记和命名空间 
HTC的基础是自定义标记 
要为页面定义自定义标记,必须为该标记提供命名空间 
要使用该标记必须在该标记前加上正确的XML命名空间前缀 
例如: 

定义一个新标记RIGHT的例子 
代码片断如下:<HTML XMLNS:DOCJS> 
<HEAD> 
<STYLE> 
@media all { 
DOCJS\:RIGHT {text-align:right; width:100} 

</STYLE> 
</HEAD> 
<BODY> 
<DOCJS:RIGHT> 
Read Doc JavaScript's columns, tips, tools, and tutorials 
</DOCJS:RIGHT> 
</BODY> 
</HTML> 

可以在单个HTML标记 
中定义多个命名空间: 
<HTML XMLNS:DOCJS XMLNS:DOCjavascript> 

组件定义 
组件的名字是由HTC文档里定义在第一行的XML命名空间决定的 
该页不用调用其他的HTC话,就只有一个命名空间定义 
实际上,HTML组件的定义就是自定义标签行为的定义 
该行为包括一个属性和一个事件: 

<HTML xmlns:MyTag> 
<HEAD> 
<PUBLIC:COMPONENT tagName="MyTag"> 
<PROPERTY NAME="value"></PROPERTY> 
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH> 
</PUBLIC:COMPONENT> 
<STYLE>//为组件定义样式表 
.cssMyTag{ 

</STYLE> 
<SCRIPT language=javascript> 
function MyTagBehavior1(){} //为组件定义方法 
</SCRIPT> 
</HEAD> 
<BODY onclick=MyTagBehavior1> //为组件定义响应事件 
</BODY> 
</HTML> 

其中的oncontentready是在组件被调用者完全导入时触发 
再看看fnInit() 

function fnInit() { 
document.body.innerHTML = element.value;//设定组件显示内容 
document.body.className = "clsMyTag"; //设定显示样式表, 
defaults.viewLink = document; //使本组件对其他文档可见 
element.aProperty = element.value; //设置组件的属性值 

组件的调用 

<HTML xmlns:MyCom> 
<HEAD> 
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/> 
</HEAD> 
<BODY> 
<MyCom:MyTag></MyCom:MyTag> 
</BODY> 
</HTML>

时间: 2025-01-20 16:41:35

HTC教程_htc的相关文章

开发基于Web的CSS设计器.代码参考

css|web|参考|设计 这里对前面文章讲的CSS设计器系统关键代码作一些小结,如果没有看过前面文章的请先参看"开发基于Web的CSS设计器" 解析CSS样式文件 这段代码主要作用是把CSS文件分解为多个样式类,并按名称/文本属性生成ClassItem对象,并保存在一个ArrayList(cssList)中(C#代码) //读取文件FileInfo theSource= new FileInfo (@m_filePath);StreamReader reader = theSourc

Photoshop鼠绘教程:绘制质感HTC手机图标

本教程主要使用Photoshop绘制质感HTC手机图标教程,这份icon也是基于iphone框架做的,喜欢的朋友可以一起来学习吧. 先看看效果图 效果如下: 如惯例用圆角矩形工具画出长宽为512px,R值为92px的标准iphone图标框架 添加图层样式:内阴影.渐变叠加 [1] [2] [3] [4]  下一页

PhotoShop绘制HTC手机产品宣传海报设计教程

教程教我们用PS绘制HTC手机产品设计宣传海报效果,这是外国教程,教程非常细致,所以步骤非常多,而且作者翻译水平有限,有PS基础的同学应该能看得明白, 喜欢的同学可以来学习一下! 转载一篇关于手机产品设计的教程.其实我觉得这个跟做一个复杂图标是一样的.里面很多效果的设计方法完全可以应用到图标设计中去. 我必须承认,除了IPHONE,我别无所求,但是,当我第一次看到HTCDiamond的时候,我感到惊讶,因为它看是多么的好. 所以,我决定写一个教程,教程的内容是制作一个HTCDiamond.不过制

PS绘制质感HTC手机icon图标教程

这是一份我们尼果网Kevin兄迟迟未出的教程,一直太忙了(懒惰的借口),就让我替Kevin兄整理出来吧        三联推荐:photoshop7.0迷你版免费下载    |  Photoshop CS5 中文免费下载  |  photoshop免费下载 这份icon也是基于iphone框架做的,为了记念Kevin兄那台使用已久的htc hero,真是长情的呀~~~注意!这不是htc的广告,如果是,请替我们联系htc公关部 申请广告费,哈哈~~~ 效果如下: 如惯例用圆角矩形工具画出长宽为51

有锁版HTC手机官方解锁图文教程 各型号通用

本教程步骤比较繁琐,希望您能够耐心的走完每一个步骤 1).打开HTC官方解锁网址:http://www.htcdev.com/ 2).点击右上角的「Register 」跳转到注册页面,填写如下信息 点击「Register 」按钮提交注册信息后,会提示注册已经成功,并且需要您前往注册邮箱收取激活邮件激活注册 3).前往您的注册邮箱查看激活邮件,点击相关链接完成注册. 4).登陆账号并选择「UnlockBootloader」点击「Get Started」 5).进入解锁页面后,选择您的机型,然后点击

HTC G18国行Z715e Root权限获取图文教程

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   HTC G18(国行Z715e)是HTC旗下最受关注的智能手机之一,其搭配的魔声专属耳机更是俘获了无数消费者的心,下面小编就为大家介绍一下HTC G18的Root和刷入Recovery的方法. 步骤一:检查HTC手机是否已解锁 在Root之前先查看机器的安全锁状态,关机,按住音量减,再同时按住开关键,进入手机HBOOT界面,如果第一行之中是S-ON则表示需要解锁

HTC G11 S710图文详细刷机教程

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   首先,你要先确定你的机器是否是S-OFF的.关机,音量+电源键进入HBOOT界面. (已经刷好了recovery的话,就可以跳过这一部分): 1.确保你的机器已经是S-OFF,如果是S-ON请先解锁. 解锁教程请参阅<HTC G11 S710刷机解锁S-OFF图文教程> 2.确保你的存储卡是FAT32格式. 3.将附件 PG32IMG_zh.zip(

HTC ONE S解锁ROOT刷Recovery刷CM10教程

舍友新入手一台HTC ONE S,今天折腾了一个下午,虽然刷机这种事儿都是轻车熟路了,但是还是有一些问题,把解决过程放出来,大家参考下吧. 1.解锁 目前木有S-OFF相关的刷机资料,好像还需要机器来解,所以,方法就是官方解锁.官方解锁就直接去http://htcdev.com/bootloader/注册一个帐号,然后一步步来,在HBOOT那里最后显示S-ON 但是UNLOCKED就可以了.具体教程网上泛滥,自己搜下htc官解 2.刷recovery 先去ClockworkMod下载相应型号的r

HTC G17 EVO 3D刷机前Root权限图文教程

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   作为一款拥有裸眼3D功能的手机,HTC G17 EVO 3D备受时尚达人们的喜爱,双500万像素+前置130万像素摄像头满足了随时拍摄的需求.下面小编就为大家带来这款手机Root权限以及刷入Recovery的教程. 步骤一:检查HTC手机是否已解锁 在Root之前先查看机器的安全锁状态,关机,按住音量减,再同时按住开关键,进入手机HBOOT界面,如果第一行之中是