Liste rotative en JavaScript

Je me demande pourquoi nul n'a eu l'idée d'implémenter les listes rotatives en HTML, comme alternative à la liste déroulante.

Lorsqu'on utilise des objets de formulaire de façon fréquente, comme c'est le cas avec certaines applications Web telles que phpBB par exemple, choisir des options dans des listes déroulantes devient pénible, et si l'on pouvait cliquer sur un bouton pour changer l'option, ce serait clairement plus convivial.

Interface utilisateur graphique

Je donne le nom de liste rotative à un objet <select> combiné avec un bouton pour changer l'élément de liste sélectionné, sans avoir à faire apparaître la liste. Je dois inventer un nom car je n'ai à ce jour rien trouvé de semblable sur le Web.

Liste déroulante ou rotative?

La liste rotative n'enlève rien à une liste déroulante, c'est le même objet de formulaire, avec un bouton associé pour changer l'élément affiché et donc sélectionné.

La liste déroulante est indispensable quand on accède au formulaire la première fois, pour connaître les options.
De même, si la liste est longue, sélectionner un élément en cliquant dans une liste est plus simple.
Mais si l'on utilise une interface de façon fréquente et qu'on connaît les options, et si la liste comporte peu d'options, ou si les plus utiles sont en début de liste, le bouton de sélection est ce qui simplifie le plus l'utilisation.

Et par ailleurs ajouter un bouton ne coûte rien. Noter que l'idéal serait encore l'emploi de cases à cocher, mais cela prend plus d'espace, et dans l'interface utilisateur d'une application on préfère des pages compactes.

Comment cela fonctionne

Il suffit d'une fonction JavaScript comportant quatres lignes pour transformer une liste déroulante en liste rotative.

On ajoute un bouton a coté de la balise <select> de liste. Il sert à lancer la fonction next.

<input type="button" name="Submit" value="Suivant" onClick="next()">

On définit le code JavaScript de la fonction next.

function next()
{
    var element = document.form1.select1;
    var x = element.selectedIndex + 1;
    if(x >= element.options.length) x = 0;
    element.selectedIndex = x;
}

La fonction incrémente la variable selectedIndex de la liste, l'élément correspondant est affiché dans le champ d'affichage de la liste déroulante. C'est aussi le contenu de cet élément qui sera envoyé avec les données de formulaire.

Démonstration simple

Interface avec une action

Pour montrer comment l'objet peut agir dans le cadre de l'interface utilisateur graphique d'une application Web, voici un script affichant des images sur le fond d'un panel.

On définit une fonction simple qui change l'image. On donne en paramètre à la fonction l'URL de cette image.

function update(fruit)
{
    var panel = document.getElementById("fruits");
    panel.style.backgroundImage = 'url(' + fruit + ')';
}

Quand on clique sur le bouton de la liste rotative, l'index est incrémenté et on récupère la valeur de l'objet choisi pour la passer à la fonction de l'interface utilisateur:

var element = document.form1.select1;
var x = element.selectedIndex + 1;
if(x >= element.options.length) x = 0;
element.selectedIndex = x;

update(element.options[x].value);

Le script est complété avec le mode opératoire classique, quand on choisit un élément dans la liste déroulante, on passe la valeur de l'élément choisi en paramètre à la fonction:

var element = document.form1.select1;
var x = element.selectedIndex ;

update(element.options[x].value);

Démonstration en images

Le code complet est dans le source de la page.

Voir aussi: Select dynamique.

(c) 2009 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.