Liste à choix multiples

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

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)