de l'onglet Javascript...Si vous désirez créer une liste déroulante des URL, WebExpert met à votre disposition cet assistant.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Le procédé est assez simple mais efficace. En fait, il s'agit d'attribuer à la propriété location (propriété définie de JS qui concerne l'adresse URL du document) la valeur correspondant au choix effectué dans la boîte liste (avec menu ou non).
Pour votre facilité, il est présenté ici les deux possibilités, à savoir une boîte liste à menu et une boîte liste simple.
On emploie dans ce javascript l'élément <SELECT> qui permet d'afficher un menu de sélection et permet de choisir une réponse unique (ou multiple).
La différence entre les deux options proposées par l'assistant se résume à peu de choses en réalité : c'est l'attribut SIZE de l'élément <SELECT> qui va prendre une valeur différente (SIZE=1 pour une boîte liste et SIZE=>1 pour une boîte liste à menu).
L'assistant va incorporer quelques éléments supplémentaires, pour la boîte à liste (sans menu) :
Une balise <OPTION> contenant un message d'information;
Un message d'alerte [méthode alert() de l'objet window]
Dans l'élément <SELECT> ont été créées différentes balises <OPTION>, qui correspondent exactement aux nombres d'URL encodées dans l'assistant. Chacune de celles-ci a été associée à un texte qui décrit l'URL proposée, par exemple :
La valeur (value) de la balise <OPTION> contient donc l'URL du fichier HTML que l'on propose dans cette option, ci-dessus : JVTM.html.
L'élément <SELECT> est identifié (NAME="liste1") dans l'exemple de la boîte liste à menu ou (NAME="liste2") dans la boîte à liste et se trouve inséré dans un élément <FORM>.
Dans chaque exemple, l'assistant a opté ici pour créer un bouton de commande, avec un code différent pour les deux boîtes liste :
Une instruction conditionnelle (if) est employée pour signaler que la balise <OPTION>, sélectionnée par défaut (<OPTION SELECTED VALUE="">-------- FAITES VOTRE CHOIX--------) ne correspond pas à un choix valable. Cette condition vérifie que la position dans le menu (Index) est différent de 0 (position déterminée pour le message d'information) par le code d'identification (form.liste1.selectedIndex) qui correspond à la position de l'option sélectionnée, de la boîte liste (liste1), contenue dans l'élément form.
Si la position retourne une valeur = 0 (pas !=0), dans ce cas, un message d'alerte est donné par la méthode alert() : alert('Veuillez faire un choix au menu.').
Lorsque la valeur retournée n'est pas 0 (différente de 0 : !=0), alors la location (propriété définie location de JS qui concerne l'adresse URL du document) prendra pour valeur la valeur de l'option sélectionnée dans la boîte liste à menu (liste1) : location = form.liste1.options[form.liste1.selectedIndex].value et le navigateur chargera le fichier concerné.
Dans ce choix de boîte liste, il n'y a pas de possibilité d'erreur (puisque l'utilisateur visionne directement les options) et donc, l'assistant n'a pas placé d'instruction conditionnelle, mais uniquement le code qui attribue à la propriété location la valeur de l'option sélectionnée dans la boîte liste (liste2) : location = form.liste2.options[form.liste2.selectedIndex].value.
Pour les deux boîte liste, une option est sélectionnée par défaut, par l'attribut spécifique : SELECTED.Vous pouvez ajouter et/ou supprimer des options, par l'ajout ou la suppression d'une balise <OPTION>, et éventuellement modifier la valeur (SIZE=) de l'élément <SELECT> si la boîte liste est trop petite (cas de boîte liste à menu), par exemple :
Modifier les textes descriptifs pour chaque URL ou le fichier HTML correspondant à chaque description.
Nous avons vu que l'assistant a choisi comme option de proposer le changement de location (URL) par l'événement onClick des boutons. Il est très facile de se passer de bouton en placant l'événement déclencheur, non pas dans un bouton, mais dans l'élément <SELECT> lui-même, mais en employant dans ce cas, non pas l'événement onClick, mais un plus approprié, à savoir "onChange". Voici le même exemple, mais réalisé de cette façon :
Il n'y a donc plus de bouton, puisque l'événement déclencheur est l'événement "onChange", placé dans l'élément <SELECT>.Voici le code HTML de l'élément <SELECT>, ainsi modifié :
Si vous avez omis d'indiquer la cible (nom du cadre de destination), vous pouvez l'ajouter par le code HTML de la propriété location suivant : parent.frames['bas'].location = qui indique tout simplement au navigateur que c'est pour le cadre (frame) appelé "bas" qui doit recevoir le document HTML à charger. La propriété parent correspond à la fenêtre parent du cadre (frame) actif.
