LISTBOX EN CSS, JSCRIPT ET DHTML

<!-- Code de la liste, une puce par item dans la liste (A mettre dans la partie Body) -->
<div class="listbox">
<ul>
<li id="item1" onclick="changeitem('item1');">Texte de l'item1</li>
<li id="item2" onclick="changeitem('item2');">Texte de l'item2</li>
<li id="item3" onclick="changeitem('item3');">Texte de l'item3</li>
<li id="item4" onclick="changeitem('item4');">Texte de l'item4</li>
<li id="item5" onclick="changeitem('item5');">Texte de l'item5</li>
</ul>
</div>
<!-- Fin du code la liste -->

<!-- Code CSS (A mettre dans head)-->
ul {
	margin: 0pt;
	padding: 0pt;
}

.listbox {
	background-color: #FFF;
	border-width: 1px;
	border-color: rgb(127, 157, 185);
	border-style: solid;
	cursor: arrow;
}
.listbox li {
	text-align: left;
	list-style-type: none;
	margin-left: 0px;
}
.listbox a {
	color: #000;
	text-decoration: none;	
}

.currentitem{
	cursor: arrow;
	background-color: rgb(49, 106, 197);
	border-color: rgb(206, 149, 58);
	border-style: dotted;
	border-width: 1px;
	color: #FFF;
}

.normalitem {
	background-color: #FFF;
	border-style: none;
	list-style-type: none;
	color: #000;
	text-decoration: none; 
}
<!-- Fin du code CSS -->

<!-- Code JScript (A mettre dans Head) -->
var selecteditem = "";
var itembase = "item";
//La fonction changeitem utilise l'attribut 'nom' qu'on lui passe pour attribuer un fond bleu à l'item qui a pour id 'nom'. La variable selecteditem sert à garder la trace du dernier item sélectionné et ainsi pouvoir lu attribuer un fond neutre lors du changement d'item.
function changeitem(nom) {
	if (selecteditem != "") {
		eval("document.all." + selecteditem + ".className='normalitem';");
	}

	eval("document.all." + nom + ".className='currentitem';");
	selecteditem = nom;
}

//Cette fonction utilise l'évènement qu'on lui passe pour déterminer la touche appuyée et lancer la fonction de changement d'item
function recognizekey(evenement) {
	var key = window.event ? evenement.keyCode : evenement.which;
	if (key == 40) { //touche flèche bas
		move("down");
	}
	else if (key == 38) { //touche flèche haut
		move("up");
	}
}

//Cette fonction calcule le numéro de l'item suivant ou précédent en se basant sur la syntaxe du nom des items : itembase1, itemBase2, itembase3, etc.. 
function move(direction) { 
    if (selecteditem != "") { 
        eval("document.all." + selecteditem + ".className='normalitem';"); 
        var itemnumber = selecteditem.substr(itembase.length); //Extrait la chaine qui commence juste après le nom générique itembase, c'est à dire le numéro de l'item.
        var newitemnumber = "";
    } 
    
    if (direction == "down" && selecteditem != "") { 
        try {
			newitemnumber = itemnumber - (-1) ;
			eval("document.all." + itembase + newitemnumber + ".className='currentitem';"); 
			selecteditem = itembase + newitemnumber ;
        }
        catch (ex) {
			eval("document.all." + itembase + 1 + ".className='currentitem';");
			selecteditem = itembase + 1;
        }
    } 
    
    if (direction == "up" && selecteditem != "") { 
        try {
			newitemnumber= itemnumber - 1 ;
			eval("document.all." + itembase + newitemnumber + ".className='currentitem';"); 
			selecteditem = itembase + newitemnumber ;
        }
        catch (ex){
			eval("document.all." + selecteditem + ".className='currentitem';");
        }
    } 
}
<!-- fin du JSript -->

Télécharger le zip

13 juin 2006 15:35:24 :

Ajout de la gestion des flèches haut/bas et remplacement du javascript. Amelioration globale du code. Simplification du CSS. Merci pour les commentaires surtout sur eval

13 juin 2006 19:09:17 :

Correction du bug relatif à l'appui de la touche [bas|haut] quand on était sur le [dernier|premier] item de la liste : l'appui de la touche bas alors que le dernier item est sélectionné ne change pas l'item et l'appui de la touche haut alors que le dernier item est sélectionné retourne au premier item.