HTML組件(HTML COMPONENTS)之五

最後更新：2016-12-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　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)背景藍色的字。

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



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More