Avant la sortie du navigateur IE 5.0 de Microsoft, le plus grand défi rencontré en matière de programmation Web était la difficulté de créer des composants permettant de réutiliser le code et de partager plusieurs pages. Ce problème a toujours troublé les programmeurs de pages Web DHTML (HEML dynamique). Ils ne peuvent que réécrire les codes HTML, CSS et JAVASCRIPT pour répondre à des fonctions répétées ou similaires sur plusieurs pages. Depuis la sortie du navigateur IE 5.0, cette situation s'est améliorée et nous a apporté une nouvelle méthode de combinaison d'instructions, qui peut encapsuler le code qui implémente des fonctions spécifiques dans un composant, réalisant ainsi la réutilisation du code sur plusieurs pages et facilitant la programmation Web. . Entrez dans un tout nouveau monde. Cette nouvelle technologie, ce sont les « comportements » en DHTML dont nous allons parler.
« Comportement » est un composant simple et facile à utiliser qui encapsule des fonctions ou des actions spécifiques sur la page. Lorsqu'un "comportement" est attaché à un élément dans une page WEB, le comportement original de l'élément sera modifié. Par conséquent, les programmeurs de pages Web peuvent développer des instructions DHTML générales et modifier certains attributs de l'objet d'origine, en utilisant le « comportement » pour améliorer la fonctionnalité d'un objet, tout en simplifiant également le code HTML de la page. De plus, la création et l'utilisation de « comportements » sont également très simples et pratiques, et les connaissances requises concernent uniquement les feuilles de style CSS, les instructions HTML et le langage de script JAVASCRIPT déjà habitués à utiliser. Tant que vous en savez quelque chose et que vous avez une réelle expérience en programmation, il n'y a aucun problème à apprendre et à maîtriser l'utilisation des « comportements ». Nous prendrons comme exemple un composant « comportement » qui modifie l'effet de police pour illustrer comment écrire et utiliser un « comportement », et découvrir les avantages et la commodité que le « comportement » apporte à l'édition de pages.
Tout d'abord, créez un nouveau fichier texte nommé font_efftce.htc. Les fichiers qui composent le composant "comportement" ont tous des extensions .htc. Le contenu de ce fichier est notre description de ce "comportement". Les étapes pour le créer et l'utiliser sont les suivantes :
(1) Ajoutez d'abord plusieurs réponses d'événement à ce "comportement". Le format d'écriture de l'instruction est le suivant :
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2white()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()" / >
"EVENT" correspond aux noms d'événements requis, les voici : onmouseover, onmouseout, onmousedown, onmouseup. Bien entendu, vous pouvez ajouter d'autres noms d'événements pour répondre à vos besoins spécifiques. "ONEVENT" correspond au handle d'événement individuel, c'est-à-dire le nom de la fonction appelée lorsque l'événement est déclenché. La fonction glowit() crée une lueur rouge autour de la police. La fonction noglow() supprime l'effet lumineux de la police. La fonction Font2white() change la couleur de la police en jaune. La fonction Font2blue() change la couleur de la police en bleu. Les définitions des quatre événements sont similaires.
(2) Ensuite, ajoutez deux autres définitions de « méthode » à ce « comportement », le contenu est le suivant.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
Le paramètre "NAME" correspond au nom de "méthode" donné. move_down et move_right sont les noms de fonctions correspondant respectivement aux "méthodes" de déplacement vers le bas et vers la droite. Notez qu'il ne faut pas mettre de crochets "( )" après le nom de la méthode, c'est-à-dire ne pas l'écrire comme "move_down()". Ceci n'est pas autorisé dans la syntaxe de la définition de "méthode".
(3) L'étape suivante consiste à utiliser des instructions de script JAVASCRIPT pour écrire le contenu de la fonction correspondant au « descripteur d'événement » et à la « méthode » dans l'environnement DHTML familier afin d'obtenir l'effet souhaité. Veuillez vous référer au programme source ci-dessous pour un contenu spécifique. Le paramètre « élément » fait référence à l'objet auquel ce « comportement » est attaché, car « comportement » est toujours attaché à un élément de la page et fonctionne à travers cet élément. Les autres instructions sont toutes du contenu de programmation DHTML, je n’en dirai donc pas plus. Si vous avez des questions, vous pouvez vous référer à la documentation de développement MSDN de Microsoft pour le navigateur IE, qui contient un contenu de référence détaillé sur la programmation DHTML, des instructions d'utilisation des propriétés et des méthodes, et contient un grand nombre d'articles et d'exemples de programmes. Visiter fréquemment la documentation MSDN de Microsoft est une bonne habitude d'apprentissage, en particulier pour les débutants. Vous pouvez obtenir presque toutes les réponses que vous recherchez. Son URL est : http://msdn.microsoft.com/ie/ .
Le contenu du document "comportement" complet "font_effect.htc" est le suivant :
//////////////////////////////Le " comportement" commence le document // /////////////////////////////////////
Ajouter quatre événements de souris au "comportement "
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2white ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//Définir deux méthodes pour le "comportement"
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//Définir une variable pour stocker la couleur de la police
var font_color;
//Définir une méthode pour déplacer le texte vers le bas
function move_down()
{
element.style.posTop+=2;
}
// Définir une méthode pour déplacer le texte vers la droite
function move_right()
{
element.style.posLeft +=6;
}
//Définir la fonction d'appel de la souris onmouseup event
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//Définir la fonction d'appel de la
fonction d'événement onmousedown de la souris font2yellow(){
if (event.srcElement == element)
{
element.style.color='white'
}
}
//Définit la fonction d'appel de la
fonction d'événement onmouseover glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color
='white';
(couleur = rouge, force = 2)";
}
}
//Définit la fonction appelante de la souris onmouseout event
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color
}
}
< /SCRIPT >
/ // ////////////////Fin du document "Comportement" ///////////////////////// ////// /
(4) Comment utiliser le « comportement » sur une page
L'utilisation du composant « comportement » sur une page ne nécessite pas l'apprentissage de nouvelles connaissances. Les connaissances requises ne sont rien d'autre que les paramètres des feuilles de style CSS et HTML. Veuillez consulter les déclarations suivantes.
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
On peut voir que ceci est différent du style que nous sont déjà familiers auparavant. Les paramètres de la table sont exactement les mêmes. L'instruction ci-dessus définit un nom de style : "myfilter", dont le contenu relativement nouveau pour nous est : "behavior:url(font_effect.htc);", "behavior" est le nom du nouvel attribut "behavior", qui est comment le "comportement" est configuré dans la feuille de style. Le contenu entre parenthèses est le nom de fichier du document « comportement ». Dans cet exemple, il indique que le document « comportement » se trouve dans le même répertoire que le fichier d'échange. Si le document « comportement » est placé dans un autre répertoire, ajoutez. "comportement" devant ce paramètre. Noms de chemin correspondants pour garantir que le document Comportement peut être localisé correctement. Le reste du contenu de ce "style" n'est constitué que de paramètres d'attributs de style normaux, qui peuvent être augmentés ou diminués selon vos besoins, mais dans cet exemple, en raison de l'utilisation de l'effet de filtre "lueur", au moins un attribut de largeur doit être réglé. Grâce à la spécification de style ci-dessus, nous avons un style nommé : "myfilter", qui est livré avec un "comportement" avec un effet de changement de police. Si vous souhaitez utiliser ce style avec "comportement" sur un composant de page, c'est également très simple. Placez simplement le "nom du style" dans la zone de paramétrage des attributs du composant, voir l'instruction suivante.
< span id="myspan" class='myfilter' >L'effet de texte produit par le comportement< /span >< br >
< span class='myfilter' >Glow après le pointeur de la souris
Il n'y a rien de nouveau dans le Contenu de l'instruction ci-dessus, class='myfilter' est le paramètre de style que nous connaissons. Une balise "id" est également définie dans l'attribut de la première balise "span". Comme vous le verrez plus tard, elle est définie pour démontrer l'appel de la "méthode" dans le "behavior". Après ce réglage, le contenu du composant « span » peut afficher l'effet prédéterminé dans le composant « behavior » :
1. Lorsque le pointeur de la souris se déplace sur le contenu du texte, un effet de lueur rouge est produit autour du texte et le texte devient blanc.
2. Lorsque le bouton de la souris est enfoncé, la couleur du texte passe au jaune.
3. Lorsque le bouton de la souris est relâché, la couleur du texte redevient bleue.
4. Lorsque le pointeur de la souris sort de la zone de texte, l'effet de lueur rouge est supprimé et le texte retrouve son aspect d'origine.
De plus, nous définissons deux « méthodes » lors de la définition du « comportement », « move_down » et « move_right ». Pour appeler ces deux "méthodes", deux boutons sont définis :
< Button onclick="myspan.move_right();" >Déplacer la première ligne de texte vers la droite< br >
< Button onclick="myspan.move_down ();" >Déplacez la première ligne de texte vers le bas
Utilisez l'événement onclick du bouton pour appeler ces deux "méthodes". La balise "id" précédemment définie est utilisée comme nom d'objet du composant, utilisez " myspan.move_down" pour appeler des "méthodes" pour manipuler cet objet. On voit qu'après avoir appuyé sur le bouton correspondant, le texte de la première ligne se déplacera vers le bas ou vers la droite. Bien que seule la première ligne de texte soit utilisée à des fins de démonstration, vous pouvez également déplacer d'autres objets à condition d'effectuer les réglages correspondants. Le contenu complet du document source de la page est le suivant :
< html >
< HEAD >
< TITLE > Démonstration des effets de comportement < /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' >L'effet de texte produit par le comportement< br >
< span class='myfilter' >Brille après le pointeur de la souris< /span >< br >
< span class='myfilter' >En même temps, le texte devient blanc< /span >< br >
< span class='myfilter' > ' >Le texte devient jaune après avoir appuyé sur la souris < br >
< span class='myfilter' >Le texte devient bleu après avoir soulevé la souris< br >
< span class='myfilter' >Le texte revient à son état d'origine une fois la souris éloignée< br >
< button onclick="myspan.move_right();" >Déplacer la première ligne de texte vers la droite< br >
< button onclick="myspan.move_down();" >Déplacer la première ligne de texte vers le bas
Grâce à la brève introduction ci-dessus, nous pouvons voir que nous pouvons facilement combiner plusieurs effets de changement de texte dans un « comportement » en même temps, et le modifient arbitrairement via de simples paramètres de « style ». Lié aux composants de page, il reflète les avantages et les fonctions puissantes des composants de « comportement ». Un composant « comportement » peut être réutilisé non seulement au sein d'une page, mais également pour toutes les pages d'un même site. Imaginez, si vous n'utilisez pas "comportement" pour obtenir les effets ci-dessus, bien que vous puissiez appeler un ensemble de fonctions prédéterminées dans la page pour compléter la même fonction, chaque élément de la page qui utilise des effets de texte aura quatre événements de souris. ci-joint Si le même effet est utilisé sur plusieurs pages, la fonction appelée doit également être définie à plusieurs reprises dans chaque page. En comparaison, il est évident lequel est le meilleur et lequel est le pire. Par conséquent, en utilisant des composants « comportementaux », vous pouvez créer des pages simples, efficaces, polyvalentes et faciles à entretenir. Les exemples de cet article visent uniquement à illustrer le processus d'écriture et d'utilisation des composants « comportementaux », afin que les lecteurs puissent avoir une compréhension générale de la programmation « comportementale », et sur cette base, ils puissent créer les composants « comportementaux » dont ils ont besoin, ou les citer directement pour répondre à leurs besoins personnels. Composants « comportementaux » prêts à l'emploi, car le concept de « partage de composants » est aussi l'intention originale des développeurs « comportementaux ». Enfin, j'espère que cet article pourra servir à « inspirer les autres » et permettre aux lecteurs d'entrer dans le monde merveilleux de la programmation Web DHTML.