当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML组件(HTML COMPONENTS)之三

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

HTML/XHTML教程 中的 HTML组件(HTML COMPONENTS)之三


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 56 ::
收藏到网摘: n/a

 

 ===最顶级页面===

  现在我们将我们注视的焦点转向我们的日历应用例子,该应用包括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"/>
<?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对象有别的属性并且会在别的地方被