在微軟ie 5.0版本的瀏覽器發(fā)布以前，網(wǎng)頁(yè)編程中面對(duì)的最大挑戰(zhàn)就是不能輕易地創(chuàng)建組件，以達(dá)到代碼重用和多頁(yè)面共享的目的。這個(gè)問(wèn)題一直困擾著dhtml（動(dòng)態(tài) heml）的網(wǎng)頁(yè)編程者。他們只能不斷地重復(fù)書(shū)寫(xiě)html、css和javascript的代碼，以滿(mǎn)足多個(gè)頁(yè)面上的重復(fù)或相似的功能。自ie 5.0瀏覽器發(fā)布后，這種情況得到了改善，它帶給我們一個(gè)新的指令組合方法，可把實(shí)現(xiàn)特定功能的代碼封裝在一個(gè)組件內(nèi)，從而實(shí)現(xiàn)多頁(yè)面的代碼重用，使網(wǎng)頁(yè)編程進(jìn)入一個(gè)全新的天地。這個(gè)新的技術(shù)就是我們要談到的dhtml中的“行為”（behaviors）。

“行為”作為一個(gè)簡(jiǎn)單易用的組件，它封裝了頁(yè)面上特定的功能或動(dòng)作。當(dāng)把一個(gè)“行為”附到web頁(yè)面中的一個(gè)元件上時(shí)，這個(gè)元件的原有行為就會(huì)有所改變。因此，網(wǎng)頁(yè)編程者可以開(kāi)發(fā)通用的dhtml指令，并改變?cè)袑?duì)象的一些屬性，用“行為”來(lái)增強(qiáng)一個(gè)對(duì)象的功能，同時(shí)也簡(jiǎn)化了頁(yè)面的html代碼。而且“行為”的創(chuàng)建和使用也非常簡(jiǎn)單方便，所需的知識(shí)也只是原來(lái)已經(jīng)習(xí)慣使用的css樣式表、html指令和javascript腳本語(yǔ)言。只要你對(duì)此有所了解，有過(guò)實(shí)際編程的經(jīng)歷，學(xué)習(xí)并掌握“行為”的使用完全沒(méi)有問(wèn)題。我們將以一個(gè)改變字體效果的“行為”組件為例來(lái)說(shuō)明如何編寫(xiě)和使用一個(gè)“行為”，并體驗(yàn)“行為”給頁(yè)面編輯帶來(lái)的優(yōu)點(diǎn)和方便之處。

首先新建一個(gè)名為font_efftce.htc的文本文件，組成“行為”組件的文件都是以.htc為擴(kuò)展名，這個(gè)文件中的內(nèi)容就是我們對(duì)這個(gè)“行為”的描述。它的創(chuàng)建和使用步驟如下：

（1）首先給這個(gè)“行為”增加幾個(gè)事件響應(yīng)，語(yǔ)句書(shū)寫(xiě)格式如下：

< 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”對(duì)應(yīng)所需事件名，在這里分別為：onmouseover,onmouseout,onmousedown,onmouseup四個(gè)事件名，你當(dāng)然可以再增加其它的事件名來(lái)滿(mǎn)足你的特定需求?！皁nevent”對(duì)應(yīng)著個(gè)自的事件句柄，即事件觸發(fā)時(shí)所調(diào)用的函數(shù)名稱(chēng)。glowit()函數(shù)使字體周?chē)a(chǎn)生一個(gè)紅色的輝光。noglow()函數(shù)是消除字體的輝光效果。font2yellow()函數(shù)是把字體顏色改為黃色。font2blue()函數(shù)是把字體顏色改為藍(lán)色。四個(gè)事件的定義都是相似的。

（2）接下來(lái)，再給這個(gè)“行為”增加二個(gè)“方法”定義，內(nèi)容如下。

< public:method name=move_down / >

< public:method name=move_right / >

“name”參數(shù)對(duì)應(yīng)的是給定的“方法”名稱(chēng)。move_down和move_right分別是向下和向右移動(dòng)的“方法”對(duì)應(yīng)的函數(shù)名稱(chēng)。注意，在方法名的后面不要帶“( )”括號(hào)，即不要寫(xiě)成“move_down()”這個(gè)樣子，這在“方法”定義的語(yǔ)法上是不允許的。

