Heim > Artikel > Web-Frontend > HTML-KOMPONENTEN Teil 3
HTML-KOMPONENTEN Teil 3
- 黄舟Original
- 2016-12-17 13:48:211135Durchsuche
===Oberste Seite===
Jetzt konzentrieren wir uns auf unser Kalenderanwendungsbeispiel. Die Anwendung enthält 4 verschiedene Seiten, canlendar.html ist das HTML-Dokument der obersten Ebene, das Calendar.htc enthält
HTC und canlendar.htc wiederum enthalten zwei weitere HTC: day.htc und today.htc, Calendar.html
Der Inhalt lautet wie folgt:
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>
Es gibt mehrere Punkte, die Sie beachten müssen Wichtiger Hinweis: Zuerst wird der Namespace im -Tag definiert. Der Namespace in canlendar.htc lautet also: MYCAL Der XMLNS-Bezeichner muss in der .
Das f442b94949c0d646ac360291f638c46f-Tag beginnt mit einem Fragezeichen, um es von anderen normalen Tags zu unterscheiden. Dieses Tag erfordert, dass der Browser den angegebenen HTC-Namespace importiert. Sie müssen also angeben, wann Importieren des verwendeten Namespace (MYCAL):
d1da7a5118e510a4595ed5b5805823e1
Einer der Hauptvorteile von HTC besteht darin, dass der Browser die Seitenanalyse unterbricht, bis alle Eingabedateien importiert wurden. Der asynchrone Mechanismus der Seitenverarbeitung verursacht viele Probleme. Der Browser wartet nicht, bis das Element vollständig angezeigt wird, bevor er mit dem Parsen der Seite beginnt. Sie können beispielsweise ein Objekt erstellen und auf eine Methode unten auf der Seite zugreifen Wenn das Objekt aus irgendeinem Grund vorbereitet ist, wird eine Fehlermeldung angezeigt, die darauf hinweist, dass das Objekt nicht vorhanden ist oder die Methode, auf die Sie zugreifen möchten, nicht unterstützt. Egal, ?IMPORT
Es ist synchron und der Browser wartet darauf, dass die Seite importiert wird und der Inhalt bereit ist.
Die einzige und wichtige Zeile auf der Seite ist der Aufruf des benutzerdefinierten Tags MYCAL:CALENDAR:
f815752b699473ba4718f31ac0c9b58ac315d85ac7fc8f273e9e4963bb4dd146
Da die Seite bereits importiert wurde, erstellt dieser Aufruf einen Kalender wie in Calendar.htc angegeben.
Möglicherweise ist Ihnen aufgefallen, dass HTC zwei weitere HTML-Komponenten enthalten kann, nämlich alle Tage eines Monats: day.htc und today.htc, die mit dem aktuellen Datum übereinstimmen ist Die oberen 15 Zeilen von canlendar.htc:
<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> Die erste Zeile enthält die XML-Namespaces, die HTC verwenden wird. Zu diesen Namespaces gehören diejenigen, die von dieser Seite selbst verwendet werden, sowie Namespaces, die die Seite aufrufen muss (ANYDAY und TODAY).
), beachten Sie, dass der Namespace nicht mit dem HTC-Dateinamen identisch sein muss. Als nächstes importieren wir diese HTCs:
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/> <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
Wenn wir diese Zeilen analysieren, wartet der Browser, bis die zu importierende Datei importiert wurde, bevor er mit der Seitenanalyse fortfährt (synchroner Import).
Dann definieren wir das benutzerdefinierte CALENDAR-Tag:
<PUBLIC:COMPONENT tagName="CALENDAR"> <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/> </PUBLIC:COMPONENT>
PUBLIC:COMPONENT wird verwendet, um das CALENDAR-Tag zu beschreiben, das Sie hinzufügen können events Angehängt an das CALENDAR-Tag wird das Ereignis oncontentready importiert und analysiert, wenn die Datei Calendar.htc vollständig importiert ist. Die angegebene Verarbeitungszeit ist die in Javascript definierte Funktion: fnInit():
<SCRIPT LANGUAGE="JavaScript">
<!--
function
fnInit()
{
defaults.viewLink = document;
}
// -->
</SCRIPT> Der von viewLink angegebene Wert ist die Basis der HTML-Komponente. Er verbindet die Seite, die die HTML-Komponente aufruft, und wird an anderer Stelle überschrieben Durch das viewLink-Attribut können wir aufgrund dieser Verbindung HTC-Komponenten erstellen und den Seitenzugriff einschließen.
Wir werden die Ebenen des Kalenders später erklären. Beachten Sie, dass das Tagesfeld des aktuellen Monats im Kalender zwar andere Stile als andere Tagesfelder und leere Felder aufweist, wir jedoch die Prioritätsregel verwenden, um zu erreichen, dass die HTML-Komponente auf der enthaltenden Seite alle widersprüchlichen Stildefinitionen ignoriert. Die Stildefinition von Calendar.htc lautet wie folgt:
<STYLE>
TD {
background-color:tan;
width:50;
height:50;
}
</STYLE> Vergleichen Sie nun diese Definition mit dem Kalender. Nur die Farbe des leeren Felds ist braun. Das aufgerufene HTC ignoriert diese Definitionen und die aufgerufene Seite enthält eine eingebettete Seitenanpassung. Die folgenden Aufrufe HEUTE:TAG
HTML-Komponente:
d61cf43a855e052a93cad934d5c1e329df6879774f7e535618eec112bf43935a
Wir übergeben einfach den Tag des Monats. Der gleiche Aufruf an ANYDAY:DAY übergibt auch einfach den Tag des Monats.
68ff40c1a4cfb4439ed76ebf0fb45b127710ec56a4b2af8032401628a11805db
Das Obige ist der Inhalt von HTML, Komponenten und KOMPONENTEN. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!