begin process at 2010 03 19 16:07:31
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > LISTE À CHOIX MULTIPLES

LISTE À CHOIX MULTIPLES



 Description

Cliquez pour voir la capture en taille normale
Un exemple simple de mise en ouvre du Framework prototypeJs et des feuilles de styles.
Les lignes de la liste changent de couleur au survol du pointeur et autorisent l'activation du Checkbox par un simple clique de la ligne, le tout en 10 lignes.
S'agissant d'un exemple, je ne conseillerai pas sa mise en production sans l'ajout de tests supplémentaires.



Source

  • <HTML>
  • <HEAD>
  • </HEAD>
  • <BODY>
  • <style type="text/css">
  • #dataset tr.mov {font-weight:bold; color:#fff; background:#EE6600; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
  • #dataset tr.sel {font-weight:bold; color:#fff; background:#FF8822; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
  • #dataset tr {font-weight:bold; color:#444; background:#ECF5FA; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
  • </style>
  • <script type="text/javascript" src="prototype-1.5.0.js"></script>
  • <TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1 id="dataset" >
  • <TR onclick="SelectLine(this)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
  • <TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
  • <TD>001</TD>
  • </TR>
  • <TR onclick="SelectLine(this)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
  • <TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
  • <TD>002</TD>
  • </TR>
  • <TR onclick="SelectLine(this)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
  • <TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
  • <TD>003</TD>
  • </TR>
  • </TABLE>
  • <script type="text/javascript">
  • function SelectLine(elt){
  • $(elt).toggleClassName('sel');
  • var arCheckBox = $(elt).getElementsBySelector('input');
  • arCheckBox[0].checked=($(elt).hasClassName('sel'));
  • }
  • function MouseOver(elt){
  • $(elt).addClassName('mov');
  • }
  • function MouseOut(elt){
  • $(elt).toggleClassName('mov');
  • }
  • </script>
  • </BODY>
  • </HTML> 
<HTML>
<HEAD>
</HEAD>
<BODY>
<style type="text/css">
#dataset tr.mov {font-weight:bold; color:#fff; background:#EE6600; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
#dataset tr.sel {font-weight:bold; color:#fff; background:#FF8822; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
#dataset tr {font-weight:bold; color:#444; background:#ECF5FA; padding:2px 0; text-indent:2px; margin-top:2px; border:1px solid #89d;}
</style>

<script type="text/javascript" src="prototype-1.5.0.js"></script>

<TABLE WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1 id="dataset" >
	<TR onclick="SelectLine(this)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
		<TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
		<TD>001</TD>
	</TR>
	<TR onclick="SelectLine(this)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
		<TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
		<TD>002</TD>
	</TR>
	<TR onclick="SelectLine(this)"  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)">
		<TD width="10"><INPUT type="checkbox" id=checkbox1 name=checkbox1></TD>
		<TD>003</TD>
	</TR>
</TABLE>

<script type="text/javascript">
function SelectLine(elt){
	$(elt).toggleClassName('sel');
	var arCheckBox = $(elt).getElementsBySelector('input');
	arCheckBox[0].checked=($(elt).hasClassName('sel'));
}
function MouseOver(elt){
	$(elt).addClassName('mov');
}
function MouseOut(elt){
	$(elt).toggleClassName('mov');
}
</script>
</BODY>
</HTML>

 Conclusion

Le fichier prototype-1.5.0.js se télécharge sur http://prototypejs.org/


 Sources du même auteur

Source avec Zip Source avec une capture TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT
ENVOI DE FORMULAIRE AVEC DE L'AJAX
Toutes les sources de Klephte

 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
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

RETROUVER LE NUMÉROS DE TELEPHONE DE VOTRE EMPLOYER RAPIDEME... par rappise
Source avec Zip Source avec une capture TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT par Klephte
Source avec Zip Source avec une capture JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv
Source avec Zip KERNEL.JS : HÉRITAGE MULTIPLE ET POLYMORPHISME par Kimjoa
Source avec Zip OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

Commentaires et avis

Commentaire de XtremDuke le 06/08/2007 09:44:32

Simple et efficace (merci proto :).
Cependant, si tu utilises du CSS, evites les attributs du genre WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

checkbox multiple verifier nbre de choix [ par toniom ] slt j'ai des champs checkbox à choix multiples.exemple d'une des balises :&lt;input type="checkbox" name="Formation[]" onClick="verifier(this,this.for interaction liste multiple [ par mojito84 ] voila je suis debutant en js et je voudrais utiliser deux liste de selection multiple comme ceci:1. Dans la premiere liste j'ai affiché le resultat d' Sélectionner tous les items d'une liste [ par vvm ] j'ai une liste :&lt;SELECT name="lstprs"&gt;&nbsp;&nbsp;&nbsp;&lt;OPTION&gt;khkjhjkh&lt;/OPTION&gt;&nbsp;&nbsp;&nbsp;&lt;OPTION&gt;nbnbnb&lt;/OPTION&g Focus sur un élément dans une liste Select multiple [ par Barbichou ] Bonjour.J'ai une liste à choix multiple dans une page HTML, avec certains des éléments déjà sélectionnés, et triés dans un certain ordre. Le pb est de Tout selectionner dans une liste deroulante [ par vince062 ] Salut mes gens.En fait j'ai un formulaire avec des listes d&#233;roulantes + une checkbox pour chaque liste. Je voudrais par action sur une case a coc centrer l'affichage d'une liste multiple [ par the_mouette ] Bonjour, difficile de faire un titre r&#233;sumant bien la situation, alors j'explique dans le d&#233;tail : j'ai ne liste de valeurs ordonn&#233;es Checkbox et formulaire dynamique [ par petitelarve ] bonjour, Je cherche un moyen d'afficher des liste &lt;select&gt; et  des textearea suite au check sur une checkbox.Par exemble , si on click sur la ch Liste à choix multiple vers liste [ par nougitch ] Bonjour,Je récupère les données d'une base de données dans une liste à choix multiple.A côté de cette liste à choix multiple, se trouve une autre list activer/desactiver liste multiple avec boutons radio [ par nougitch ] Bonjour, J'aimerai activer la liste &#224; choix multiple quand je clique sur le second bouton radio et la reverrouiller quand c'est le premier bouto lier une liste de checkbox (case à cocher) à une liste déroulante [ par nina599 ] Bonjour, Après avoir chercher longtemps chez notre ami google sans trouver de piste je remets entre vos mains mon soucis espérant que quelqu'un y jett


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo ciel d'orage 
  

Visiter la photothèque
 
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 : 0,967 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)