（3）接下來(lái)的工作就是在我們熟悉的dhtml環(huán)境下，用javascript腳本語(yǔ)句編寫(xiě)“事件句柄”和“方法”所對(duì)應(yīng)的函數(shù)內(nèi)容，實(shí)現(xiàn)預(yù)期的效果。具體內(nèi)容參考下面的源程序。其中的“element”參數(shù)指的是這個(gè)“行為”所附著的對(duì)象，因?yàn)椤靶袨椤笨偸潜桓街巾?yè)面的元件上面，并通過(guò)這個(gè)元件發(fā)揮作用。其它語(yǔ)句都是dhtml的編程內(nèi)容，就不再多說(shuō)了。如有不明之處，可參考微軟的msdn開(kāi)發(fā)文檔中有關(guān)ie瀏覽器的內(nèi)容，上面有詳細(xì)的dhtml編程參考內(nèi)容、屬性和方法使用說(shuō)明等，并包含了大量的文章和舉例程序。經(jīng)常訪問(wèn)微軟的msdn文檔，尤其對(duì)于初學(xué)者來(lái)說(shuō)是一個(gè)良好的學(xué)習(xí)習(xí)慣，你幾乎可以得到任何你想找的答案，它的網(wǎng)址為：。

完整的“行為”文檔“font_effect.htc”的內(nèi)容如下：

////////////////////////////“行為”文檔開(kāi)始///////////////////////////////////

//給“行為”增加四個(gè)鼠標(biāo)事件

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

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

< public:attach event=onmousedown onevent=font2yellow() / >

< public:attach event=onmouseup onevent=font2blue() / >

//給“行為”定義二個(gè)方法

< public:method name=move_down / >

< public:method name=move_right / >

< script language=jscript >

//定義一個(gè)保存字體顏色的變量

var font_color;

//定義向下移動(dòng)文字的方法

function move_down()

{

element.style.postop+=2;

}

//定義向右移動(dòng)文字的方法

function move_right()

{

element.style.posleft +=6;

}

//定義鼠標(biāo)onmouseup事件的調(diào)用函數(shù)

function font2blue(){

if (event.srcelement == element)

{

element.style.color='blue';

}

}

//定義鼠標(biāo)onmousedown事件的調(diào)用函數(shù)

function font2yellow(){

if (event.srcelement == element)

{

element.style.color='yellow';

}

}

//定義鼠標(biāo)onmouseover事件的調(diào)用函數(shù)

function glowit()

{

if (event.srcelement == element)

{

font_color=style.color;

element.style.color='white';

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

}

}

//定義鼠標(biāo)onmouseout事件的調(diào)用函數(shù)

function noglow()

{

if (event.srcelement == element)

{

element.style.filter=;

element.style.color=font_color;

}

}

< /script >

//////////////////“行為”文檔結(jié)束///////////////////////////////

（4）如何在一個(gè)頁(yè)面上使用“行為”

在頁(yè)面上使用“行為”組件，并不需要學(xué)習(xí)新的知識(shí)。所需的知識(shí)的也不過(guò)是css樣式表和html的設(shè)置而已，請(qǐng)看下面的語(yǔ)句。

< style >

.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}

< /style >

可以看出，這和以前我們已經(jīng)熟知的樣式表設(shè)置完全相同。上面的語(yǔ)句定義了一個(gè)樣式名：“myfilter”，其中對(duì)我們來(lái)說(shuō)比較新的內(nèi)容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行為”屬性名，這就是“行為”在樣式表中的設(shè)置方式。括號(hào)中的內(nèi)容是“行為”文檔的文件名，本例中表明“行為”文檔在與頁(yè)面文件在同一個(gè)目錄下，如果“行為”文檔安置在其它目錄下，在此參數(shù)的前面要加上相應(yīng)的路徑名，以保證可以正確地定位“行為”文檔的位置。此“樣式”中的其它內(nèi)容就是普通的樣式屬性設(shè)置，可根據(jù)你的需要增減，但在此例中，由于使用了“glow”濾鏡效果，至少要設(shè)置一個(gè)寬度（width）屬性。通過(guò)以上的樣式指定，我們就有了一個(gè)名為：“myfilter”的樣式，它附帶一個(gè)有字體變化效果的“行為”。如果你想要在一個(gè)頁(yè)面元件上使用這個(gè)附帶“行為”的樣式，同樣也很簡(jiǎn)單，只要把這個(gè)“樣式名”安置在元件的屬性設(shè)置區(qū)域即可，見(jiàn)下面的語(yǔ)句。

< span id=myspan class='myfilter' >行為產(chǎn)生的文字效果< /span >< br >

< span class='myfilter' >鼠標(biāo)指向后產(chǎn)生輝光< /span >

以上語(yǔ)句里面沒(méi)有什么新的內(nèi)容，class='myfilter'就是我們所熟悉的樣式設(shè)置。在第一個(gè)“span”標(biāo)記的屬性中還定義了一個(gè)“id”標(biāo)記，稍后就會(huì)看到，這是用來(lái)演示調(diào)用“行為”內(nèi)的“方法”而設(shè)置的。這樣設(shè)置后，“span”元件中的內(nèi)容就可以顯示出“行為”組件內(nèi)的預(yù)定效果：

1． 鼠標(biāo)指針移動(dòng)到文字內(nèi)容上時(shí)，在文字周?chē)a(chǎn)生紅色的輝光效果，同時(shí)文字變成白色。

2． 當(dāng)鼠標(biāo)按鈕按下時(shí)，文字顏色改變?yōu)辄S色。

3． 鼠標(biāo)按鈕抬起后，文字顏色又改變?yōu)樗{(lán)色。

4． 當(dāng)鼠標(biāo)指針移動(dòng)到文字區(qū)域以外時(shí)，去掉了紅色輝光效果，文字恢復(fù)原樣。

另外，我們?cè)诙x“行為”時(shí)設(shè)置了二個(gè)“方法”，“move_down”和“move_right”。為調(diào)用這二個(gè)“方法”，定義了二個(gè)按鈕：

< button onclick=myspan.move_right(); >向右移動(dòng)第一行文字< /button >< br >

< button onclick=myspan.move_down(); >向下移動(dòng)第一行文字< /button >

用按鈕的onclick事件去調(diào)用這二個(gè)“方法”，先前定義的“id”標(biāo)記就作為元件的對(duì)象名稱(chēng)，用“myspan.move_down”來(lái)調(diào)用“方法”，操縱這個(gè)對(duì)象。可以看到，在按下相應(yīng)的按鈕后，會(huì)使第一行的文字產(chǎn)生向下或向右的移動(dòng)。雖然只是用第一行文字做了示范，實(shí)際上，只要做相應(yīng)的設(shè)置，你也可以移動(dòng)其它對(duì)象。頁(yè)面源文檔的完整內(nèi)內(nèi)容如下：

< 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' >行為產(chǎn)生的文字效果< /span >< br >

< span class='myfilter' >鼠標(biāo)指向后產(chǎn)生輝光< /span >< br >

< span class='myfilter' >同時(shí)文字變白< /span >< br >

< span class='myfilter' >按下鼠標(biāo)后文字變黃< /span >< br >

< span class='myfilter' >抬起鼠標(biāo)后文字變藍(lán)< /span >< br >

< span class='myfilter' >鼠標(biāo)離開(kāi)后文字恢復(fù)原狀< /span >< br >

< button onclick=myspan.move_right(); >向右移動(dòng)第一行文字< /button >< br >

< button onclick=myspan.move_down(); >向下移動(dòng)第一行文字< /button >

< /body >

< /html >

