HTML COMPONENTS Part 5

　The ANYDAY component is defined in day, htc. This component is a package of the calendar unit. The name of the component is determined by the xml namespace defined on the first line.

af8b09d53169814d6ea4623d5b34ab46

　Just like canlenar.htc, you only have one namespace definition. The reason is that there is no need to call other HTCs on this page. That is to say, the HCT is a leaf HTC. The custom label we define here is DAY. We also define Its behavior, in fact, the definition of the HTML component is the definition of the custom tag behavior, which includes an attribute and an event:

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

Pay attention to the event oncontentready , when its caller calendar.htc asks to import day.htc and is fully imported, this event will be generated. The handler of the event is fnInit(). Let’s take a look at it:

function fnInit() { 
document.body.innerHTML = element.value; 
document.body.className = "clsDay"; 
defaults.viewLink = document; 
element.appointments = ""; 
element.date = element.value; 
}

　fnInit() demonstrates many important HTC chapter. The first line assigns element.value to the innerHTML of the calling page Attributes. HTML components are always encapsulated in element objects. The value attribute is generally defined in the PROPERTY tag. As a reminder, the actual value is passed in from the calling page, canlendar.htc:
text += '04a9424aea79d7e9b86559d6a25ece7c68ff40c1a4cfb4439ed76ebf0fb45b127710ec56a4b2af8032401628a11805db02316988d1129bf85d55319dd82c6742'
The cell style is specified on the second line:

document.body.className = "clsDay";
The style class clsDay is defined elsewhere on the page:

<STYLE> 
.clsDay { 
width:50; 
height:50; 
background-color:lightyellow; 
align:center; 
text-align:right; 
} 
</STYLE>

Notice that the dates in the calendar are colored bright yellow, which proves that HTC’s format-specific mode is dominated by its caller, namely: calendar.htc.
　The third line of fninit() sets the viewlink attribute of the default object. The viewLink attribute is the basis of the HTML component. It can make an HTC document (day.htc) visible to another HTML component (calendar.htc). Here it is viewLink settings:

defaults.viewLink = document;

　Note that what you need to connect is the entire document object. The last two lines of fnInit() initialize two internal properties that we will explain later:

element.appointments = "";
element.date = element.value;

is used for its own display, DAY HTML component is related to mouse click:

c202bab475885e36209b21834e00cfc9

When the day is clicked, the user is reminded to add his or her appointment on that day, or modify an existing appointment:

function fnShowAppts() { 
newAppointments = prompt("Add your 
appointment:", element.appointments); 
if (newAppointments != null) 
element.appointments = newAppointments; 
document.body.innerHTML = &#39;<FONT 
COLOR="red">&#39; + element.date + &#39;</FONT>&#39; + "<BR>" + &#39;<FONT 
SIZE="1">&#39; + element.appointments + &#39;</FONT>&#39;; 
}

The input mechanism here is very primitive, the user adds a new line tag (< ;BR>), otherwise they will all appear on one line. Finally innerHTML is the date data (element.date) and appointment designation (element.appointments) of connecting links.
　TODAY The HTML component (today.htc) is very similar to the ANYDAY component (day.htc). The only difference is that the background-color in the style sheet is pink instead of lightyellow, and the font color is blue instead of red.
Notice that the current date in the calendar is pink with blue background.

The above is the fifth content of HTML COMPONENTS. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!