 SELFHTML actuel Articles spécialisés DHTML, HTML dynamique |
|
 |
Andreas Waechter: |
|
|
 |
|
| E-Mail: |  mail@andreas-waechter.de |
| Homepage-URL: |  http://andreas-waechter.de |
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
Il arrive fréquemment que l'on veuille afficher des enregistrements d'une base de données (ou d'une source de données quelconque) sous forme de liste, afin de donner aux visiteurs la possibilité de choisir un ou plusieurs de ces enregistrements.
D'ordinaire on utilise pour le faire un 
liste de choix, celle-ci présente cependant quelques difficultés - ainsi la représentation sous forme de colonnes n'est possible que si la police affectée à l'élément select est une police à espacement constant (non proportionnelle ou monospace) et que les textes des différentes colonnes soient remplis avec des espaces protégés ( ).
Il serait en réalité plus élégant d'utiliser un vrai tableau HTML.
Cela ne représente en soi aucun problème si on pose dans la première colonne une case d'option (radiobutton)
(si seul un enregistrement doît être choisi) ou alors une case à cocher (checkbox)
(si plusieurs enregistrements peuvent être choisis). De cette façon, on se prive malheureusement de la possiblilité de cliquer à un endroit de son choix de la ligne du tableau pour choisir l'enregistrement, comme ce serait le cas avec une liste.
Il est cependant possible d'y parvenir en combinant adroitement des cases à cocher ou d'option, un peu de CSS et de JavaScript, et l' élément label - tout au moins pour les navigateurs supportant le DOM.
Pour les navigateurs plus anciens (et pour les navigateurs modernes qui n'interprètent l'élément label), la fonctionnalité des cases d'option/cases à cocher reste disponible, seule disparaît la sélection de la rangée complète.
| |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Choix de l'enregistrement en sélectionnant la rangée complète</title>
<style type="text/css">
<!--
body { background-color:white; }
table.choix_rangees { border-collapse:collapse; }
table.choix_rangees:hover { cursor:pointer; }
table.choix_rangees td { padding:10px; margin:0; }
table.choix_rangees tr { padding:0; margin:0; border:1px solid black; }
table.choix_rangees tr.choisi { background-color:#88e; color:white; }
table.choix_rangees tr.pas_coche { background-color:white; color:black; }
table.choix_rangees label { display:block; width:100%; height:100%; margin:0; padding:0; border:none; }
-->
</style>
<script type="text/javascript"><!--
function choix_rangees_cocher(id_cocher, id_rangee)
{
window.setTimeout("colorier_rangee('"+id_cocher+"','"+id_rangee+"')",300); //la temporisation est nécessaire parce que le gestionnaire d'événement est déclenché avant que la case à cocher ne soit commutée...
return true;
}
function colorier_rangee(id_cocher, id_rangee)
{
document.getElementById(id_rangee).className = ((document.getElementById(id_cocher).checked) ? "choisi" : "pas_coche");
}
function rangee_choix_option(id_cocher, id_rangee,count)
{
window.setTimeout("colorier_rang_option('"+id_cocher+"','"+id_rangee+"','" + count + "')",300); //la temporisation est nécessaire parce que le gestionnaire d'événement est déclenché avant que la case à cocher ne soit commutée...
return true;
}
function colorier_rang_option(idcheckcommon, idrowcommon, count)
{
for (i = 1; i <= count; i++)
{
id_rangee = "" + idrowcommon + i;;
id_cocher = "" + idcheckcommon + i;
document.getElementById(id_rangee).className = ((document.getElementById(id_cocher).checked) ? "choisi" : "pas_coche");
}
}
//--></script>
</head>
<body>
<h1>Tableau de choix</h1>
<form name="formulaire" action="" method="GET">
<table class="choix_rangees">
<tr class="pas_coche" id="rangeeno1"><td><input type="checkbox" id="cocher1" name="cocher1" onclick="return choix_rangees_cocher('cocher1','rangeeno1');" onkeyup="return choix_rangees_cocher('cocher1','rangeeno1');"></td><td><label for="cocher1">Royaume Uni de Grande Bretagne et d'Irlande du Nord</label></td><td><label for="cocher1">Londres</label></td></tr>
<tr class="pas_coche" id="rangeeno2"><td><input type="checkbox" id="cocher2" name="cocher2" onclick="return choix_rangees_cocher('cocher2','rangeeno2');" onkeyup="return choix_rangees_cocher('cocher2','rangeeno2');"></td><td><label for="cocher2">Allemagne</label></td><td><label for="cocher2">Berlin</label></td></tr>
<tr class="pas_coche" id="rangeeno3"><td><input type="checkbox" id="cocher3" name="cocher3" onclick="return choix_rangees_cocher('cocher3','rangeeno3');" onkeyup="return choix_rangees_cocher('cocher3','rangeeno3');"></td><td><label for="cocher3">France</label></td><td><label for="cocher3">Paris</label></td></tr>
</table>
<h1>Cases d'option</h1>
<table class="choix_rangees">
<tr class="non_choisi" id="rangee1"><td><input type="radio" id="radio1" value="radio01" name="radio" onclick="return rangee_choix_option('radio','rangee',3);" onkeyup="return rangee_choix_option('radio','rangee',3);"></td><td><label for="radio1">Royaume Uni de Grande Bretagne et d'Irlande du Nord</label></td><td><label for="radio1">Londres</label></td></tr>
<tr class="non_choisi" id="rangee2"><td><input type="radio" id="radio2" value="radio02" name="radio" onclick="return rangee_choix_option('radio','rangee',3);" onkeyup="return rangee_choix_option('radio','rangee',3);"></td><td><label for="radio2">Allemagne</label></td><td><label for="radio2">Berlin</label></td></tr>
<tr class="non_choisi" id="rangee3"><td><input type="radio" id="radio3" value="radio03" name="radio" onclick="return rangee_choix_option('radio','rangee',3);" onkeyup="return rangee_choix_option('radio','rangee',3);"></td><td><label for="radio3">Italie</label></td><td><label for="radio3">Rome</label></td></tr>
</table>
</form>
</body>
</html>
|
<tr class="pas_coche" id="rangeeno1">:
class et id ne sont nécessaires qu'en ce qui concerne la coloration par l'intermédiaire de JavaScript.
<td><input type="checkbox" id="cocher1" name="cocher1" onclick="return choix_rangees_cocher('cocher1','rangeeno1');" onkeyup="return choix_rangees_cocher('cocher1','rangeeno1');"></td>:
Une case à cocher tout à fait normale dans une cellule de tableau avec deux gestionnaires d'événement,
plus de détails à ce sujet ci-dessous dans la partie JavaScript.
<td><label for="cocher1">Royaume uni ...</label></td>:
Une des cellules de données du tableau (il peut y en avoir autant que vous voulez). L'élément label est déterminant ici et fait en sorte qu'un clic sur son contenu équivaut à un clic sur la case à cocher (ou la case d'option) correspondante. La relation entre la case d'option/à cocher et l'élément label s'obtient grâce à la valeur notée dans l'attribut for qui doit correspondre à la valeur id de l'élément input.
<td><label for="cocher1">Londres</label></td>:
Une autre cellule de données du tableau. Ici s'applique la même chose que pour la cellule précédente. Le nombre de cellules du tableau est théoriquement illimité.
Ici c'est avant tout la ligne
table.choix_rangees label { display:block; width:100%; height:100%; margin:0; padding:0; border:none; }
qui est prépondérante.
Elle détermine que les éléments label (qui se trouvent dans le tableau en question avec l'attribut
class-
"choix_rangees" ) doivent être traités comme
éléments de bloc. Ceci est nécessaire afin que
width et
height
soient interprétés. En principe, label est un
élément incorporé
et width et height ne s'appliquent pas aux éléments incorporés. En basculant sur
block,
width et height s'appliquent alors, et l'élément label remplit ainsi complètement la cellule du tableau concernée, de façon à ce qu'il puisse même être cliqué entre les textes des différentes colonnes.
Margin,
padding et
border
sont également initialisés à 0 de façon à ce que le passage pouvant être cliqué soit le plus grand possible.
table.choix_rangees tr.choisi { background-color:#88e; color:white; }
table.choix_rangees tr.pas_coche { background-color:white; color:black; }
Ces deux lignes ne servent qu'à changer la couleur de toute la ligne, selon l'état des cases d'option/à cocher.
JavaScript est utilisé ici uniquemement pour faire ressortir les rangées du tableau ayant été choisies. Pour un choix normal des options, JavaScript n'est pas nécessaire!
Dans un premier temps, les gestionnaires d'événement sont définis:
onclick="return choix_rangees_cocher('cocher1','rangeeno1');" onkeyup="return choix_rangees_cocher('cocher1','rangeeno1');"
onclick="return rangee_choix_option('radio','rangee',3);" onkeyup="return rangee_choix_option('radio','rangee',3);"
Que ce soit en cliquant sur une case à cocher, sur une case d'option, ou en actionnant une touche, une fonction respective est appelée. Elle diffère pour les cases à cocher et les cases d'options (étant donné que pour une case d'option, seule une ligne doit changer de couleur tandis que pour les cases à cocher plusieurs doivent le faire). Pour une touche ou pour un clic de souris, c'est la même fonction qui est appelée.
onchange sonne bien tout d'abord comme le véritable gestionnaire d'événement, mais celui-ci n'est déclenché que lorsque l'élément input cesse d'être la zone de saisie active (focus).
function choix_rangees_cocher(id_cocher, id_rangee)
{
window.setTimeout("colorier_rangee('"+id_cocher+"','"+id_rangee+"')",300);
// la temporisation est nécessaire parce que le gestionnaire d'événement est déclenché
// avant que la case à cocher ne soit commutée...
return true;
}
Cette fonction est appelée lorsque sur une case à cocher une touche est appuyée ou la souris est cliquée. Elle ne fait rien d'autre qu'appeler une autre fonction avec une temporisation, en lui transmettant simplement les paramètres. Cela est nécessaire étant donné que les gestionnaires d'événement sont déclenchés avant que l'état de la case à cocher n'ait changé.
function rangee_choix_option(id_cocher, id_rangee,count)
{
window.setTimeout("colorier_rang_option('"+id_cocher+"','"+id_rangee+"','" + count + "')",300);
// la temporisation est nécessaire parce que le gestionnaire d'événement est déclenché
// avant que la case à cocher ne soit commutée, ...
return true;
}
La fonction correspondante pour les cases d'option:
function colorier_rangee(id_cocher, id_rangee)
{
document.getElementById(id_rangee).className = ((document.getElementById(id_cocher).checked) ? "choisi" : "pas_coche");
}
En changeant l'attribut class pour la rangée du tableau, la ligne change de couleur. Les paramètres transmis sont l'id de la case à cocher et l'id de la rangée du tableau.
function colorier_rang_option(idcheckcommon, idrowcommon, count)
{
for (i = 1; i <= count; i++)
{
id_rangee = "" + idrowcommon + i;;
id_cocher = "" + idcheckcommon + i;
document.getElementById(id_rangee).className = ((document.getElementById(id_cocher).checked) ? "choisi" : "pas_coche");
}
}
Les cases d'option demandent un peu plus de travail. Une seule ou deux cases d'option peuvent changer: celle qui est actuellement cliquée ainsi que celle qui l'était éventuellement auparavant. J'ai résolu cela ici en parcourant toutes les cases d'option dans une boucle et en leur affectant respectivement la classe qui correspond à l'état de la case d'option. La fonction reçoit comme paramètre la partie constante du nom de l'id de la rangée de tableau et de la case d'option ainsi que le nombre des cases d'option. La fonction est implémentée de telle façon que les ID des rangées et des cases d'option doivent se présenter sous la forme: constante<numéro>. J'ai utilisé rangeeno1, rangeeno2, rangeeno3 et cocher1, cocher2, cocher3.
Opera jusqu'à la version 6 
ne connaît pas l'élément Label et ne peut pas affecter des nouvelles classes aux éléments grâce au DOM. La tentative de modifier la mise en page échoue exactement comme avec Netscape 4, les cases à cocher et les cases d'option restant cependant parfaitement fonctionnelles.
| |
Les adresses qui suivent sont recommandées pour mieux comprendre les exemples ci-dessus ou pour approfondir et apprendre d'autres possiblités.
SELFHTML: étiquette pour des éléments
SELFHTML: display (Mode d'affichage ou plutôt non affichage sans prendre de place)
W3C (traduction): L'élément LABEL
W3C: Standard: Display-Property
|
| SELFHTML actuel Articles spécialisés DHTML, HTML dynamique |
