HTML元件(HTML COMPONENTS)之五

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



　　正如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 += ''
單元樣式在第二行指定：

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組件和滑鼠點擊相關：



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

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

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

 以上就是HTML組件(HTML COMPONENTS)之五的內容，更多相關文章請關注PHP中文網（www.php.cn）！