網頁設計HTML組件HTML COMPONENTS之三 @ lixiangni

無標題文件

網頁設計HTML組件HTML COMPONENTS之三

發佈者:SEO香港優化專家 - Web Design

網站設計
　　現在我們將我們注視的焦點轉向我們的日曆應用例子，該應用包括4個不同頁面，canlendar.html為最頂級HTML文檔，該頁包含了calendar.htc HTC，而canlendar.htc有反過來包含兩個別的HTC：day.htc和today.htc,calendar.html
內容如下：

<HTML XMLNS:MYCAL>
<HEAD>
<TITLE>Calendar Example</TITLE>
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
</HEAD>

<BODY>
<P>Click a day in the calendar to add or modify your schedule.</P>

<MYCAL:CALENDAR></MYCAL:CALENDAR>

</BODY>
</HTML>

　　有幾個要點您必須重點注意：第一、命名空間定義在〈HTML〉標記中，我們需要使用在我們要調用的HTC中定義的命名空間，在canlendar.htc中的命名空間是:MYCAL，所以在<HTML>標記中必須出現XMLNS標識。
　　<?IMPORT>標記以問號開始以和別的正常標記區別開，該標記要求瀏覽器導入指定的HTC：calendar.htc,HTC可以有多個命名空間，故在導入時需要指明要使用的命名空間（MYCAL）：

<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>

　　HTC的主要優點之一就是：瀏覽器將一直掛起頁面解析直到輸入文件全部被導入為止。頁面處理的異步機制將導致許多問題，瀏覽器並不等元素已經完全顯示才開始解析頁面，作為例子，你可以建立一個對象，並且在文擋的頂部訪問一個在頁面底部的方法，如果對像因為某些原因為準備好，你將會得到一個錯誤指示沒有該對像不存在或該對像不支持你要訪問的方法，相信您已經碰到過此類事情了吧！不管這樣，?IMPORT 是同步的，並且瀏覽器會一直等待頁面導入完畢並且內容準備好。
　　頁面唯一而且重要的一行是調用自定義標記MYCAL:CALENDAR:

<MYCAL:CALENDAR></MYCAL:CALENDAR>

　　因為頁面已經導入，故該調用將會像在calendar.htc所指定的那樣建立一個日曆。

　　您可能已經注意到HTC可以包含別的HTC，calendar.htc包括兩個別的HTML組件，每個月的所有日期:day.htc和與當前日期一致的today.htc,以下是canlendar.htc的頂部15行：

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY>
<HEAD>
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>

　　第一行在這些HTC會用到的XML命名空間。這些命名空間即包括本頁自己要用到的，也包括頁面需調用的命名空間（ANYDAY 和 TODAY ），注意命名空間並不一定要和HTC文件文件名一致。接著，我們導入這些HTC：

<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

　　當我們解析到這些行，瀏覽器將一直等到要導入的文件被導入才繼續頁面解析（同步導入）。

然後我們定義CALENDAR自定義標記：

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

　　PUBLIC:COMPONENT用來描述CALENDAR標記，在開始和結束標記之間，您可以將事件附加到CALENDAR標記上，事件oncontentready將在calendar.htc文件全部被導入，並被解析時，指定處理時間的是定義在javascript的函數：fnInit()：

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

　　viewLink指定的值非常重要，它是HTML組件的基礎，它連接了HTML組件和調用該HTML組件的頁面，defaults對像有別的屬性並且會在別的地方被覆蓋，我們給viewLink屬性賦的是HTML文檔對象，正因為該連接，我們才可以建立HTC組件和包含頁面互訪。
　　我們將在後面解釋日曆的層。注意，儘管在日曆中當月的當天框和其他天框、空框的樣式不一樣，但是我們通過優先級法則來實現在包含頁中，HTML組件忽略任何相互衝突的樣式定義。calendar.htc的樣式定義如下：

<STYLE>
TD {
background-color:tan;
width:50;
height:50;
}
</STYLE>

　　現在將該定義和日曆比較，只有空框是的顏色是黃褐色的，我們調用的HTC忽略了這些定義，被調用的頁面都嵌入了頁面定制。以下調用TODAY:DAY HTML組件：

<TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY>

　　我們只是簡單的傳入了當月中的第幾天，同樣的調用ANYDAY:DAY 也是簡單的傳入當月中的第幾天：

<ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY>

網頁寄存