Représentation arbre sous client léger - behavior

Chargement unique

Nous allons maintenant nous attacher à améliorer nos exemples vus auparavant. Les exemples qui suivent vont nous permettre tout d'abord d'afficher le code inséré mais aussi, lors d'un second "clic" sur l'image concernée, cacher ce même code. Nous allons aussi faire en sorte que le code inséré dans la page ne soit chargé que lors du premier affichage.

Principe

Comme nous l'avons vu l'objet "cliqué" est passé en paramètre au fichier "htc", nous allons donc tester cet argument pour savoir par exemple s'il est déjà chargé ou encore s'il est affiché ou caché...

Le code

Voici d'abord le code de la page Web principale et plus particulièrement celui de la balise "<div>". On ajoute à cette balise un attribut "loaded" et un style "display:none" 


<div loaded="0" style="display: none;"></div>

Voyons maintenant les modifications dans le fichier "htc". Intéressons nous à la fonction "onload()" qui vérifie si le contenu est déjà chargé grâce à l'attribut "loaded" de la balise "<div>". S'il est déjà chargé, nous passons à la suite du code (dernier paragraphe) sinon, nous le chargons comme dans les exemples précédents grâce à la méthode "onDownloadDone()". Notons ici que durant le chargement le curseur est mis en sablier. 


function onload() {
	//si le résultat n'est pas chargé.
	if (resultat.loaded=="0") {
		runtimeStyle.cursor = "wait";
		oDownload.startDownload('PS.html',onDownloadDone);
	}
	else {
		//affichage ou masquage du code. voir paragraphe suivant.
	}
}

Ensuite la fonction "onDownloadDone()". Cette fonction écrit toujours le code dans la partie résultat mais repositionne aussi les attributs de la balise "<div>" (loaded="1" et réaffichage du curseur normal). 


function onDownloadDone(s) {
	resultat.innerHTML=s;
	resultat.loaded="1";
	resultat.style.display = "block";
	runtimeStyle.cursor = "hand";
	
	//ici juste pour vérifier que le download ne se passe qu'une seule fois.
	alert ("Fin du download"); //affiche une fenêtre avec le message "Fin du download"
}

Reste donc la partie de la fonction "onload()" où nous testons si l'objet resultat est affiché ou caché. Dans chacun des cas, nous exécutons l'inverse (s'il est caché nous l'affichons et vice versa) 


if (resultat.style.display=="none") {
	resultat.style.display = "block";
}
else {
	resultat.style.display = "none";
}

Exemples

Voici l'exemple et ses sources :

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


L'exemple suivant va nous permettre, en plus, de modifier l'image en fonction de l'état de la balise "resultat" (affichée ou non).
Dans la page Web principale la balise "resultat" n'est plus une "<div>" mais une "<ul>" avec de nouveaux arguments contenant les noms des images sources à afficher. 


<li>
<img src="close.gif" alt="livre" style="cursor:pointer;" class="close" /> Image1
<ul imgopen="open.gif" imgclose="close.gif" loaded="0" style="display: none;"></ul>
</li>

Le fichier "htc" est lui aussi modifié. On récupère dans une variable l'élément "image" cliqué puis l'élément résultat "ul". Suivant l'affichage que l'on souhaite faire, on modifie la source de l'image affichée. 


var imgTag = element;
...
imgTag.src = ulTag.imgopen;
imgTag.className = "open";

Voici les sources :

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