HTML Component (HTML components) five

Source: Internet
Author: User
Tags add date define object definition first row

===anyday and Today htcs===

The anyday component is defined in DAY,HTC, which is an encapsulation of the calendar unit. The name of the component is determined by the XML namespace defined in the first row.

Just like CANLENAR.HTC, you have only one namespace definition, the reason is that the page does not have to call other HTC, which means that the HCT is the leaf htc, where we define the custom tag is day, and we also define its behavior, in fact, the definition of HTML component is the definition of custom label behavior, the behavior package Enclose an attribute and an event:

<public:component tagname= "Day" >
<property name= "Value" ></PROPERTY>
<attach event= "Oncontentready" onevent= "Fninit ()" <>/ATTACH>
</PUBLIC:COMPONENT>

Note that event Oncontentready, when its caller CALENDAR.HTC requires that the DAY.HTC be imported and fully imported, the event is generated and the handler for 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 a number of important HTC chapters. The first line assigns Element.value to the InnerHTML property of the calling page. HTML components are always encapsulated in an element object. The value attribute is generally defined in the property label as a reminder that the actual value is passed from the calling page, CANLENDAR.HTC:
Text + ' <td><anyday:day value= ' + dayofmonth + ' ></ANYDAY:DAY></TD> '
The cell style is specified in the second row:

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>


Note that the date in the calendar is filled with a bright yellow color, which proves that the specified pattern of HTC's format is governed by its callers, namely: CALENDAR.HTC.
The third line of Fninit () sets the Viewlink property of the default object, which is the basis of an HTML component that allows an HTC document (DAY.HTC) to be used on another HTML component (CALENDAR.HTC) is visible. Here is the Viewlink setting:

Defaults.viewlink = document;

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

Element.appointments = "";
Element.date = Element.value;

For its own display, day HTML component and mouse click Related:

<body >

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

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" & gt; ' + element.appointments + ' </FONT> ';
}

The input mechanism here is very primitive, and the user adds a new line label (<BR>) to the appointment designation, otherwise they will all appear on one line. The final innerHTML is the link between date data (Element.date) and appointment designation (element.appointments).
Today's HTML components (TODAY.HTC) and anyday components (DAY.HTC) are very similar. The only difference is that the background-color in the style is pink rather than lightyellow, and the font color is blue instead of red.
Note that the current date in the calendar is a blue word with a pink (pink) background.

The following section lists the complete code for the calendar we are talking about and a calendar code that is implemented without the HTC component method



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.