begin process at 2010 03 21 09:51:14
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > LISTBOX EN CSS, JSCRIPT ET DHTML

LISTBOX EN CSS, JSCRIPT ET DHTML


 Information sur la source

Note :
Aucune note
Catégorie :Formulaire Classé sous :liste, listbox, css, javascript, item Niveau :Débutant Date de création :12/06/2006 Date de mise à jour :13/06/2006 19:09:17 Vu / téléchargé :12 616 / 757

Auteur : MoiDebutantVB

Ecrire un message privé
Site perso
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Ce code permet d'inclure dans vos page web une listbox entièrement CSS et JScript style XP dans vos pages sans avoir besoin de la balise <FORM> et sans utiliser de controles ni de flash...

Source

  • <!-- 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 -->
<!-- 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 -->

 Conclusion

Pour ajouter un item :
*Ajoutez une puce à la liste dans la div listbox
*Tous les items doivent avoir le même nom suivi d'un numéro. (exemple : X1,X2,X3,...,X127, etc.)
*Marquer le nom générique des items dans la variable itembase (utile pour les déplacements haut/bas)(Dans notre exemple : X)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

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.

 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome

 Sources en rapport avec celle ci

HTML_ENTITIES_DECODE par zen69
DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip COLORATION PHP, CSS, HTML, JAVASCRIPT par Vince_02
Source avec Zip Source avec une capture IUBITO'S MENU V3.1 : QUASIMENT EN CSS, COMPATIBLE IE/NS6+/MO... par iubito

Commentaires et avis

Commentaire de MoiDebutantVB le 12/06/2006 20:10:30

Bon et bien voila c'est ma première source JScript, tous les commentaires constructifs sont les bienvenus.
Bonne prog !

Commentaire de rrk275 le 12/06/2006 21:56:42

QUelque longueurs.. mais j'aime bcp !!

function changeitem(nom)
{
     document.all.item1.className = "normalitem";
     document.all.item2.className = "normalitem";
     document.all.item3.className = "normalitem";
     document.all.item4.className = "normalitem";
     document.all.item5.className = "normalitem";
switch(nom)
{
case "item1":document.all.item1.className = "currentitem";return;
case "item2":document.all.item2.className = "currentitem";return;
case "item3":document.all.item3.className = "currentitem";return;
case "item4":document.all.item4.className = "currentitem";return;
case "item5":document.all.item5.className = "currentitem";return;
}
}

Commentaire de Arto_8000 le 12/06/2006 21:59:05

"sans utiliser de controles OCX" ... du javascript c'est pas des applications ...

Pour le code on peut optimiser comme ceci ...

lastItem = "";
function changeitem(nom)
{
    if (lastItem != "")
    {
        eval("document.all."+lastItem+".className = 'normalitem';");
    }
    eval("document.all."+nom+".className = 'currentitem';");
    lastItem = nom;
}

Pour le reste l'aspect CSS est intéressant et apporte quelque chose de légèrement différent au autre source semblable.

Commentaire de FraGag le 13/06/2006 03:39:40

Voici les modifications que je propose :
1° Mettre l'attribut « class » directement à la liste <ul>, supprimer le div l'entourant et fusionner les propriétés pour les sélecteurs « ul » et « .listbox ».
2° Mettre l'attribut « onclick » sur les <li> et enlever les <a>, c'est inutile. Et encore, le mieux serait que, au chargement de la page, un script remplisse l'attribut « onclick » de chaque <li> contenu dans un ul.listbox avec "changeItem(this)" > avec ceci il faudra changer la fonction changeItem pour prendre un élément plutôt qu'une chaîne.
3° Les « id » sont inutiles (à moins d'être utilisés à d'autres fins). J'utiliserais une boucle for pour changer la classe des <li> à normalitem, voire même supprimer la classe, et utiliser plutôt : element.className = "currentitem" (« element » serait un nom plus approprié pour le paramètre de la fonction changeitem() si on passe « this »). De plus, il faudrait que lastItem contienne l'élément et nom son ID...

Si tout cela est trop compliqué, je reviendrai éclaircir ce qui est trop compliqué... après tout, on est ici pour s'aider.

Commentaire de MoiDebutantVB le 13/06/2006 15:31:05

Ok j'ai modifié la source maintenant la liste prend en compte les touches haut et bas (pas encore en boucle).

Commentaire de MoiDebutantVB le 13/06/2006 15:39:10

je ferais les commentaires ce soir si quelqu'un peut me dire comment on met des commentaires en Jscript. Merci.

Commentaire de MoiDebutantVB le 13/06/2006 15:41:15

FraGag : Je ferais ul ce soir et j'essaierair de changer la fonction changeitem pour utiliser "this".

Commentaire de rrk275 le 13/06/2006 18:37:24

//commentaire
/*

commentaire..

*/

Commentaire de MoiDebutantVB le 13/06/2006 18:50:57

Ok merci

Commentaire de MoiDebutantVB le 13/06/2006 19:10:12

C'est bon maintenant la liste ne bugue plus quand on sort de la plage des items.

Commentaire de youspim le 19/06/2006 10:31:43

Salut,

J'aimerais savoir quel est l'avantage par rapport à une balise <select> multiligne.

Merci de m'éclairer.

Commentaire de MoiDebutantVB le 19/06/2006 21:34:38

Cette liste est bien plus paramétrable que la balise select, notamment grâce au CSS.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Item du liste [ par mathieumg ] Comment puis-je récupérer pas la valeur mais le nom de l'élément sélectionné dans une drop-down list ?Merci d'avance !Mathieu M-G Besoin urgent d'une fonction Javascript [ par David ] Bonjour,Voici le context:J'utilise des JSP dans lesquelles j'insert des tags avec des listes déroulantes en import Java.J'ai un champ text dans lequel Liste déroulante [ par mickaelpignier ] Bonjour je suis tres novice en javascript!!Voila je cherhce a enchainer des liste déroulantes ds la mem pageLa premier contien des utilisateurs , la d passage de variable entre javascript et php [ par jeremy77 ] Bonjour,Débutant en javascript et php je cherche a faire passer une varible d'un formulaire afin de pouvoir la récuperer dans un autre page.Mon formul modifier l'apercu des css par javascript [ par Urukai1 ] bonjour,j'ai un formulaire qui permet de creer des css qui seront ensuite enregistré dans une bdd, afin de permettre de voir le résultatpour chaque cl puce dans javascript [ par spacecool ] je cherche un moyen d'écrire dans un editeur de texte fait en javascript, des puces et des numérotations. Je possède un code (que j'ai trouvé ici d'ai Formaulaire PHP, JavaScript [ par bzhrobby ] Bonjour, je n'ai encore jamais codé en JavaScript mais je "connait" PHP, HTML et le C.Voici mon problème:J'ai une liste déroulante qui contient plusie Javascript dans un fichier CSS ?? [ par fredpop ] Bonjour,J'aimerais savoir si il est possibel de mettre du javascript dans un fichier css si oui comment faire ??Car je voudrais savoir si il serait po recherche dans une listbox [ par patinaroulette ] salut a tous!!!&nbsp; j'ai besoin d'aide SVPPPP le probleme est le suivant : &nbsp;j'ai un champ de saisie et une liste box et lorsque je tape une se Liste déroulante et affichage [ par sylvainm58 ] Bonjour,Je suis étudiant et je débute en javascript.Je développe en php/mysql. J'ai une liste déroulante qui est alimenté par une table personne et j'


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,342 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales