HTML 组件（HTML COMPONENTS）是IE5。0的主要扩展之一，其也最具革命性，微软的意图是用HTML组件来取代ACTIVEX控件，和ACTIVE控件一样，HTML组件是自持续封闭对象，可以一次开发任意使用，使用HTML组件有很多好处，本文将给您揭示其中的一些！
HTML组件带入了很多新的术语、思想、对象、方法和属性，我将通过一个日历应用给您接受这些，这个日历应用显示当前月的日期、星期并且高亮度显示当前日期。
====HTML行为和HTC行为===
HTML组件封装了HTML内容，并可以插入到别的HTML文档中。在HTML组件出现以前，在HMTL文档中使用自定义控制唯一的办法就是使用微软ACTIVEX控件，ACTIVEX控件的一个缺点之一就是使用前必须客户机安装HTML控件，另一方面将主页面下载到客户机，对于DHTML的作者来说HTML控件更具吸引力，因为他们可以使用他们熟悉的语言开发自己的控件和组件，HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，它包括脚本和一系列HTC自定义说明元素，这些元素定义了HTML组件的属性、方法、事件等，所有HTC元素通过对象的ID属性作为对象在脚本中使用，所有方法和属性均可在脚本中动态操作。
您可以使用HTC实现以下行为：
*设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
*设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，
通过“createEventObject()”方法设置事件环境。
*访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回
一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。
*收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通
知HTC两种特殊事件：oncontentready事件和ondocumentready事件 。
HTC封装了行为的定义 ，行为的概念第一次出现是在IE5。0中，HTC中的高级行为封装就是行为不能和元素标记分离，在IE5。0中，在脚本中行为可以从元素中分离出来，而在IE5。5中，元素不能和其原始行为分离。
===定义标记和命名空间===
HTC的基础是自定义标记，自定义标记的第一次出现是在IE5。0中，它可以让WEB作者通过与结构关联的一系列样式来定义文挡结构，例如：您可以定义一个新标记<RIGHT>（段落右对其） 中国公务网 2004-5-31 15:52:16
<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS/:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCJS:RIGHT>
Read Doc JavaScript's columns, tips, tools, and tutorials
</DOCJS:RIGHT>
</BODY>
</HTML>
在Internet Explorer中您要为页面定义自定义标记，必须为该标记提供命名空间，自定义标记是基于XML符号的XML命名空间，正如以下所示。我们使用DOCJS命名空间：
<HTML XMLNS:DOCJS>
XMLNS是XML NameSpace的缩写，我定义了一个叫做RIGHT的自定义标记，要使用该标记必须在该标记前加上正确的XML命名空间前缀：DOCJS:RIGHT,如果命名空间未定义，则在文档解析时，自定义标记将作为未知标记处理尽管页面有未知标记，但不会导致错误，不影响别的标记，并且没有任何行为可以应用在其上，你可以在单个HTML标记中定义多个命名空间：
<HTML XMLNS:DOCJS XMLNS:DOCJAVASCRIPT>
===最顶级页面===
现在我们将我们注视的焦点转向我们的日历应用例子，该应用包括4个不同页面，canlendar.html为最顶级HTML文档，该页包含了calendar.htc HTC，而canlendar.htc有反过来包含两个别的HTC：day.htc和today.htc,calendar.html
内容如下：
<HTML XMLNS:MYCAL>
<HEAD>
<TITLE>Calendar Example</TITLE>
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
</HEAD>
<BODY>
<P>Click a day in the calendar to add or modify your schedule.</P>
<MYCAL:CALENDAR></MYCAL:CALENDAR>
</BODY>
</HTML>
有几个要点您必须重点注意：第一、命名空间定义在〈HTML〉标记中，我们需要使用在我们要调用的HTC中定义的命名空间，在canlendar.htc中的命名空间是:MYCAL，所以在<HTML>标记中必须出现XMLNS标识。
<?IMPORT>标记以问号开始以和别的正常标记区别开，该标记要求浏览器导入指定的HTC：calendar.htc,HTC可以有多个命名空间，故在导入时需要指明要使用的命名空间（MYCAL）：
<?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/>
HTC的主要优点之一就是：浏览器将一直挂起页面解析直到输入文件全部被导入为止。页面处理的异步机制将导致许多问题，浏览器并不等元素已经完全显示才开始解析页面，作为例子，你可以建立一个对象，并且在文挡的顶部访问一个在页面底部的方法，如果对象因为某些原因为准备好，你将会得到一个错误指示没有该对象不存在或该对象不支持你要访问的方法，相信您已经碰到过此类事情了吧！不管这样，?IMPORT 是同步的，并且浏览器会一直等待页面导入完毕并且内容准备好。
页面唯一而且重要的一行是调用自定义标记MYCAL:CALENDAR:
<MYCAL:CALENDAR></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"/> Www.GongWu.Com.Cn 2007-1-12 17:49:13
<?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"> GongWu.Com.Cn 2004-5-31 15:52:16
<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>
===编写日历一===
当calendar.html调用 MYCAL:CALENDAR,当月的日历将会显示在页面中，函数setCal()是主要程序段，它初始化一些变量并调用drawCal()函数。我们也使用了三个别的函数：getMonthName()、 getDays() 和 leapYear()。让我们从最后一个函数开始：
getDays()函数接收哪月值和哪年值，并且建立一个有12个元素的数组，用来存放每月的天数，哪一年用来决定是不是闰年，在闰年中二月是29天，而不是闰年是28天。该函数返回指定月份的天数。
以下是getDays()：
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ? 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December
// return number of days in the specified month (parameter)
return ar[month];
}
扫一扫
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
