HTML COMPONENTS Part 3-HTML Tutorial-php.cn

HTML COMPONENTS Part 3

黄舟

Release： 2016-12-17 13:48:21

Original

1224 people have browsed it

===Top page===

Now we turn our focus to our calendar application example. The application includes 4 different pages. canlendar.html is the top-level HTML document, which contains calendar.htc HTC, and canlendar.htc in turn contains two other HTCs: day.htc and today.htc, calendar.html
The content is as follows:

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>

Copy after login

There are several points you must pay attention to: First, the namespace is defined in In the tag, we need to use the namespace defined in the HTC we want to call. The namespace in canlendar.htc is: MYCAL, so the XMLNS tag must appear in the tag.
　　The tag starts with a question mark to distinguish it from other normal tags. This tag requires the browser to import the specified HTC: calendar.htc. HTC can have multiple namespaces, so you need to specify the one to be used when importing. Namespace (MYCAL):

　One of the main advantages of HTC is that the browser will suspend page parsing until all input files have been imported. The asynchronous mechanism of page processing will cause many problems. The browser does not wait for the element to be fully displayed before starting to parse the page. As an example, you can create an object and access a method at the bottom of the page at the top of the document. If the object is because Be prepared for some reason, you will get an error indicating that the object does not exist or the object does not support the method you want to access. I believe you have encountered such things! Regardless, ?IMPORT It's synchronous, and the browser waits until the page is imported and the content is ready.

　The only and important line on the page is to call the custom tag MYCAL:CALENDAR:

Since the page has already been imported, this call will create a calendar as specified in calendar.htc.

You may have noticed that HTC can contain other HTCs. calendar.htc contains two other HTML components, all the days of each month: day.htc and today.htc that is consistent with the current date. The following is canlendar.htc Top 15 lines:

<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>

Copy after login

The first line is in these XML namespaces that HTC will use. These namespaces include those used by this page itself, as well as namespaces that the page needs to call (ANYDAY and TODAY ), note that the namespace does not have to be the same as the HTC file name. Next, we import these HTCs:

<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/> 
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

Copy after login

When we parse these lines, the browser will wait until the file to be imported is imported before continuing the page parsing (synchronous import).

Then we define the CALENDAR custom tag:

<PUBLIC:COMPONENT tagName="CALENDAR"> 
<ATTACH 
EVENT="oncontentready" ONEVENT="fnInit()"/> 
</PUBLIC:COMPONENT>

Copy after login

PUBLIC:COMPONENT is used to describe the CALENDAR tag. Between the start and end tags, you can attach events to the CALENDAR tag. The event oncontentready will be in the calendar.htc file When all are imported and parsed, the processing time is specified by the function defined in Javascript: fnInit():

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function 
fnInit() 
{ 
defaults.viewLink = document; 
} 
// --> 
</SCRIPT>

Copy after login

The value specified by viewLink is very important. It is the basis of the HTML component. It connects the HTML component and calls the For HTML component pages, the defaults object has other attributes and will be overridden elsewhere. We assign the viewLink attribute to the HTML document object. Because of this connection, we can establish mutual access between the HTC component and the containing page.
　We will explain the layers of the calendar later. Note that although the day box of the current month in the calendar has different styles from other day boxes and empty boxes, we use the priority rule to achieve that in the containing page, the HTML component ignores any conflicting style definitions. The style definition of calendar.htc is as follows:

<STYLE> 
TD { 
background-color:tan; 
width:50; 
height:50; 
} 
</STYLE>

Copy after login

Now compare this definition with the calendar. Only the color of the empty box is tan. The HTC we called ignored these definitions, and the page being called has page customization embedded in it. The following calls TODAY:DAY HTML component:

　 We simply pass in the day of the month. The same call to ANYDAY:DAY also simply passes in the day of the month:

The above is the content of HTML, components, and COMPONENTS. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!