Heim > Web-Frontend > HTML-Tutorial > HTML-KOMPONENTEN Teil 3

HTML-KOMPONENTEN Teil 3

黄舟
Freigeben: 2016-12-17 13:48:21
Original
1224 Leute haben es durchsucht

===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>
Nach dem Login kopieren

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



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:



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>
Nach dem Login kopieren

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"/>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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:



Wir übergeben einfach den Tag des Monats. Der gleiche Aufruf an ANYDAY:DAY übergibt auch einfach den Tag des Monats.

Das Obige ist der Inhalt von HTML, Komponenten und KOMPONENTEN. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage