HTML组件(HTML COMPONENTS)之三
日期：2013-08-05 浏览次数：20707 次
===最顶级页面===
如今我们将我们凝视的焦点转向我们的日历使用例子，该使用包括4个不同页面，canlendar.html为最顶级HTML文档，该页包含了calendar.htc HTC，而canlendar.htc有反过来包含两一般的HTC：day.htc和today.htc,calendar.html
内容如下：
Click a day in the calendar to add or modify your schedule.
有几个要点您必须重点留意：第一、命名空间定义在〈HTML〉标记中，我们需求使用在我们要调用的HTC中定义的命名空间，在canlendar.htc中的命名空间是:MYCAL，所以在标记中必须出现XMLNS标识。
标记以问号开始以和别的正常标记区别开，该标记要求浏览器导入指定的HTC：calendar.htc,HTC可以有多个命名空间，故在导入时需求指明要使用的命名空间（MYCAL）：
HTC的次要优点之一就是：浏览器将不断挂起页面解析直到输入文件全部被导入为止。页面处理的异步机制将导致许多问题，浏览器并不等元素曾经完全显示才开始解析页面，作为例子，你可以建立一个对象，并且在文挡的顶部访问一个在页面底部的方法，如果对象由于某些缘由为预备好，你将会得到一个错误指示没有该对象不存在或该对象不支持你要访问的方法，置信您曾经碰到过此类事情了吧！不管这样，?IMPORT 是同步的，并且浏览器会不断等待页面导入完毕并且内容预备好。
页面独一而且重要的一行是调用自定义标记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">
<!--
function fnInit()
{
defaults.viewLink = document;
}
// -->
</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">
<!--
function fnInit()
{
defaults.viewLink = document;
}
// -->
</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>
