<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 asks to import DAY.HTC and is fully imported, the event is generated, and the handler for the event is Fninit (). Let's look at it:
function Fninit () {Document.body.innerHTML = Element.value; document.body.className = "Clsday"; defaults.viewlink = Docu ment; Element.appointments = ""; Element.date = Element.value; }Fninit () demonstrates a number of important HTC chapters. The first line assigns the 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 tag as a reminder that the actual value is passed in from the calling page, CANLENDAR.HTC:
Text + = ' <td><anyday:day value= ' + dayofmonth + ' ></ANYDAY:DAY></TD> '
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 >
Note that the fill of the date in the calendar is bright yellow, which proves that the specified mode of the HTC format is dictated by its callers, namely: CALENDAR.HTC.
The third line of Fninit () sets the Viewlink property of the default object, and the Viewlink property is the basis of the HTML component, which can make one HTC document (DAY.HTC) to 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 we will explain later:
Element.appointments = "";
Element.date = Element.value;
For its own display, the day HTML component is associated with mouse clicks:
<body onclick= "fnshowappts ()" >
When the day is clicked, the user is reminded to add his or her appointment on that 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 row label (<BR>) to the appointment designation, otherwise they will all be displayed on one line. The last innerHTML is the connection between the date data (element.date) and the appointment designation (element.appointments).
The TODAY HTML Component (TODAY.HTC) and the Anyday component (DAY.HTC) are very similar. The only difference is that the background-color in the style is pink instead of lightyellow, and the font color is blue rather than red.
Note the current date in the calendar is a blue word with a pink (pink) background.
The above is the content of the HTML component (HTML components) Five, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
