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

HTML/XHTML教程
通过W3C XHTML1.0及CSS标准必须注意的九个问题
注意这11个问题保证CSS的渲染效率
用css+js定义input_file元素的样式来兼容FireFox
CSS技巧:如何使未知高宽的图片实现垂直居中
CSS基础教程:布局网页技巧的完全学习手册
css知识:Div和Span在使用中的不同之处
css技巧:批量保存div+css网页中的图片的几种方法
CSS技巧:常用的属性代码简化表
介绍二款b/s开发中常用小工具
css教程:IE6、IE7和FF的hack的运用技巧
Google改进SSL机制,控制SSL安全机制存漏洞
css技巧:分享9个网页制作常用技巧
规范Web站点设计css类以及id的命名方式
html教程:WEB标准从头开始_DOCTYPE声明
html/css教程:背景图片的定位问题详解
CSS教程:自动隐藏网页文字的技巧
汇总一些IE与Firefox的CSS兼容问题及解决办法
网页中利用Title属性的好处
40多个漂亮的网页表单设计实例
制作商业HTML邮件的建议

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 35 ::
收藏到网摘: 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对象有别的属性并且会在别的地方被