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

無標題文件

網頁設計HTML組件HTML COMPONENTS之五

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

網站設計 ANYDAY組件定義在day,htc中，該組件是日曆單元的一個封裝。組件的名字是由定義在第一行的XML命名空間決定的。

<HTML XMLNS:ANYDAY>

　　正如canlenar.htc一樣，你只有一個命名空間定義，原因是在該頁不用調用其他的HTC，也就是說該HCT是葉子HTC，在這裡我們定義的自定義標籤是DAY，同樣我們也定義它的行為，實際上，HTML組件的定義就是自定義標籤行為的定義，該行為包括一個屬性和一個事件：

<PUBLIC:COMPONENT tagName="DAY">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>

　　注意事件 oncontentready ，當它的調用者calendar.htc要求導入day.htc並且被完全導入，該事件就會產生，事件的處理者是fnInit().我們來看看它：

function fnInit() {
document.body.innerHTML = element.value;
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}

　　fnInit()演示了很多重要的HTC章節。第一行把 element.value 指定給調用頁的 innerHTML 屬性。HTML組件總是封裝在element對像裡。value屬性一般定義在PROPERTY標籤中，作為提醒，實際的值從調用頁面傳入，canlendar.htc:
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>'
單元樣式在第二行指定：

document.body.className = "clsDay";
樣式類 clsDay 定義在該頁的別處：

<STYLE>
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
</STYLE>

　　注意在日曆中日期的被填色為亮黃色，這證明HTC的格式的指定模式被它的調用者所支配，即：calendar.htc.
　　fninit()的第三行設置default對象的viewlink屬性，viewLink屬性是HTML組件的基礎，它可以使得一個HTC文檔(day.htc)對另一個HTML組件(calendar.htc)來說可見.這兒就是viewLink的設置：

defaults.viewLink = document;

　　注意您需要聯接的是整個document對象。fnInit()的最後兩行初始化我們將在以後解釋的兩個內部屬性：

element.appointments = "";
element.date = element.value;

用於它本身的顯示，DAY HTML組件和鼠標點擊相關：

<BODY onclick="fnShowAppts()">

當該天被點擊，用戶被提醒在該天加上他或她的約會，或者修改已經存在的約會：

function fnShowAppts() {
newAppointments = prompt("Add your appointment:", element.appointments);
if (newAppointments != null) element.appointments = newAppointments;
document.body.innerHTML = '<FONT COLOR="red">' + element.date + '</FONT>' + "<BR>" + '<FONT SIZE="1">' + element.appointments + '</FONT>';
}

　　這裡的輸入機制非常原始，用戶在約會指定中加入新行標籤(<BR>)，否則他們將都顯示在一行。最後innerHTML是日期數據(element.date)和約會指定(element.appointments) 的連接紐帶。
　　TODAY HTML組件(today.htc)和ANYDAY組件(day.htc)非常類似。唯一的不同是樣式快中的background-color是pink而不是lightyellow,並且字體顏色是blue 而不是red.
　　注意在日曆中當前日期是粉紅色(pink)背景藍色的字。

　　下節將列出我們所講的日曆的完整代碼和一個不用HTC組件方法實現的日曆代碼

網頁寄存