HTML Component(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'>抬起鼠标后

上一个：DHTML初学者指南：DHTML中重要的属性方法
下一个：几个常用的301重定向