mettre en "surbrillance" par validation clavier

mettre en "surbrillance" par validation clavier - HTML/CSS - Programmation

Marsh Posté le 23-07-2007 à 16:55:27    

Bonjour,
 
J'ai une liste de tâche sous forme de tableau (1d) où je peux mettre en
surbrillance 1 seul tache à la fois en utilisant les flêches haut et bas du  
clavier.
jusqu'ici, ça fonctionne.
 
Or, maintenant je veux pouvoir "validez" les tâches de ma liste dans l'ordre que  
je veux en les forcent à rester en surbrillance si j'ai appuyer sur "validez"
 
head

Code :
  1. <style type="text/css">
  2. <!--
  3. body {
  4. background-image: url(./images/guide-background.png);
  5. background-color: #000000;
  7. .tabnormal{background-color:white; color:navy; font-weight:bold}
  8. .tabover{background-color:green; color:white; font-weight:bold}
  9. }
  12. </style>
  14. <SCRIPT LANGUAGE="JavaScript">
  15. NavName = navigator.appName;
  16. NavVers = navigator.appVersion;
  17. Navigateur = NavName + " " + NavVers;
  18. </SCRIPT>
  20. <link href="style.css" rel="stylesheet" type="text/css">
  22. <script language="javascript">
  23. document.onkeypress = keyEvent;
  24. var index;
  25. var menu;
  26. function init(){
  27. index = 0;
  28. menu = new Array(
  29.  "tache n°1",
  30.  "tache n°2",
  31.  "tache n°3",
  32.  "tache n°4",
  33.  "tache n°5"
  34.  );
  35. drawMenu();
  36. }
  38. function keyEvent(e) {
  39. var key;
  40. if (e.keyCode) key = e.keyCode;
  41. else key = e.which;
  43. if(key == 116) {// rouge key
  44.   parent.window.location = './identification.html';
  45. }
  46. if(key == 117) {// vert key
  47.   parent.window.location = './identifica.html';
  48. }
  49. if(key == 118) {// jaune key
  50.   parent.window.location = './identification.html';
  51. }
  52. if(key == 119) {// bleu key
  53.   parent.window.location = './identification.html';
  54. }
  57. if(key == 38) {
  58. // key up
  59.  if(index > 0) {
  60.   index --;
  61.   drawMenu();
  62.  }
  64. }
  65. if(key == 40) {
  66. // key down
  67.  if(index < menu.length - 1) {
  68.   index ++;
  69.   drawMenu();
  70.  }
  71. }
  75. if(key == 13) {
  76. // validation key
  77.  switch(index){
  78.   case 0:
  79.    parent.window.location = './tache1.html';
  80.    break;
  81.   case 1:
  82.    parent.window.location = './tache2.html';
  83.    break;
  84.   case 2:
  85.    this.className='tabover';
  86.    //break;
  87.   case 3:
  88.    this.className='tabover';
  89.    //break;
  90.   case 4:
  91.    this.className='tabover';
  92.    //break;
  93.  }
  95. }
  97. }
  99. function drawMenu(){
  100. var str = '<table style="table">';
  101. for(var i = 0; i < menu.length ; i++) {
  102.  if(i == index) str += '<tr><td class="selected" height="25" width="650">&nbsp;&nbsp;&nbsp;' + menu[i] + "</td></tr>";
  103.  else str += '<tr><td class="normal" height="25">&nbsp;&nbsp;&nbsp;' + menu[i] + "</td></tr>";
  104. }
  105. str += "</table>";
  106. document.getElementById("tablo" ).innerHTML = str;
  107. }
  108. </script>


 
 
et body
 

Code :
  1. <body topmargin="0" marginheight="0" onload='init()' >
  4.   <p><div id="tablo" style="position:absolute;top:90px;left:-5px;"></div></p>
  5.  
  7. </body>


 
je cherche une solution et je suis novice.
 
merci
odo

Reply

Marsh Posté le 23-07-2007 à 16:55:27   

Reply

Marsh Posté le 23-07-2007 à 18:50:40    

Dans ton javascript le var index ne joue aucun rôle.
var index est défini dans la ligne 27 avec la valeur 0.
 
Tu as beau à faire des tests (switch), dans ton script sa valeur ne bouge pas est reste toujours à zéro.

Reply

Marsh Posté le 23-07-2007 à 23:04:11    

Sorry, j'étais trop vite.
Peut-être ceci:

Code :
  1. <HTML>
  2. <HEAD>
  3. <TITLE> New Document </TITLE>
  4. <style type="text/css">
  5. body {background-color: #FFFFFF;}
  6. .tabnormal{background-color:white; color:navy; font-weight:bold;}
  7. .tabover{background-color:green; color:white; font-weight:bold;}
  8. .tabdone{background-color:red; color:black; font-weight:bold;}
  9.       </style>
  11.       <script language="javascript">
  12.       document.onkeypress = keyEvent;      var index;      var menu;
  13.   var drap= new Array;
  15.       function init(){
  16.           menu = new Array("tache n°1","tache n°2","tache n°3","tache n°4","tache n°5" );
  17.   for(var i = 0; i < menu.length ; i++) {drap[i]=0}
  18.   index = 0;         drawMenu();
  19.       }
  21.       function keyEvent(e) {
  22.          var key;
  23.           if (e.keyCode) key = e.keyCode;
  24.           else key = e.which;
  25.           if((key == 38) && (index > 0)) {index --;drawMenu();}   // key up
  26.           if((key == 40) && (index < menu.length - 1))    index ++; drawMenu(); }    // key down
  27.           if(key == 13) {drap[index]="1"; drawMenu()}          // validation key
  29. }
  30.       function drawMenu(){
  31.       var str = '<table style="table">';
  32.       for(var i = 0; i < menu.length ; i++) {
  33. var h="tabnormal"; //neutre
  34. if(index==i){h="tabover" ; } //on y est
  35. if(drap[i]==1) {h="tabdone"} // c'est fait
  36. str += '<tr><td class="'+h+'" height="25" width="650">&nbsp;&nbsp;&nbsp;' + menu[i] + "</td></tr>";
  37.       }
  38.        str += "</table>";
  39.         document.getElementById("tablo" ).innerHTML = str;
  40.        }
  42.       </script>
  43. </HEAD>
  45.       <body topmargin="0" marginheight="0" onload='init()' >
  47.        <p><div id="tablo" style="position:absolute;top:90px;left:-5px;"></div></p>
  49.       </body>
  50. </BODY>
  51. </HTML>


 
Mais attention, si tu ne sauvegarde pas quelque part le var drap, cela ne fonctionne tant que tu restes sur la page actuelle!
 
 

Reply

Marsh Posté le 24-07-2007 à 11:29:19    

Merci d'avoir répondu;
je pense avoir attaqué trop gros par rapport à mes compétences avec cette question.
Je vais donc reformuler complètement différemment sur un autre post (ce sera plus logique)
 
odo

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed