HTML组件(HTML COMPONENTS)之五

 ===ANYDAY 和 TODAY HTCs===

  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 >

当该天被点击,用户被提醒在该天加上他或她的约会,或者修改已经存在的约会:

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

  下节将列出我们所讲的日历的完整代码和一个不用HTC组件方法实现的日历代码

时间: 2024-10-04 00:13:54

HTML组件(HTML COMPONENTS)之五的相关文章

HTML组件(HTML COMPONENTS)之一

HTML 组件(HTML COMPONENTS)是IE5.0的主要扩展之一,其也最具革命性,微软的意图是用HTML组件来取代ACTIVEX控件,和ACTIVE控件一样,HTML组件是自持续封闭对象,可以一次开发任意使用,使用HTML组件有很多好处,本文将给您揭示其中的一些! HTML组件带入了很多新的术语.思想.对象.方法和属性,我将通过一个日历应用给您接受这些,这个日历应用显示当前月的日期.星期并且高亮度显示当前日期. ====HTML行为和HTC行为=== HTML组件封装了HTML内容,并

HTML组件(HTML COMPONENTS)之三

===最顶级页面=== 现在我们将我们注视的焦点转向我们的日历应用例子,该应用包括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. <?XML:NAMESPACE PREFIX = MYCA

HTML组件(HTML COMPONENTS)之八

===TODAY HTC===  <HEAD> <PUBLIC:COMPONENT tagName="DAY"> <PROPERTY NAME="value"></PROPERTY> <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"></ATTACH> </PUBLIC:COMPONENT> &

HTML组件(HTML COMPONENTS)之七

===CALENDAR HTC===  <HEAD> <?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/> <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/> <PUBLIC:COMPONENT tagName="CALENDAR"> <A

HTML组件(HTML COMPONENTS)之六

====日历主页面===  <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.<

HTML组件(HTML COMPONENTS)之四

===编写日历一=== 当calendar.html调用 MYCAL:CALENDAR,当月的日历将会显示在页面中,函数setCal()是主要程序段,它初始化一些变量并调用drawCal()函数.我们也使用了三个别的函数:getMonthName(). getDays() 和 leapYear().让我们从最后一个函数开始: getDays()函数接收哪月值和哪年值,并且建立一个有12个元素的数组,用来存放每月的天数,哪一年用来决定是不是闰年,在闰年中二月是29天,而不是闰年是28天.该函数返回

HTML组件(HTML COMPONENTS)之二

===定义标记和命名空间=== HTC的基础是自定义标记,自定义标记的第一次出现是在IE5.0中,它可以让WEB作者通过与结构关联的一系列样式来定义文挡结构,例如:您可以定义一个新标记<RIGHT>(段落右对其) <HTML XMLNS:DOCJS> <HEAD> <STYLE> @media all { DOCJS\:RIGHT {text-align:right; width:100} } </STYLE> </HEAD> <

以增加收藏夹功能为实例,解析asp.net forums2结构流程及组件设计

asp.net|设计 td id="1" class="ControlPanelTabInactive" align="center" nowrap>            <a href="<%=Globals.GetSiteUrls().MyFavorites%>"><%=ResourceManager.GetString("MyFavorites_Title")%&

Web Components是个什么样的东西

前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的components 等等,无一不是前端组件化的一种实现和探索,但是提上议程的 Web Components 标准是个怎样的东西,相关的一些框架或者类库,如 React,Angular2,甚至是 x-tag,polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里?我花时间努力地把现有的 W3C Web C