Übersicht über die Definition der HTC-Komponenten nach IE5.0

(1) Fügen Sie zunächst diesem „Verhalten“ mehrere Ereignisantworten hinzu. Das Format für die Anweisung lautet wie folgt:
<PUBLIC:ATTACH EVENT="beimMouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="beimMouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="beimMousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
[\s\S ]*\n
"EVENT" entspricht dem gewünschten Eventnamen, hier sind es nmouseover, onmouseout, onmousedown, onmouseup. Sie können natürlich auch andere Eventnamen hinzufügen, um Ihren speziellen Anforderungen gerecht zu werden. „ONEVENT“ entspricht einem einzelnen Eventhandler, also dem Namen der Funktion, die aufgerufen wird, wenn das Event ausgelöst wird. Die Funktion glowit() erzeugt einen roten Schein um Schriftarten. Die Funktion noglow() eliminiert den Leuchteffekt der Schrift. Die Funktion Font2yellow() ändert die Schriftfarbe in Gelb. Die Funktion Font2blue() ändert die Schriftfarbe in Blau. Die Definitionen aller vier Ereignisse sind ähnlich.
(2) Als nächstes fügen Sie diesem „Verhalten“ wie folgt zwei weitere „Methoden“-Definitionen hinzu.
<PUBLIC:METHOD NAME="nach_unten verschieben"/>
<PUBLIC:METHOD NAME="nach_rechts_bewegen"/>
Der Parameter „NAME“ entspricht dem angegebenen „Methoden“-Namen. move_down und move_right sind die Funktionsnamen, die den „Methoden“ zum Bewegen nach unten bzw. nach rechts entsprechen. Beachten Sie, dass nach dem Methodennamen keine Klammern „()“ stehen dürfen. Schreiben Sie ihn also nicht als „move_down()“, was in der Syntax der „Methoden“-Definition nicht zulässig ist.
(3) Im nächsten Schritt schreiben wir mittels Javascript-Skriptanweisungen die entsprechenden Funktionsinhalte zu „Eventhandler“ und „Methode“ in der uns bekannten DHTML-Umgebung, um den gewünschten Effekt zu erzielen. Konkrete Inhalte finden Sie im Quellcode weiter unten. Der Parameter „Element“ bezieht sich auf das Objekt, an das dieses „Verhalten“ angehängt wird, da „Verhalten“ immer an ein Element auf der Seite angehängt wird und durch dieses Element wirkt. Bei den anderen Anweisungen handelt es sich alle um DHTML-Programmierinhalte, daher werde ich nicht ins Detail gehen. Wenn Sie Fragen haben, können Sie die Inhalte zum IE-Browser in der MSDN-Entwicklungsdokumentation von Microsoft zu Rate ziehen, die ausführliche Referenzinhalte zur DHTML-Programmierung, Anweisungen zur Verwendung von Eigenschaften und Methoden usw. sowie eine große Anzahl von Artikeln und Beispielprogrammen enthält. Besonders für Anfänger ist es eine gute Lerngewohnheit, regelmäßig die MSDN-Dokumentation von Microsoft zu besuchen. Dort finden Sie praktisch jede gewünschte Antwort. Die URL lautet: http://msdn.microsoft.com/ie/.
Der Inhalt des vollständigen „Verhaltens“-Dokuments „font_effect.htc“ ist wie folgt:
//////////////////////////Beginn des Dokuments „Verhalten“/ ...
//Füge „Verhalten“ vier Mausereignisse hinzu
[Code]
<PUBLIC:ATTACH EVENT="beimMouseover" ONEVENT="glowit()"/>
<PUBLIC:ATTACH EVENT="beimMouseout" ONEVENT="noglow()"/>
<PUBLIC:ATTACH EVENT="beimMousedown" ONEVENT="font2yellow()"/>
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>
//Definieren Sie zwei Methoden für „Verhalten“
<PUBLIC:METHOD NAME="nach_unten verschieben"/>
<PUBLIC:METHOD NAME="nach_rechts_bewegen"/>
<SCRIPT LANGUAGE="JScript">
//Definieren Sie eine Variable zum Speichern der Schriftfarbe
var Schriftfarbe;
//Definieren Sie die Methode zum Verschieben von Text nach unten
Funktion move_down()
{
element.style.posTop+=2;
}
//Definieren Sie eine Methode, um Text nach rechts zu verschieben
Funktion move_right()
{
element.style.posLeft +=6;
}
//Definieren Sie die aufrufende Funktion des Maus-OnMouseUp-Ereignisses
Funktion font2blue(){
wenn (event.srcElement == element)
{
element.style.color='blau';
}
}
//Definieren Sie die aufrufende Funktion des Maus-OnMouseDown-Ereignisses
Funktion font2yellow(){
wenn (event.srcElement == element)
{
element.style.color='gelb';
}
}
//Definieren Sie die aufrufende Funktion des Maus-OnMouseOver-Ereignisses
Funktion Glowit ()
{
wenn (event.srcElement == element)
{
Schriftfarbe=Stil.Farbe;
element.stil.farbe='weiß';
element.style.filter="leuchten(Farbe=rot,Stärke=2)";
}
}
//Definieren Sie die aufrufende Funktion des Maus-OnMouseOut-Ereignisses
Funktion noglow()
{
wenn (event.srcElement == element)
{
element.style.filter="";
element.stil.farbe=Schriftfarbe;
}
}
</SCRIPT>

