|
IE里的探索之創(chuàng)建具有良好行為的自定義元素
（作者：青蘋果工作室編譯 2001年02月08日 13:28）
本文描述如何使用腳本和 HTML 創(chuàng)建你自己的 DHTML 元素行為，以用于 DHTML 頁面。Microsoft Internet Explorer 5.5 為動態(tài) HTML (DHTML) 開發(fā)者提供了令人興奮的新功能。我們將討論在 DHTML 頁面中使用腳本和 HTML 創(chuàng)建你自己的 DHTML 元素行為。開始討論前，我們來看看元素行為的一些背景知識。
元素行為與 Internet Explorer 5.0 所支持的行為不同，它真正實現(xiàn)了自定義元素。自定義元素和我們現(xiàn)在稱為附著行為的概念是在 Internet Explorer 5.0 中引入的，它們使你能使用 XML 語法在 HTML 文檔中添加自定義元素，如 <VEG:TURNIP>。隨后，可以使用 CSS behavior 屬性或 addbehavior() 方法在它或其它元素上附著行為。 這樣做的缺點是，當 behavior 屬性被重新定義時附著的行為就會被分離而新的行為不會立刻附著。為解決這個問題，在 IE5.5 引入了對我們稱為元素行為的支持，它永久地、不能撤銷地綁定在自定義元素上。這里我們需要說明，當你想要在 HTML 文檔中添加專有元素時，附著行為還是有用處的；但當自定義元素時，明確建議的方法是元素行為。
開始我們的行為
現(xiàn)在我們開始建立自己的可靠的自定義行為計劃。
關(guān)于 DHTML 元素行為，我們選擇開發(fā)一個 include 標記，它將一個文本文件作為 DHTML 頁面的一部分包含進來。元素行為可以提供比這更強大的功能，但從本文的目的出發(fā)，我們的選擇能使我們集中考慮元素行為的核心功能。
我們從一個 HTML 組件 (HTC) 文件實現(xiàn)的很簡單的元素行為開始。請看 include1.htc：
<PUBLIC:COMPONENT tagname="include">
<PUBLIC:ATTACH event="oncontentready" onevent="init();" />
</PUBLIC:COMPONENT>
<SCRIPT>
function init()
{
window.status="Include has been initialized";
}
</SCRIPT>
這里標記名 include 在行為元素 public:component 中指明�？匆幌率褂眠@個元素行為的 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> 標記里為自定義元素定義的命名空間和 IMPORT 處理指令，它告訴我們可以在哪里找到我們的元素行為�，F(xiàn)在，這個元素行為什么也不做，所以我們在行為中放置了腳本以便在初始化時在狀態(tài)欄里寫一些文本。這是一個用的調(diào)試技巧；這里它確認了我們的行為已經(jīng)被實例化。
在我們進一步開始給我們的行為添加有用的功能之前，我們暫停一下來看看這里發(fā)生了什么。瀏覽器對使用了我們自定義元素的 HTML 文件進行語法分析時，它遇到了IMPORT 處理指令。處理指令比你想象的要好得多，它們處理指令。它們和被當作文檔的一部分的 HTML 元素內(nèi)容不同。處理指令有指令執(zhí)行，完畢前停止一切語法分析的作用。在我們的例子中，IMPORT 的作用是說明在我們剛才在 <HTML> 標記里定義的命名空間 MYNS 中，有一個對標記名的實現(xiàn)。標記名由此實現(xiàn)所定義即 HTML 組件 .htc 文件；遇到 IMPORT 時 HTML 語法分析器確保隨后在 HTML 文檔中遇到適當?shù)臉擞洉r實現(xiàn)可用 (技術(shù)上，我們稱之為實例化)。實際上的效果就是當 HTML 語法分析器遇到 <MYNS:INCLUDE> 元素時，將依照文檔中已創(chuàng)建的元素創(chuàng)建相同的元素行為。
另外需要注意的是我們的元素 <MYNS:INCLUDE /> 屬于我們所說的無域元素。這就是說它在標記明后有一個結(jié)束符 /，并且 HTML 語法分析器不需要尋找等價的 </MYNS:INCLUDE>。我們也可以使用以下同樣有效的標記結(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)在我們有了一個基本的元素行為，下一步就是顯示一些內(nèi)容。我們使用 Internet Explorer 5.5 中的新功能 ViewLink，它使我們能在一個單獨的文檔片段中顯示 HTML 內(nèi)容。我們來看 include2.htc：(你需要通過 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>
這里我們在 .htc 文件中添加了一個帶有一些內(nèi)容的 <BODY> 標記和一個新的 PUBLIC:DEFAULTS 元素，它指明將 .htc 文件的內(nèi)容用作此行為的 ViewLinke 的內(nèi)容。我們運行 includedemo2.htm 文件時會看到這一內(nèi)容以元素出現(xiàn)。它能這樣工作是因為，從效果上講，.htc 文件是一個 HTML 文件并且它的內(nèi)容由 HTML 語法分析器進行語法分析�，F(xiàn)在，ViewLink 技術(shù)允許我們顯示內(nèi)容而不必將其插入使用元素行為的主文檔。
包含內(nèi)容
include 行為的下一步是獲得文本文件并將其包含為 HTC 的 ViewLink 內(nèi)容。完成這些使我們使用一個可以在 Internet Explorer 5.0 中使用的異步下載數(shù)據(jù)行為。我們來看 include3.htc：(同樣，要看到演示，你需要 includedemo3.htm，它引用 include3.htc 實現(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>
需要注意的第一件事是我們在行為中增加了一個屬性聲明 src，它被用以指明我們希望下載的文件。注意由于安全原因，在 HTML 中引用時，下載行為只允許我們從同一域名 (實際上是指 Web 站點) 下載文件。我們還在 HTC 的 body 中添加了默認下載行為，以及在初始化時下載文件并在收到文件后將其內(nèi)容放到 body 中所需的腳本。
行為的默認設置
這樣我們就有了一個簡單的元素，可以用來下載內(nèi)容并能在文檔中以文本方式顯示它們�，F(xiàn)在我們使用元素行為的默認格式功能來對它做一點小改進，這樣我們可以指定元素行為的默認格式信息，同時允許使用自定義元素的 HTML 頁面替換這些信息。在我們行為的下一個版本 include4.htc 中，我們對 PUBLIC:DEFAULTS 元素作若下修改：
<PUBLIC:DEFAULTS viewLinkContent="true" style="background-color:beige; color:Blue; width:100%" />
這個修改的作用是使我們包含的內(nèi)容的顏色變成在灰棕底色上的藍色。然而，如果你有 HTML 文件的經(jīng)驗，你知道可以在使用元素行為的文檔中替換這些設置。試著將 includedemo4.htm 文件中的 include 元素改為：
<MYNS:INCLUDE src="include4.htc" style="color:beige;background-color:blue"/>
這樣引用行為的文件中的命令就替換了默認格式。 我們希望此元素的默認寬度和引用它的文檔一樣，所以我們在默認格式中指定了 100% 的寬度。
行為的改進
自己實現(xiàn)這個行為以了解它是如何工作的�？梢愿倪M的地方包括使用 HTML 內(nèi)容代替普通文本、包含一個標題以說明源代碼是從哪里引用的，等等。
|
