|
IE里的探索之創(chuàng)建具有良好行為的自定義元素
（作者：青蘋果工作室編譯 2001年02月08日 13:28）
本文描述如何使用腳本和 HTML 創(chuàng)建你自己的 DHTML 元素行為，以用于 DHTML 頁(yè)面。Microsoft Internet Explorer 5.5 為動(dòng)態(tài) HTML (DHTML) 開(kāi)發(fā)者提供了令人興奮的新功能。我們將討論在 DHTML 頁(yè)面中使用腳本和 HTML 創(chuàng)建你自己的 DHTML 元素行為。開(kāi)始討論前，我們來(lái)看看元素行為的一些背景知識(shí)。
元素行為與 Internet Explorer 5.0 所支持的行為不同，它真正實(shí)現(xiàn)了自定義元素。自定義元素和我們現(xiàn)在稱為附著行為的概念是在 Internet Explorer 5.0 中引入的，它們使你能使用 XML 語(yǔ)法在 HTML 文檔中添加自定義元素，如 <VEG:TURNIP>。隨后，可以使用 CSS behavior 屬性或 addbehavior() 方法在它或其它元素上附著行為。 這樣做的缺點(diǎn)是，當(dāng) behavior 屬性被重新定義時(shí)附著的行為就會(huì)被分離而新的行為不會(huì)立刻附著。為解決這個(gè)問(wèn)題，在 IE5.5 引入了對(duì)我們稱為元素行為的支持，它永久地、不能撤銷地綁定在自定義元素上。這里我們需要說(shuō)明，當(dāng)你想要在 HTML 文檔中添加專有元素時(shí)，附著行為還是有用處的；但當(dāng)自定義元素時(shí)，明確建議的方法是元素行為。
開(kāi)始我們的行為
現(xiàn)在我們開(kāi)始建立自己的可靠的自定義行為計(jì)劃。
關(guān)于 DHTML 元素行為，我們選擇開(kāi)發(fā)一個(gè) include 標(biāo)記，它將一個(gè)文本文件作為 DHTML 頁(yè)面的一部分包含進(jìn)來(lái)。元素行為可以提供比這更強(qiáng)大的功能，但從本文的目的出發(fā)，我們的選擇能使我們集中考慮元素行為的核心功能。
我們從一個(gè) HTML 組件 (HTC) 文件實(shí)現(xiàn)的很簡(jiǎn)單的元素行為開(kāi)始。請(qǐng)看 include1.htc：
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
window.status="Include has been initialized";
}
</SCRIPT>
這里標(biāo)記名 include 在行為元素 public:component 中指明。看一下使用這個(gè)元素行為的 includedemo1.htm：
<HTML xmlns:MYNS >
<HEAD>
<?IMPORT namespace="MYNS" implementation="include1.htc">
</HEAD>
<BODY>
This HTML file uses the include element to include a block of
text from another file in an HTML page. Here is the included content
of the include.htc file:
<BR>
<MYNS:INCLUDE />
<BR>
This text comes after the included file:
</BODY>
</HTML>
這里我們看到了在 <HTML> 標(biāo)記里為自定義元素定義的命名空間和 IMPORT 處理指令，它告訴我們可以在哪里找到我們的元素行為。現(xiàn)在，這個(gè)元素行為什么也不做，所以我們?cè)谛袨橹蟹胖昧四_本以便在初始化時(shí)在狀態(tài)欄里寫一些文本。這是一個(gè)用的調(diào)試技巧；這里它確認(rèn)了我們的行為已經(jīng)被實(shí)例化。
在我們進(jìn)一步開(kāi)始給我們的行為添加有用的功能之前，我們暫停一下來(lái)看看這里發(fā)生了什么。瀏覽器對(duì)使用了我們自定義元素的 HTML 文件進(jìn)行語(yǔ)法分析時(shí)，它遇到了IMPORT 處理指令。處理指令比你想象的要好得多，它們處理指令。它們和被當(dāng)作文檔的一部分的 HTML 元素內(nèi)容不同。處理指令有指令執(zhí)行，完畢前停止一切語(yǔ)法分析的作用。在我們的例子中，IMPORT 的作用是說(shuō)明在我們剛才在 <HTML> 標(biāo)記里定義的命名空間 MYNS 中，有一個(gè)對(duì)標(biāo)記名的實(shí)現(xiàn)。標(biāo)記名由此實(shí)現(xiàn)所定義即 HTML 組件 .htc 文件；遇到 IMPORT 時(shí) HTML 語(yǔ)法分析器確保隨后在 HTML 文檔中遇到適當(dāng)?shù)臉?biāo)記時(shí)實(shí)現(xiàn)可用 (技術(shù)上，我們稱之為實(shí)例化)。實(shí)際上的效果就是當(dāng) HTML 語(yǔ)法分析器遇到 <MYNS:INCLUDE> 元素時(shí)，將依照文檔中已創(chuàng)建的元素創(chuàng)建相同的元素行為。
另外需要注意的是我們的元素 <MYNS:INCLUDE /> 屬于我們所說(shuō)的無(wú)域元素。這就是說(shuō)它在標(biāo)記明后有一個(gè)結(jié)束符 /，并且 HTML 語(yǔ)法分析器不需要尋找等價(jià)的 </MYNS:INCLUDE>。我們也可以使用以下同樣有效的標(biāo)記結(jié)構(gòu)，以便知道 non-element 的瀏覽器能處理提示內(nèi)容：
<MYNS:INCLUDE> this is where the included content would be displayed if you were using Internet Explorer 5.5 </MYNS:INCLUDE>
行為的內(nèi)容
現(xiàn)在我們有了一個(gè)基本的元素行為，下一步就是顯示一些內(nèi)容。我們使用 Internet Explorer 5.5 中的新功能 ViewLink，它使我們能在一個(gè)單獨(dú)的文檔片段中顯示 HTML 內(nèi)容。我們來(lái)看 include2.htc：(你需要通過(guò) includedemo2.htm 看它是如何工作的，它的唯一不同之處是元素行為implementation 引用的 .htc 文件)
<HTML>
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:DEFAULTS viewLinkContent="true" />
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
window.status="Include has been initialised";
}
</SCRIPT>
<BODY>
Here's some ViewLinked content for our element behavior:
</BODY>
</HTML>
這里我們?cè)?.htc 文件中添加了一個(gè)帶有一些內(nèi)容的 <BODY> 標(biāo)記和一個(gè)新的 PUBLIC:DEFAULTS 元素，它指明將 .htc 文件的內(nèi)容用作此行為的 ViewLinke 的內(nèi)容。我們運(yùn)行 includedemo2.htm 文件時(shí)會(huì)看到這一內(nèi)容以元素出現(xiàn)。它能這樣工作是因?yàn)椋瑥男Ч现v，.htc 文件是一個(gè) HTML 文件并且它的內(nèi)容由 HTML 語(yǔ)法分析器進(jìn)行語(yǔ)法分析。現(xiàn)在，ViewLink 技術(shù)允許我們顯示內(nèi)容而不必將其插入使用元素行為的主文檔。
包含內(nèi)容
include 行為的下一步是獲得文本文件并將其包含為 HTC 的 ViewLink 內(nèi)容。完成這些使我們使用一個(gè)可以在 Internet Explorer 5.0 中使用的異步下載數(shù)據(jù)行為。我們來(lái)看 include3.htc：(同樣，要看到演示，你需要 includedemo3.htm，它引用 include3.htc 實(shí)現(xiàn)它的行為)
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:PROPERTY name="src" />
<PUBLIC:DEFAULTS viewLinkContent="true" />
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
if (src)
{
dwn.startDownload(src, onDone);
}
}
function onDone(s)
{
dwn.innerText=s;
}
</SCRIPT>
<BODY id=dwn style = "behavior:url(#default#download)">
</BODY>
需要注意的第一件事是我們?cè)谛袨橹性黾恿艘粋�(gè)屬性聲明 src，它被用以指明我們希望下載的文件。注意由于安全原因，在 HTML 中引用時(shí)，下載行為只允許我們從同一域名 (實(shí)際上是指 Web 站點(diǎn)) 下載文件。我們還在 HTC 的 body 中添加了默認(rèn)下載行為，以及在初始化時(shí)下載文件并在收到文件后將其內(nèi)容放到 body 中所需的腳本。
行為的默認(rèn)設(shè)置
這樣我們就有了一個(gè)簡(jiǎn)單的元素，可以用來(lái)下載內(nèi)容并能在文檔中以文本方式顯示它們。現(xiàn)在我們使用元素行為的默認(rèn)格式功能來(lái)對(duì)它做一點(diǎn)小改進(jìn)，這樣我們可以指定元素行為的默認(rèn)格式信息，同時(shí)允許使用自定義元素的 HTML 頁(yè)面替換這些信息。在我們行為的下一個(gè)版本 include4.htc 中，我們對(duì) PUBLIC:DEFAULTS 元素作若下修改：
<PUBLIC:DEFAULTS viewLinkContent="true" style="background-color:beige; color:Blue; width:100%" />
這個(gè)修改的作用是使我們包含的內(nèi)容的顏色變成在灰棕底色上的藍(lán)色。然而，如果你有 HTML 文件的經(jīng)驗(yàn)，你知道可以在使用元素行為的文檔中替換這些設(shè)置。試著將 includedemo4.htm 文件中的 include 元素改為：
<MYNS:INCLUDE src="include4.htc" style="color:beige;background-color:blue"/>
這樣引用行為的文件中的命令就替換了默認(rèn)格式。 我們希望此元素的默認(rèn)寬度和引用它的文檔一樣，所以我們?cè)谀J(rèn)格式中指定了 100% 的寬度。
行為的改進(jìn)
自己實(shí)現(xiàn)這個(gè)行為以了解它是如何工作的。可以改進(jìn)的地方包括使用 HTML 內(nèi)容代替普通文本、包含一個(gè)標(biāo)題以說(shuō)明源代碼是從哪里引用的，等等。
|
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