<STIL>
.myfilter{Verhalten:URL(font_effect.htc);Position:relative;Schriftstärke:fett;Breite=180;links:0;}
</STIL>

<button onclick="myspan.move_right();">Verschiebt die erste Textzeile nach rechts</button>

<button onclick="myspan.move_down();">Erste Textzeile nach unten verschieben</button>

<html>
<KOPF>
<TITLE >Demonstration von Verhaltenseffekten< /TITLE >
<STIL>
.myfilter{Verhalten:URL(font_effect.htc);Position:relative;Schriftstärke:fett;Breite=180;links:0;}
</STIL>
</KOPF>
<KÖRPER>
<span id="myspan" class='myfilter'>Durch das Verhalten erzeugte Texteffekte</span>

<span class='myfilter'>Leuchtet, wenn die Maus zeigt</span>

<span class='myfilter'>Gleichzeitig wird der Text weiß</span>

<span class='myfilter'>Der Text wird gelb, wenn die Maus gedrückt wird</span>

<span class='myfilter'>Der Text wird blau, nachdem Sie die Maus anheben</span>

<span class='myfilter'>Der Text kehrt in seinen ursprünglichen Zustand zurück, nachdem die Maus ihn verlassen hat</span>

<button onclick="myspan.move_right();">Verschiebt die erste Textzeile nach rechts</button>

<button onclick="myspan.move_down();">Erste Textzeile nach unten verschieben</button>
</BODY>
</html>

<HTML XMLNS:DOCJS>
<KOPF>
<STIL>
@media alle {
DOCJS\:RIGHT {Textausrichtung:rechts; Breite:100}
}
</STIL>
</KOPF>
<KÖRPER>
<DOCjs:RECHTS>
Lesen Sie die Spalten, Tipps, Tools und Tutorials von Doc Javascript
</DOCjs:RECHTS>
</BODY>
</HTML>

<HTML xmlns:MeinTag>
<KOPF>
<PUBLIC:COMPONENT tagName="MeinTag">
<PROPERTY NAME="Wert"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:KOMPONENTE>
<STYLE> //Definieren Sie ein Stylesheet für die Komponente
.cssMeinTag{
}
</STIL>
<SCRIPT-Sprache=Javascript>
function MyTagBehavior1(){} //Methoden für Komponenten definieren
</SCRIPT>
</KOPF>
<BODY onclick=MyTagBehavior1> //Antwortereignisse für Komponenten definieren
</BODY>
</HTML>

Funktion fnInit() {
document.body.innerHTML = element.value; //Anzeigeinhalt der Komponente festlegen
document.body.className = "clsMyTag"; //Anzeige-Stylesheet festlegen,
defaults.viewLink = document; // Diese Komponente für andere Dokumente sichtbar machen
element.aProperty = element.value; //Legen Sie den Eigenschaftswert der Komponente fest
}

<HTML xmlns:MyCom>
<KOPF>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/>
</KOPF>
<KÖRPER>
<MyCom:MeinTag></MyCom:MeinTag>
</BODY>
</HTML>