通過(guò)以上的簡(jiǎn)單介紹，可以看出，我們很容易地在一個(gè)“行為”中同時(shí)組合了多種文字變化效果，通過(guò)簡(jiǎn)單的“樣式”設(shè)置，任意地將它與頁(yè)面元件相關(guān)連，體現(xiàn)了“行為”組件的優(yōu)點(diǎn)和強(qiáng)大功能。一個(gè)“行為”組件，不僅能在一個(gè)頁(yè)面內(nèi)重復(fù)使用，也可供同一站點(diǎn)上的所有頁(yè)面使用。試想一下，如果不使用“行為”來(lái)完成上述的效果，雖然可以在頁(yè)面內(nèi)調(diào)用一組預(yù)定的函數(shù)來(lái)完成同樣的功能，但頁(yè)面內(nèi)每一個(gè)使用文字效果的元件都要附加四個(gè)鼠標(biāo)事件，如果在多個(gè)頁(yè)面內(nèi)使用相同的效果，被調(diào)用的函數(shù)也需要在每一個(gè)頁(yè)面內(nèi)重復(fù)設(shè)置。相比之下，孰優(yōu)孰劣是很明顯的。所以，使用“行為”組件，可以制作出簡(jiǎn)潔、高效、通用和便于維護(hù)的頁(yè)面。本文的舉例只是為了說(shuō)明“行為”組件的編寫(xiě)和使用過(guò)程，使讀者對(duì)“行為”編程有一個(gè)概括的了解，并以此基礎(chǔ)制作出自己所需要的“行為”組件，或直接引用滿(mǎn)足個(gè)人需要的現(xiàn)成“行為”組件，因?yàn)椤敖M件共享”的概念也是“行為”開(kāi)發(fā)者的初衷。最后，愿本文能起到“拋磚引玉”的目的，使讀者步入精彩的dhtml網(wǎng)頁(yè)編程天地。

說(shuō)明:

htc是html component的縮寫(xiě),

是ie5.0的主要擴(kuò)展之一,

除了具備一般組件的可重用優(yōu)點(diǎn)之外,

還具有易于開(kāi)發(fā)使用等優(yōu)點(diǎn),

因?yàn)樾枰胪獠课募?這里就不舉例了,寶庫(kù)里有例子.

控件和組件

htc提供了一個(gè)簡(jiǎn)單機(jī)制以在腳本中實(shí)現(xiàn)dhtml行為。一個(gè)htc文件和html文件沒(méi)有任何差別，并且以“.htc”為后綴，

可以使用htc實(shí)現(xiàn)以下行為：

設(shè)定屬性和方法。通過(guò)“property”和“method”元素定義

設(shè)置自定義事件。通過(guò)“event”元素實(shí)現(xiàn)，用該元素的“fire()”方法釋放事件，

通過(guò)“createeventobject()”方法設(shè)置事件環(huán)境。

訪問(wèn)所包含該htc的的html頁(yè)的dhtml對(duì)象模型，使用htc的“element對(duì)象，返回

一個(gè)附加行為的元素，使用該對(duì)象，htc可以訪問(wèn)包含文擋及它的對(duì)象模型（屬性、方法、事件）。

收取通知，使用”attach“元素實(shí)現(xiàn)，瀏覽器不但通知htc標(biāo)準(zhǔn)的dhtml事件，而且通知htc兩種特殊事件：oncontentready事件和ondocumentready事件 。

定義標(biāo)記和命名空間

htc的基礎(chǔ)是自定義標(biāo)記

要為頁(yè)面定義自定義標(biāo)記，必須為該標(biāo)記提供命名空間

要使用該標(biāo)記必須在該標(biāo)記前加上正確的xml命名空間前綴

例如:

定義一個(gè)新標(biāo)記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>

可以在單個(gè)html標(biāo)記

中定義多個(gè)命名空間：

<html xmlns:docjs xmlns:docjavascript>

組件定義

組件的名字是由htc文檔里定義在第一行的xml命名空間決定的

該頁(yè)不用調(diào)用其他的htc話(huà),就只有一個(gè)命名空間定義

實(shí)際上，html組件的定義就是自定義標(biāo)簽行為的定義

該行為包括一個(gè)屬性和一個(gè)事件：

<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> //為組件定義響應(yīng)事件

</body>

</html>

其中的oncontentready是在組件被調(diào)用者完全導(dǎo)入時(shí)觸發(fā)

再看看fninit()

function fninit() {

document.body.innerhtml = element.value;//設(shè)定組件顯示內(nèi)容

document.body.classname = clsmytag; //設(shè)定顯示樣式表,

defaults.viewlink = document; //使本組件對(duì)其他文檔可見(jiàn)

element.aproperty = element.value; //設(shè)置組件的屬性值

}

組件的調(diào)用

<html xmlns:mycom>

<head>

<?import namespace=mycom implementation=mytag.htc/>

</head>

<body>

<mycom:mytag></mycom:mytag>

</body>

</html>