Liste à choix multiples

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 813 fois - Téléchargée 17 fois

Commenter

Contenu du snippet

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 / Exemple : 


<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/

A voir également

Ajouter un commentaire

Commentaire

Signaler
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
 3 -
Simple et efficace (merci proto :).
Cependant, si tu utilises du CSS, evites les attributs du genre WIDTH=75% BORDER=1 CELLSPACING=1 CELLPADDING=1...
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Klephte)