begin process at 2012 02 09 18:29:03
  Trouver un code source :
 
dans
 
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

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip DECOMPTEUR ET CHECKBOX TEMOIN par dialvb
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

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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

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,154 sec (3)

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