Vor der Veröffentlichung des IE 5.0-Browsers von Microsoft bestand die größte Herausforderung bei der Webprogrammierung darin, dass Komponenten nicht einfach erstellt werden konnten, um die Wiederverwendung von Code und die gemeinsame Nutzung mehrerer Seiten zu erreichen. Dieses Problem hat Programmierern von DHTML-Webseiten (dynamisches HEML) schon immer Probleme bereitet. Sie können HTML-, CSS- und JAVASCRIPT-Codes nur ständig neu schreiben, um wiederholte oder ähnliche Funktionen auf mehreren Seiten zu erfüllen. Seit der Veröffentlichung des IE 5.0-Browsers wurde diese Situation verbessert. Sie hat uns eine neue Befehlskombinationsmethode gebracht, die den Code, der bestimmte Funktionen implementiert, in einer Komponente kapseln kann, wodurch die Wiederverwendung von Code auf mehreren Seiten realisiert und die Webprogrammierung einfacher wird . Betreten Sie eine ganz neue Welt. Diese neue Technologie ist das „Verhalten“ in DHTML, über das wir sprechen werden.
„Verhalten“ ist eine einfache und benutzerfreundliche Komponente, die bestimmte Funktionen oder Aktionen auf der Seite kapselt. Wenn einem Element auf einer WEB-Seite ein „Verhalten“ hinzugefügt wird, wird das ursprüngliche Verhalten des Elements geändert. Daher können Webseitenprogrammierer allgemeine DHTML-Anweisungen entwickeln und einige Attribute des ursprünglichen Objekts ändern, indem sie „Verhalten“ verwenden, um die Funktionalität eines Objekts zu verbessern und gleichzeitig den HTML-Code der Seite zu vereinfachen. Darüber hinaus ist die Erstellung und Verwendung von „Verhalten“ ebenfalls sehr einfach und bequem, und die erforderlichen Kenntnisse umfassen lediglich die CSS-Stylesheets, HTML-Anweisungen und die Skriptsprache JAVASCRIPT, mit deren Verwendung Sie bereits vertraut sind. Solange Sie etwas darüber wissen und tatsächliche Programmiererfahrung haben, ist es kein Problem, den Einsatz von „Verhalten“ zu erlernen und zu beherrschen. Wir nehmen als Beispiel eine „Verhalten“-Komponente, die den Schrifteffekt ändert, um zu veranschaulichen, wie ein „Verhalten“ geschrieben und verwendet wird, und erleben die Vorteile und den Komfort, die „Verhalten“ für die Seitenbearbeitung mit sich bringt.
Erstellen Sie zunächst eine neue Textdatei mit dem Namen „font_efftce.htc“. Die Dateien, aus denen die „Verhalten“-Komponente besteht, haben alle die Erweiterung .htc. Der Inhalt dieser Datei ist unsere Beschreibung dieses „Verhaltens“. Die Schritte zum Erstellen und Verwenden lauten wie folgt:
(1) Fügen Sie zunächst mehrere Ereignisantworten zu diesem „Verhalten“ hinzu. Das Format zum Schreiben der Anweisung lautet wie folgt:
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()“ / >
„EVENT“ entspricht den erforderlichen Ereignisnamen, hier sind sie: onmouseover, onmouseout, onmousedown, onmouseup. Natürlich können Sie andere Ereignisnamen hinzufügen, um Ihren spezifischen Anforderungen gerecht zu werden. „ONEVENT“ entspricht dem individuellen Event-Handle, also dem Namen der Funktion, die beim Auslösen des Events aufgerufen wird. Die Funktion „glowit()“ erzeugt einen roten Schimmer um die Schrift herum. Die Funktion noglow() entfernt den Leuchteffekt der Schriftart. 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“ zwei weitere „Methoden“-Definitionen hinzu, deren Inhalt wie folgt lautet.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
Der Parameter „NAME“ entspricht dem angegebenen „Methode“-Namen. move_down und move_right sind die Funktionsnamen, die den „Methoden“ zum Bewegen nach unten bzw. nach rechts entsprechen. Beachten Sie, dass Sie nach dem Methodennamen keine Klammern „()“ einfügen, d. h. nicht wie „move_down()“ schreiben. Dies ist in der Syntax der „Methoden“-Definition nicht zulässig.
(3) Der nächste Schritt besteht darin, mithilfe von JAVASCRIPT-Skriptanweisungen den Funktionsinhalt zu schreiben, der dem „Ereignishandle“ und der „Methode“ in der vertrauten DHTML-Umgebung entspricht, um den gewünschten Effekt zu erzielen. Spezifische Inhalte entnehmen Sie bitte dem Quellprogramm unten. Der Parameter „element“ bezieht sich auf das Objekt, an das dieses „behavior“ angehängt ist, da „behavior“ immer an ein Element auf der Seite angehängt ist und über dieses Element wirkt. Bei den anderen Anweisungen handelt es sich ausschließlich um DHTML-Programmierinhalte, daher werde ich nicht mehr dazu sagen. Wenn Sie Fragen haben, können Sie auf die MSDN-Entwicklungsdokumentation von Microsoft für den IE-Browser zurückgreifen, die detaillierte Referenzinhalte zur DHTML-Programmierung, Anweisungen zur Verwendung von Eigenschaften und Methoden sowie eine große Anzahl von Artikeln und Beispielprogrammen enthält. Der regelmäßige Besuch der MSDN-Dokumentation ist eine gute Lerngewohnheit, insbesondere für Anfänger. Sie können fast jede Antwort erhalten, die Sie suchen. Die URL lautet: http://msdn.microsoft.com/ie/ .
Der Inhalt des vollständigen „Verhaltens“-Dokuments „font_effect.htc“ lautet wie folgt:
//////////////////////////////Das „ Behavior“-Dokument beginnt // /////////////////////////////////
//Füge vier Mausereignisse zu „behavior“ hinzu "
<PUBLIC:ATTACH EVENT= "onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Zwei Methoden für „behavior“ definieren
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Definieren Sie eine Variable zum Speichern der Schriftfarbe
var font_color;
//Definieren Sie eine Methode zum Verschieben von Text nach unten
function move_down()
{
element.style.posTop+=2;
}
// Definieren Sie eine Methode zum Verschieben von Text nach rechts
function move_right()
{
element.style.posLeft +=6
}
//Definieren Sie die aufrufende Funktion des Maus-Onmouseup-Ereignisses
function font2blue(){
if (event.srcElement == element)
{
element.style.color=
'
blue'
;
}
}
//
Definieren Sie dieaufrufende
Funktion des Maus-Onmousedown-Ereignisses
.
//Definieren Sie die aufrufende Funktion der Maus-onmouseover-Ereignisfunktion
glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.filter
="glow (Farbe =rot,Stärke=2)";
}
}
//Definieren Sie die aufrufende Funktion der Maus-onmouseout-Ereignisfunktion
noglow()
{
if (event.srcElement
== element)
{
element.style.color=font_color;
}
}
< /SCRIPT >
/ // ////////////////Ende des Dokuments „Verhalten“ ///////////////////////// ////// /
(4) So verwenden Sie „Verhalten“ auf einer Seite
Für die Verwendung der „Verhalten“-Komponente auf einer Seite ist das Erlernen neuer Kenntnisse nicht erforderlich. Die erforderlichen Kenntnisse sind lediglich die Einstellungen von CSS-Stylesheets und HTML. Bitte beachten Sie die folgenden Ausführungen.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
Es ist ersichtlich, dass sich dies von dem von uns verwendeten Stil unterscheidet sind bereits bekannt. Die Tabelleneinstellungen sind genau gleich. Die obige Anweisung definiert einen Stilnamen: „myfilter“, dessen relativ neuer Inhalt für uns ist: „behavior:url(font_effect.htc);“, „behavior“ ist der Name des neuen „behavior“-Attributs, das heißt wie das „Verhalten“ im Stylesheet eingerichtet ist. Der Inhalt in Klammern ist der Dateiname des „Behavior“-Dokuments. In diesem Beispiel bedeutet dies, dass sich das „Behavior“-Dokument im selben Verzeichnis wie die Auslagerungsdatei befindet. Fügen Sie hinzu „behavior“ vor diesem Parameter, um sicherzustellen, dass das Behavior-Dokument korrekt gefunden werden kann. Der Rest des Inhalts in diesem „Stil“ besteht lediglich aus normalen Stilattributeinstellungen, die je nach Bedarf erhöht oder verringert werden können. In diesem Beispiel ist jedoch aufgrund der Verwendung des Filtereffekts „Glühen“ mindestens ein Breitenattribut erforderlich muss eingestellt werden. Durch die obige Stilspezifikation haben wir einen Stil mit dem Namen „myfilter“, der ein „Verhalten“ mit einem Schriftartänderungseffekt enthält. Wenn Sie diesen Stil mit „Verhalten“ auf einer Seitenkomponente verwenden möchten, ist dies ebenfalls sehr einfach. Platzieren Sie einfach den „Stilnamen“ im Attributeinstellungsbereich der Komponente, siehe folgende Anweisung.
< span id="myspan" class='myfilter' >Der durch das Verhalten erzeugte Texteffekt< /span >< br >
< span class='myfilter' >Leuchten nach dem Mauszeiger</span>
Es gibt nichts Neues in der Der obige Anweisungsinhalt, class='myfilter' ist die Stileinstellung, mit der wir vertraut sind. Im Attribut des ersten „span“-Tags ist außerdem ein „id“-Tag definiert. Wie Sie später sehen werden, dient dies dazu, den Aufruf der „Methode“ innerhalb des „Verhaltens“ zu demonstrieren. Nach dieser Einstellung kann der Inhalt in der Komponente „span“ den vorgegebenen Effekt in der Komponente „behavior“ anzeigen:
1. Wenn der Mauszeiger über den Textinhalt bewegt wird, entsteht ein roter Leuchteffekt um den Text herum und der Text wird weiß.
2. Wenn die Maustaste gedrückt wird, ändert sich die Textfarbe auf Gelb.
3． Beim Anheben der Maustaste wechselt die Textfarbe wieder auf Blau.
4. Wenn der Mauszeiger den Textbereich verlässt, wird der rote Leuchteffekt entfernt und der Text kehrt zu seinem ursprünglichen Aussehen zurück.
Darüber hinaus legen wir bei der Definition von „behavior“ zwei „Methoden“ fest: „move_down“ und „move_right“. Um diese beiden „Methoden“ aufzurufen, werden zwei Schaltflächen definiert:
< button onclick="myspan.move_right();" >Die erste Textzeile nach rechts verschieben</button >< br >
< button onclick="myspan.move_down ();" >Die erste Textzeile nach unten verschieben</button>
Verwenden Sie das onclick-Ereignis der Schaltfläche, um diese beiden „Methoden“ aufzurufen. Das zuvor definierte „id“-Tag wird als Objektname der Komponente verwendet, verwenden Sie „ myspan.move_down“, um „Methoden“ zur Manipulation dieses Objekts aufzurufen. Es ist zu erkennen, dass nach dem Drücken der entsprechenden Schaltfläche der Text in der ersten Zeile nach unten oder rechts verschoben wird. Obwohl zur Demonstration nur die erste Textzeile verwendet wird, können Sie tatsächlich auch andere Objekte verschieben, sofern Sie entsprechende Einstellungen vornehmen. Der vollständige Inhalt des Seitenquelldokuments lautet wie folgt:
< html >
< HEAD >
< TITLE > Behavior Effect Demonstration < /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight :bold; width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >Der durch das Verhalten erzeugte Texteffekt< /span >< br >
< span class=' myfilter' >Leuchtet nach dem Mauszeiger< /span >< br >
< span class='myfilter' >Gleichzeitig wird der Text weiß< /span >< br >
< span class='myfilter ' >Der Text wird gelb, nachdem die Maus gedrückt wird </ /span >< br >
< span class='myfilter' >Der Text wird blau, nachdem die Maus angehoben wird< /span >< br >
< span class='myfilter' >Der Text kehrt in seinen ursprünglichen Zustand zurück, nachdem die Maus wegbewegt wurde< /span >< br >
< button onclick="myspan.move_right();" >Die erste Textzeile nach rechts verschieben</ /button >< br >
< button onclick="myspan.move_down();" >Bewegen Sie die erste Textzeile nach unten</ /button >
</ /BODY >
</ /html >
Anhand der obigen kurzen Einführung können wir sehen, dass wir leicht kombinieren können Mehrere Textänderungseffekte in einem „Verhalten“ gleichzeitig und willkürliche Änderung durch einfache „Stil“-Einstellungen. In Bezug auf Seitenkomponenten spiegelt es die Vorteile und leistungsstarken Funktionen von „Verhalten“-Komponenten wider. Eine „Verhaltens“-Komponente kann nicht nur innerhalb einer Seite, sondern auch für alle Seiten derselben Site wiederverwendet werden. Stellen Sie sich vor: Wenn Sie zum Erzielen der oben genannten Effekte kein „Verhalten“ verwenden, können Sie zwar eine Reihe vordefinierter Funktionen auf der Seite aufrufen, um dieselbe Funktion auszuführen. Jedes Element auf der Seite, das Texteffekte verwendet, verfügt jedoch über vier Mausereignisse Wenn derselbe Effekt auf mehreren Seiten verwendet wird, muss die aufgerufene Funktion auch auf jeder Seite wiederholt festgelegt werden. Im Vergleich ist klar, welches besser und welches schlechter ist. Daher können Sie mithilfe von „Verhaltens“-Komponenten einfache, effiziente, vielseitige und leicht zu wartende Seiten erstellen. Die Beispiele in diesem Artikel dienen lediglich der Veranschaulichung des Schreib- und Verwendungsprozesses von „Verhaltens“-Komponenten, damit die Leser ein allgemeines Verständnis der „Verhaltens“-Programmierung erlangen und auf dieser Grundlage die „Verhaltens“-Komponenten erstellen können, die sie benötigen. oder zitieren Sie sie direkt, um ihre persönlichen Bedürfnisse zu erfüllen. Vorgefertigte „Verhaltens“-Komponenten, da das Konzept der „Komponentenfreigabe“ auch die ursprüngliche Absicht von „Verhaltens“-Entwicklern ist. Abschließend hoffe ich, dass dieser Artikel dazu dienen kann, „andere zu inspirieren“ und den Lesern den Einstieg in die wunderbare Welt der DHTML-Webprogrammierung zu ermöglichen.