jlzzjlzz亚洲乱熟在线播放

系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > 腳本中心 > htc > 詳細頁面

HTC教程

時間:2020-02-06來源:系統城作者:電腦系統城

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>
分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載