navigation dans une jsp avec javascript

**petitelulu** · 27/10/2004, 17h38

Je voulais savoir ce qu'il était possible de faire en javascript :

J'ai une page jsp avec un tableau java (Map). Chaque objet du tableau contient des infos pour remplir un formulaire.
Et je voudrais pourvoir aller d'un "onglet" à l'autre en cliquant sur des boutons et mettre à jour les infos du formulaire.

Par exemple :
La page jsp se charge. J'ai un tableau avec tous les objets.
Je suis sur l'onglet 1 avec les infos de l'objet 1. Je clique sur le bouton "onglet suivant".
'HOP' Je suis sur l'onglet 2 avec les infos de l'objet 2, sans même avoir fait un appel au serveur!

**SpaceFrog** · 27/10/2004, 17h42

heu le coup des onglets c'est possible en css avec un petit javascript à cote ...
en jouant sur des class de div

**petitelulu** · 27/10/2004, 18h52

Merci pour les pistes.
Un petit script que j'ai trouvé pour résoudre mon problème :
(j'ai un peu bidouillé le code d'origine qui est bcp plus complet)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html> 
<head> 
<style type="text/css" media="all"> 
   /* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */ 
   .cachediv { 
      visibility: hidden; 
      overflow: hidden; 
      height: 1px; 
      margin-top: -1px; 
      position: absolute; 
   } 
</style> 
<!-- Script créé par KevBrok ;-) --> 
<script type="text/javascript"> 
   /* 
   * Montre uniquement un div 
   */ 
   function MontreUniquement( nom, numero ) { 
         var NumDiv = 1; 
         var divID = nom + numero; 
 
         if ( document.getElementById ) { // Pour les navigateurs récents 
               while ( document.getElementById( nom + NumDiv) ) { 
                     SetDiv = document.getElementById( nom + NumDiv ); 
                     if ( SetDiv && SetDiv.className != 'cachediv' ) {
                           DivStatus( nom, NumDiv ); 
                        } 
                     NumDiv++; 
                  } 
               DivStatus( nom, numero ) 
            } 
         else if ( document.all ) { // Pour les veilles versions 
               while ( document.all[ nom + NumDiv ] ) {
                     SetDiv = document.all[ nom + NumDiv ]; 
                     if ( SetDiv && SetDiv.className != 'cachediv' ) {
                           DivStatus( nom, NumDiv ); 
                        } 
                     NumDiv++; 
                  } 
               DivStatus( nom, numero ) 
            } 
         else if ( document.layers ) { // Pour les très veilles versions 
               while ( document.layers[ nom + NumDiv ] ) {
                     SetDiv = document.layers[ nom + NumDiv ]; 
                     if ( SetDiv && SetDiv.className != 'cachediv' ) {
                           DivStatus( nom, NumDiv ); 
                        } 
                     NumDiv++; 
                  } 
              DivStatus( nom, numero ) 
            } 
 
      } 
 
   /* 
   * Montre / Cache un div 
   */ 
   function DivStatus( nom, numero ) {
 
         var divID = nom + numero; 
         if ( document.getElementById && document.getElementById( divID ) ) { // Pour les navigateurs récents 
               Pdiv = document.getElementById( divID ); 
               PcH = true; 
             } 
         else if ( document.all && document.all[ divID ] ) { // Pour les veilles versions 
               Pdiv = document.all[ divID ]; 
               PcH = true; 
            } 
         else if ( document.layers && document.layers[ divID ] ) { // Pour les très veilles versions 
               Pdiv = document.layers[ divID ]; 
               PcH = true; 
            } 
         else {
               PcH = false; 
            } 
         if ( PcH ) {
               Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv'; 
            } 
      } 
</script>
</head> 
<body> 
- <a href="javascript:MontreUniquement( 'mondiv', '1' )">montre que le Bloc 1</a><br /> 
- <a href="javascript:MontreUniquement( 'mondiv', '2' )">montre que le Bloc 2</a><br /> 
- <a href="javascript:MontreUniquement( 'mondiv', '3' )">montre que le Bloc 3</a><br /> 
- <a href="javascript:MontreUniquement( 'mondiv', '4' )">montre que le Bloc 4</a><br /> 
<br /> 
<div name="mondiv1" id="mondiv1"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc 1</div></div> 
<div name="mondiv2" id="mondiv2"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc 2</div></div> 
<div name="mondiv3" id="mondiv3"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc 3</div></div> 
<div name="mondiv4" id="mondiv4"><div style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;">Bloc 4</div></div> 
</body> 
</html>

**playmobil** · 15/11/2004, 18h55

Bonsoir,

Comment faire pour que cela marche avec plus de 9 onglets ?

Merci de ta réponse.

Playmobil

navigation dans une jsp avec javascript

JavaScript

Discussions similaires

Partager

Partager