主頁(yè) > 知識(shí)庫(kù) > HTC教程

HTC教程

熱門標(biāo)簽:南昌辦理400電話怎么安裝 獲客智能電銷機(jī)器人 電話機(jī)器人適用業(yè)務(wù) 湛江電銷防封卡 徐州天音防封電銷卡 佛山防封外呼系統(tǒng)收費(fèi) 鄭州智能外呼系統(tǒng)運(yùn)營(yíng)商 哈爾濱外呼系統(tǒng)代理商 不錯(cuò)的400電話辦理
在微軟IE 5.0版本的瀏覽器發(fā)布以前,網(wǎng)頁(yè)編程中面對(duì)的最大挑戰(zhàn)就是不能輕易地創(chuàng)建組件,以達(dá)到代碼重用和多頁(yè)面共享的目的。這個(gè)問題一直困擾著DHTML(動(dòng)態(tài) HEML)的網(wǎng)頁(yè)編程者。他們只能不斷地重復(fù)書寫HTML、CSS和javascript的代碼,以滿足多個(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è)編程者可以開發(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í)并掌握“行為”的使用完全沒有問題。我們將以一個(gè)改變字體效果的“行為”組件為例來(lái)說(shuō)明如何編寫和使用一個(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ǔ)句書寫格式如下: 
 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)滿足你的特定需求?!癘NEVENT”對(duì)應(yīng)著個(gè)自的事件句柄,即事件觸發(fā)時(shí)所調(diào)用的函數(shù)名稱。glowit()函數(shù)使字體周圍產(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)的是給定的“方法”名稱。move_down和move_right分別是向下和向右移動(dòng)的“方法”對(duì)應(yīng)的函數(shù)名稱。注意,在方法名的后面不要帶“( )”括號(hào),即不要寫成“move_down()”這個(gè)樣子,這在“方法”定義的語(yǔ)法上是不允許的。 

(3)接下來(lái)的工作就是在我們熟悉的DHTML環(huán)境下,用javascript腳本語(yǔ)句編寫“事件句柄”和“方法”所對(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開發(fā)文檔中有關(guān)IE瀏覽器的內(nèi)容,上面有詳細(xì)的DHTML編程參考內(nèi)容、屬性和方法使用說(shuō)明等,并包含了大量的文章和舉例程序。經(jīng)常訪問微軟的MSDN文檔,尤其對(duì)于初學(xué)者來(lái)說(shuō)是一個(gè)良好的學(xué)習(xí)習(xí)慣,你幾乎可以得到任何你想找的答案,它的網(wǎng)址為:http://msdn.microsoft.com/ie/。 
  完整的“行為”文檔“font_effect.htc”的內(nè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ū)域即可,見下面的語(yǔ)句。 
 span id="myspan" class='myfilter' >行為產(chǎn)生的文字效果 /span > br > 
 span class='myfilter' >鼠標(biāo)指向后產(chǎn)生輝光 /span > 
  以上語(yǔ)句里面沒有什么新的內(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ǎ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ì)象名稱,用“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)離開后文字恢復(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ō)明“行為”組件的編寫和使用過(guò)程,使讀者對(duì)“行為”編程有一個(gè)概括的了解,并以此基礎(chǔ)制作出自己所需要的“行為”組件,或直接引用滿足個(gè)人需要的現(xiàn)成“行為”組件,因?yàn)椤敖M件共享”的概念也是“行為”開發(fā)者的初衷。最后,愿本文能起到“拋磚引玉”的目的,使讀者步入精彩的DHTML網(wǎng)頁(yè)編程天地。 

說(shuō)明: 
HTC是HTML component的縮寫, 
是IE5.0的主要擴(kuò)展之一, 
除了具備一般組件的可重用優(yōu)點(diǎn)之外, 
還具有易于開發(fā)使用等優(yōu)點(diǎn), 
因?yàn)樾枰胪獠课募?這里就不舉例了,寶庫(kù)里有例子. 

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

可以使用HTC實(shí)現(xiàn)以下行為: 
設(shè)定屬性和方法。通過(guò)“PROPERTY”和“METHOD”元素定義 
設(shè)置自定義事件。通過(guò)“EVENT”元素實(shí)現(xiàn),用該元素的“fire()”方法釋放事件, 
通過(guò)“createEventObject()”方法設(shè)置事件環(huán)境。 
訪問所包含該HTC的的HTML頁(yè)的DHTML對(duì)象模型,使用HTC的“element"對(duì)象,返回 
一個(gè)附加行為的元素,使用該對(duì)象,HTC可以訪問包含文擋及它的對(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話,就只有一個(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ì)其他文檔可見 
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>

標(biāo)簽:廣西 蕪湖 安康 紹興 懷化 蘭州 吉安 呂梁

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTC教程》,本文關(guān)鍵詞  HTC,教程,HTC,教程,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTC教程》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于HTC教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章