Représentation arbre sous client léger - behavior

Le fichier "htc"

Les fichiers "htc" sont liés à la propriété "behavior" et permettent de séparer le code de cette propriété de la page Web elle-même.

Principe

Le fichier "htc" se positionne comme une feuille de style sur la page Web. Il permet d'associer un comportement à une balise HTML spécifique. Grâce à ce comportement nous allons pouvoir définir différentes fonctions à réaliser suivant les évènements qui se produisent sur les balises identifiées (par exemple lors d'un clic sur une image).

Le code

Nous allons d'abord commencer par déclarer notre fichier "htc" comme une feuille de style. Ceci se fait entre les balises "<head>". Nous appliquons cette "feuille de style" à la balise "<img>".


<style>
IMG {behavior: url(insert1.htc);}
</style>

Nous n'avons donc plus besoin de déclarer de fonctions spécifiques sur la balise "<img>".


<img src="insert.png" alt="insert" style="cursor:pointer;">

Le fichier htc

Le fichier "htc" est divisé en plusieurs parties. Tout d'abord le mapping des évènements permet d'associer une fonction Javascript à un évènement sur une balise HTML. Ici nous mappons l'évènement "onclick" correspondant à un clic sur la balise ("<img>" dans notre cas) en lui associant la fonction "onload()".


<Public:component XMLNS:IE>
<public:attach EVENT="onclick" ONEVENT="onload()" />
</Public:component>

La suite du fichier "htc" correspond simplement à la déclaration des fonctions qui seront utilisées par la suite. La même ligne que dans le premier exemple de ce sujet est nécessaire toutefois pour déclarer la propriété "behavior" et ses fonctions.


<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script language="JavaScript" type="text/javascript">

function onDownloadDone(s) {
	resultat.innerHTML=s;
}

//  onload est appelée par un click sur un element image
//  (Cf le mapping onClick<->onLoad() de la troisieme ligne du script)
function onload() {
	oDownload.startDownload('PS.html',onDownloadDone);
}
</script>

Exemples

Le premier exemple. Le code inséré est toujours le même.

- la page Web principale : voir
- le fichier htc : voir
- l'exemple : voir

Pour ce second exemple le code inséré est toujours le même mais nous allons l'insérer à plusieurs endroits de la page Web principale. Pour cela nous allons identifier les balises "cliquées" par l'utilisateur et insérer le code dans la balise "<div>" qui suit. Voyons l'exemple qui est beaucoup plus parlant...

La page Web principale possède maintenant plusieurs balises "<img>" mais les balises "<div>" qui suivent n'ont plus d'id.


<ul>
<li>
<img src="insert2.png" alt="insert" style="cursor:pointer;"> Image1
<div></div>
</li>

<li>
<img src="insert2.png" alt="insert" style="cursor:pointer;"> Image2
<div></div>
</li>

<li>
<img src="insert2.png" alt="insert" style="cursor:pointer;"> Image3
<div></div>
</li>
</ul>

Le fichier "htc" reçoit en paramètre l'élément cliqué par l'utilisateur (grâce à la déclaration sur la balise "<img>" ). Nous allons donc identifier la balise destination en fonction de l'image choisie par l'utilisateur.


//Récupère l'élément résultat en fonction dans l'image cliquée
var resultat = element.parentElement.getElementsByTagName("div")[0];

Les sources pour cet exemple :