CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 05 22:37:40

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 911 membres
402 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 022 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

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 !

LISTE À CHOIX MULTIPLES

Information sur la source

Catégorie :Formulaire Classé sous : liste, multiple, checkbox Niveau : Débutant Date de création : 26/07/2007 Vu : 9 738

Auteur : Klephte

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :
Aucune note

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

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

ENVOI DE FORMULAIRE AVEC DE L'AJAX

Toutes les sources de Klephte

Sources de la même categorie

CALCULS RAYNAUX V2 par Ali Bibi

VALIDATION D'UN FORMULAIRE par grarestephane

CHAT VIRTUEL par grarestephane

AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv

KERNEL.JS : HÉRITAGE MULTIPLE ET POLYMORPHISME par Kimjoa

OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners

UPLOAD MULTIPLE PHP [UMP] : TÉLÉCHARGEMENT MULTIPLE (AJOUT E... par bultez

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 :<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 :<SELECT name="lstprs">   <OPTION>khkjhjkh</OPTION>   <OPTION>nbnbnb</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é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ésumant bien la situation, alors j'explique dans le détail : j'ai ne liste de valeurs ordonnées Checkbox et formulaire dynamique [ par petitelarve ] bonjour, Je cherche un moyen d'afficher des liste <select> 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 à choix multiple quand je clique sur le second bouton radio et la reverrouiller quand c'est le premier bouto Liste de Checkbox [ par midosd ] Salut tous le mondeComment je peux créer une liste de chekbox (select ou zone div contient un ensemble de checbox avec assesseur) et merci d'avance