SELFHTML: JavaScript / Exemples d'application / Liste de liens comme liste de choix

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Liste de liens comme liste de choix

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

Dans cet exemple, il est décrit comment vous pouvez utiliser une liste de choix d'un formulaire HTML comme alternative à de longues listes de liens. C'est sur ce principe que fonctionne par exemple la Quickbar SELFHTML. La liste de choix sous forme d'une liste rabattable est placée dans une étroite fenêtre cadre, prenant ainsi à peine de place, mais laissant malgré tout une liste de liens étant à tout moment à la disposition de l'utilisateur.

Texte source avec explications

L'exemple montre le fichier HTML qui définit le jeu de cadres et le fichier qui est affiché dans l'étroite fenêtre cadre du haut. C'est dans ce fichier que sont contenus la liste de choix et le Javascript qui la commande.

Exemple - fichier de jeu de cadres:

Exemple d'affichage: aperçu

<html>
<head>
<title>Liste de liens comme liste de choix</title>
</head>
<frameset rows="40,*" border="0" frameborder="0" framespacing="0">
 <frame src="liste_liens2.htm" name="haut" marginheight="3" marginwidth="10">
 <frame src="../liste_liens.htm" name="bas">
</frameset>
</html>

Exemple - fichier `liste_liens2.htm`:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function Vas_y(x) {
 if(x == "rien") {
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
   return;
 }
 else if(x == "end")
   top.location.href = parent.frames[1].location;
 else {
   parent.frames[1].location.href = x;
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
 }
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE">
<form action=""><select size=1 name="choix"
  onChange="Vas_y(this.form.choix.options[this.form.choix.options.selectedIndex].value)"
  style="width:250px; background-color:#FFFFE0; font-size:9pt; font-family:Arial,sans-serif;"
  width="250">
<option value="rien">[ Faîtes votre choix! ]</option>
<option value="rien">------------------------</option>
<option value="../liste_liens.htm">Liste de liens comme liste de choix</option>
<option value="rien">------------------------</option>
<option value="../../../editorial/index.htm">Éditorial</option>
<option value="../../../introduction/index.htm">Introduction</option>
<option value="../../../html/index.htm">HTML</option>
<option value="../../../css/index.htm">Feuilles de style CSS</option>
<option value="../../../xml/index.htm">XML/DTDs</option>
<option value="../../../javascript/index.htm">JavaScript/DOM</option>
<option value="../../../dhtml/index.htm">HTML dynamique</option>
<option value="../../../cgiperl/index.htm">CGI/Perl</option>
<option value="rien">------------------------</option>
<option value="end">Terminer
</select></form>
</body>
</html>

Explication:

définir un jeu de frames:

Étant donné que la liste de choix doit rester visible en permanence pendant l'affichage de la page Web, un jeu de cadres est défini. Il comporte deux fenêtres, à savoir une bande étroite en haut de la fenêtre du navigateur et une fenêtre principale pour l'affichage. La fenêtre du haut, dans laquelle la liste de choix doit être placée, est haute de 40 pixels et n'exige donc que peu de place.
Dans la fenêtre cadre du haut est affiché à l'appel du jeu de cadres le fichier liste_liens2.htm. Ce fichier va contenir la liste de choix. Dans la fenêtre du bas est affiché le fichier ../liste_liens.htm. Ce pourrait être par exemple la page de titre de votre projet Web.

définir la liste de choix:

Dans le corps du fichier liste_liens2.htm n'est défini rien d'autre qu'un formulaire avec une liste de choix.

Les différentes possibilités de choix jouent le rôle de liens. L'exemple présente trois formes que peut revêtir une possibilité de choix.
<option value="fichier1.htm">premier fichier
Une telle possibilité de choix définit les données devant plus tard être interprétées par JavaScript comme lien. Derrière l'attribut value= se trouve la cible du lien désirée. Derrière le repère <option> se trouve le texte du lien tel qu'il doit apparaître dans la liste de choix.
<option value="fichier1.htm">premier fichier ou
<option value="rien">[ Titre ]
Avec ces inscriptions sont définies les possibilités de choix qui doivent figurer dans la liste mais sans être suivies d'effet. Cela peut être, dans des listes plus longues par exemple, des inscriptions servant de lignes de séparation. Même la toute première option de la liste doit être définie de la sorte, car elle représente le "titre de la liste". Pour de telles inscriptions, notez simplement derrière l'attribut value= la valeur rien.
<option value="fin">terminer
Avec une telle inscription, qui représente logiquement la dernière possibilité de choix, vous pouvez offrir la possibilité de quitter la liste de choix. Notez pour cela derrière l'attribut value= la valeur fin. Si vous ne voulez pas présenter une telle possibilité, omettez simplement l'inscription correspondante.

Les mentions déterminantes pour traiter la liste de choix sont notées dans le repère d'ouverture <select>: notamment le gestionnaire d'événement onChange=, qui exécute le code JavaScript dés que l'utilisateur a choisi un nouvel élément dans la liste de choix. Quand survient cet événement, la fonction Vas_y() de l'exemple est appelée. À cet effet est transmise la valeur (value) de l'élément choisi. Il s'agit de la valeur qui est soit une cible de lien, soit l'un des mots clé convenus rien ou fin.

Traiter le choix:

Dans l'entête de fichier se trouve la fonction Vas_y(), qui se voit transmettre l'élément choisi et le traite. La fonction distingue trois cas (rien, fin ou alors une cible de lien) et exécute les instructions correspondant au choix.

Si un élément avec la valeur rien a été choisi, la liste de choix est réinitialisée (reset()). Le premier élément, donc l'élément titre de la liste est à nouveau affiché. La colonne de choix est cachée de la liste jusqu'au prochain choix (blur()).

Si l'élément a pour valeur fin, la fenêtre cadre actuelle, donc celle qui contient la liste de choix, est fermée. Pour cela, le contenu de la fenêtre cadre principale devient le contenu de toute la fenêtre du navigateur (top.location.href = parent.frames[1].location).

Dans tous les autres cas, la valeur transmise est interprétée comme lien. Avec l'affectation à parent.frames[1].location.href de cette valeur transmise, un lien est exécuté, qui affiche dans la fenêtre cadre principale la cible du lien choisie. Même dans ce cas, la liste de choix est réinitialisée (reset()). Le premier élément, donc l'élément titre de la liste, est à nouveau affiché. La colonne de choix est cachée de la liste jusqu'au prochain choix (blur()).

Attention:

Dans le standard HTML l'utilisation de l'attribut width= pour le repère <select> n'est pas permise. Netscape 4.x n'interprète toutefois pas les propriétés CSS pour cet élément mais accepte l'attribut pour déterminer la largeur.

Dans le standard HTML l'utilisation des attributs border=, frameborder= et framespacing= pour le repère <frameset> n'est pas permise non plus. Étant donné cependant que les navigateurs n'interprètent pas complètement le standard, ces attributs ont été utilisés dans l'exemple ci-dessus dans l'intérêt de la mise en page.


	Traitement d'erreur avec le gestionnaire d'événement onError
	Afficher la durée de visite sur une page Web