HTC(HTML Component)初級應用教程 HTC(HTML Component)初級應用教程#薦

 

Code

原作者：一頁書

　　在微軟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”來調用“方法”，操縱這個對象。可以看到，在按下相應的按鈕後，會使第一行的文字產生向下或向右的移動。雖然只是用第一行文字做 

本文來自: 乘風原創程式(http://www.qqcf.com) 詳細出處參考：http://study.qqcf.com/web/530/122536.htm