Widget de liste rotative en JavaScript

Pour sélectionner un élément dans une courte liste, un bouton vaut mieux qu'un menu déroulant. Ce widget combine en fait bouton et menu déroulant.

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. Il me faut inventer un nouveau nom car je n'ai à ce jour rien trouvé de semblable sur le Web.

De la liste déroulante à la liste 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.

Principe de fonctionnement

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

Démonstration d'un objet liste sur une seule ligne, où l'élément affiché et donc sélectionné, est choisi avec un bouton.
Techniquement, cela consiste a modifier le pointeur sur l'objet initialement sélectionné par du code JavaScript.

Formulaire

Premier second troisième quatrième

Pour la démonstration on remplace l'envoi de formulaire par une fonction JavaScript qui affiche ce qui serait envoyé.

Interfacer la liste rotative et l'application

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(lang)
{
    var panel = document.getElementById("langages");
    panel.style.backgroundImage = 'url(' + lang + ')';
}

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 avec images

Voici la démonstration d'un objet "liste rotative", où le choix d'un élément de liste opère une action sur la page. Elle va montrer comment la liste agit dans le cadre de l'interface d'une application.

Interface utilisateur graphique

Langage C C++ PHP HTML

Chaque élément <option> de l'objet <select> contient l'URL d'une image en valeur et en texte le nom de l'image.

Code HTML

<fieldset class="rotatinglist">
<legend>Interface utilisateur graphique </legend>
<form  method="post" action="">
  <select name="selectImage" id="selectImage"  onchange="change()">
    <option value="/images/language-c.png">Langage C</option>
    <option value="/images/language-cpp.png">C++</option>
    <option value="/images/language-php.png">PHP</option>
    <option value="/images/language-html.png">HTML</option>
  </select>
  <input type="button" name="Submit" value="Suivant" onClick="next()">
</form>
<img id="lang" src="/images/language-c.png" />
</fieldset>

Code JavaScript

function update(lang)
{
  var x = document.getElementById("lang");
  x.src = lang;
}
function next()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex + 1;
  if(x >= element.options.length) x = 0;
  element.selectedIndex = x;
  update(element.options[x].value);	
}
function change()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex ;
  update(element.options[x].value);
} 

Code CSS

.rotatinglist
{
  width:260px;
  height:160px;
  min-height:160px;
  -moz-border-radius:8px;
  border-radius:8px;
  border: 2px solid #339900 !important;
  padding-left:8px;
  -padding:0 !important;
}
.rotatinglist img
{
  margin:8px;
  width:64px;
  height:64px;
} 

© 2009-2014 Scriptol.fr