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

SELFHTML/Quickbar JavaScript Exemples d'application

	Liste de liens comme liste de choix
	Liste de liens comme liste de choix - l'exemple

Liste de liens comme liste de choix - l'exemple

Exemple d'affichage: aperçu

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 frame, prenant ainsi à peine de place, mais laissant malgré tout une liste de liens étant à tout moment à la disposition de l'utilisateur.

Remarque: Pour une meilleure orientation dans l'exemple, celui-ci contient des liens aux explications respectives par exemple: 1*. Ces liens ne font pas partie du code source. Si vous copiez cet exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple 1ère partie - fichier de jeu de frames:

 <html>
 <head>
 <title>Titre de page</title>
 </head>
 1* <frameset rows="40,*" border=0 frameborder=0 framespacing=0>
  <frame src="haut.htm" marginheight=3 marginwidth=10>
  <frame src="bas.htm">
 </frameset>
 </html>

Exemple 2ème partie - fichier haut.htm:

 <html>
 <head>
 <title>Titre de page</title>
 3* <script language="JavaScript">
  <!--
   function Go(x)
   {
    if(x == "nothing")
    {
      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>
 2* <form>
 <select size=1 name="choix" onChange=
 "Go(this.form.choix.options[this.form.choix.options.selectedIndex].value)"
 style="width:350px; background-color:#FFFFE0;
 font-size:9pt; font-family:Arial,sans-serif;" width=350>
 <option value="nothing">[ titre ]
 <option value="nothing">------------------------
 <option value="bas.htm">fichier titre
 <option value="nothing">------------------------
 <option value="fichier1.htm">premier fichier
 <option value="fichier2.htm">deuxième fichier
 <option value="fichier3.htm">troisième fichier
 <option value="nothing">------------------------
 <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 frames 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 frame du haut est affiché à l'appel du jeu de frames le fichier haut.htm. Ce fichier va contenir la liste de choix. Dans la fenêtre du bas est affiché le fichier bas.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 haut.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="nothing">[ titre ]
Avec des inscriptions comme la deuxième 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 nothing.
<option value="end">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 end. 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>: notemment l' Event-Handler 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 Go() 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 nothing ou end.

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

Si un élément avec la valeur nothing 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 end, la fenêtre frame actuelle, donc celle qui contient la liste de choix, est fermée. Pour cela, le contenu de la fenêtre frame 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 frame 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()).


après:	Généralités sur HTML dynamique
avant:	Afficher la durée de visite sur une page Web

SELFHTML/Quickbar JavaScript Exemples d'application