Liste à choix multiples

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 185 fois - Téléchargée 19 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
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
6 août 2007 à 09:44
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)