|
Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
LISTBOX EN CSS, JSCRIPT ET DHTML
Information sur la source
Description
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
Pour les "Membres Club", vous pouvez 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
Sources en rapport avec celle ci
Commentaires et avis
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!!! j'ai besoin d'aide SVPPPP le probleme est le suivant : 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'
|
Téléchargements
Logiciels à télécharger sur le même thème :
|