HTML 組件(HTML COMPONENTS)五
發(fā)布時(shí)間:2008-08-10 閱讀數(shù): 次 來(lái)源:網(wǎng)樂(lè)原科技
===ANYDAY 和 TODAY HTCs===
ANYDAY組件定義在day,htc中,該組件是日歷單元的一個(gè)封裝。組件的名字是由定義在第一行的XML命名空間決定的。
<HTML XMLNS:ANYDAY>
正如canlenar.htc一樣,你只有一個(gè)命名空間定義,原因是在該頁(yè)不用調(diào)用其他的HTC,也就是說(shuō)該HCT是葉子HTC,在
這里我們定義的自定義標(biāo)簽是DAY,同樣我們也定義它的行為,實(shí)際上,HTML組件的定義就是自定義標(biāo)簽行為的定義,該行為包
括一個(gè)屬性和一個(gè)事件:
<PUBLIC:COMPONENT tagName="DAY">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
注意事件 oncontentready ,當(dāng)它的調(diào)用者calendar.htc要求導(dǎo)入day.htc并且被完全導(dǎo)入,該事件就會(huì)產(chǎn)生,事件的處理
者是fnInit().我們來(lái)看看它:
function fnInit() {
document.body.innerHTML = element.value;
document.body.className = "clsDay";
defaults.viewLink = document;
element.appointments = "";
element.date = element.value;
}
fnInit()演示了很多重要的HTC章節(jié)。第一行把 element.value 指定給調(diào)用頁(yè)的 innerHTML 屬性。HTML組件總是封裝
在element對(duì)象里。value屬性一般定義在PROPERTY標(biāo)簽中,作為提醒,實(shí)際的值從調(diào)用頁(yè)面?zhèn)魅耄琧anlendar.htc:
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>'
單元樣式在第二行指定:
document.body.className = "clsDay";
樣式類 clsDay 定義在該頁(yè)的別處:
<STYLE>
.clsDay {
width:50;
height:50;
background-color:lightyellow;
align:center;
text-align:right;
}
</STYLE>
注意在日歷中日期的被填色為亮黃色,這證明HTC的格式的指定模式被它的調(diào)用者所支配,即:calendar.htc.
fninit()的第三行設(shè)置default對(duì)象的viewlink屬性,viewLink屬性是HTML組件的基礎(chǔ),它可以使得一個(gè)HTC文
檔(day.htc)對(duì)另一個(gè)HTML組件(calendar.htc)來(lái)說(shuō)可見(jiàn).這兒就是viewLink的設(shè)置:
defaults.viewLink = document;
注意您需要聯(lián)接的是整個(gè)document對(duì)象。fnInit()的最后兩行初始化我們將在以后解釋的兩個(gè)內(nèi)部屬性:
element.appointments = "";
element.date = element.value;
用于它本身的顯示,DAY HTML組件和鼠標(biāo)點(diǎn)擊相關(guān):
<BODY onclick="fnShowAppts()">
當(dāng)該天被點(diǎn)擊,用戶被提醒在該天加上他或她的約會(huì),或者修改已經(jīng)存在的約會(huì):
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>';
}
這里的輸入機(jī)制非常原始,用戶在約會(huì)指定中加入新行標(biāo)簽(<BR>),否則他們將都顯示在一行。最后innerHTML是日期數(shù)據(jù)(element.date)和約會(huì)指定(element.appointments)
的連接紐帶。
TODAY HTML組件(today.htc)和ANYDAY組件(day.htc)非常類似。唯一的不同是樣式快中的background-color是pink而不是lightyellow,并且字體顏色是blue 而不是red.
注意在日歷中當(dāng)前日期是粉紅色(pink)背景藍(lán)色的字。
下節(jié)將列出我們所講的日歷的完整代碼和一個(gè)不用HTC組件方法實(shí)現(xiàn)的日歷代碼: