[JavaScript] [SRC] Menu à onglets

Auteur · 17/07/2008, 17h46

Citation:

Source : Menu à onglets avec la possibilité de créer des raccourcis clavier pour passer d'un onglet à l'autre
Code :

Code html :

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
 
<style type="text/css">
<!--
.onglet, .conteneur{
 width: 600px;
 float: left;
 clear: both;
 padding: 0px;
 margin: 0px;
}
 
.aspectGeneral{
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 4px;
 padding-bottom: 4px;
 text-align: center;
 margin: 0px 3px 0px 0px;
 cursor: pointer;
 float: left;
 font-weight: normal;
 font-family: Comic Sans MS;
 font-size: 12pt;
}
 
.desactive{
 color:#555555;
 background-color: #777777;
 border-top: inset 2px #777777;
 border-left: inset 2px #777777;
 border-right: inset 2px #777777;
 border-bottom: none;
}
 
.conteneur, .active{
 background-color: #DDDDDD;
}
 
.active{
 color:#000000;
 border-top: outset 2px #777777;
 border-left: outset 2px #777777;
 border-right: outset 2px #777777;
 border-bottom: none;
}
 
.conteneur{
 border-top: none;
 border-left: outset 2px #777777;
 border-right: outset 2px #777777;
 border-bottom: outset 2px #777777;
 margin: 0px;
 padding: 5px;
}
 
.contenu{
 display: none;
 overflow: auto;
 height: 150px;
 padding: 0px;
 margin: 0px;
 border: #FFFFFF groove 3px;
}
 
.souligne{
 text-decoration: underline;
}
 
.comm{
 font-family: "Comic Sans MS";
 font-size: 10pt;
 letter-spacing: 1px;
 color: #000000;
 height: 50px;
 overflow: auto;
 margin: 3px; /* egales (pour le margin right et left au moins) a l'epaisseur de la bordure de contenu */
}
//-->
</style>
 
<script type="text/javascript">
<!--
/* definiton des raccourcis clavier */
/* Syntaxe :
** raccourcis["caractere"] = "idOnglet"
** /!\ Utiliser uniquement des caracteres alphanumeriques :  0-9 ; a-z /!\
** cf. ci-dessous
*************************************/
 
var raccourcis = new Array();
raccourcis["o"] = "onglet0";
raccourcis["n"] = "onglet1";
raccourcis["g"] = "onglet2";
raccourcis["l"] = "onglet3";
raccourcis["e"] = "onglet4";
raccourcis["t"] = "onglet5";
 
raccourcis["0"] = "onglet0";
raccourcis["1"] = "onglet1";
raccourcis["2"] = "onglet2";
raccourcis["3"] = "onglet3";
raccourcis["4"] = "onglet4";
raccourcis["5"] = "onglet5";
 
/* debut du script */
var oldOnglet=null, oldContenu=null;
var objFocus = false;
 
function inputFocus()
{
 objFocus = true;
}
function inputBlur()
{
 objFocus = false;
}
 
function keyUp(ev)
{
   var c, code, o;
 
   if (!objFocus)
   {
     code = ev.keyCode;
 
     if (code>=96 && code<=105) //pave numerique
        c = code-96;    //96 code du 0 du pave numerique
     else
        c = String.fromCharCode(code).toLowerCase();
     o = raccourcis[c]
     if (o!=null)
        mouseClic(o);
  }
}
 
function mouseClic(objId)
{
   var exp = new RegExp("[^onglet]","gi");
   var n = objId.substring(objId.search(exp), objId.length);
   gestionOnglets(n);
}
 
function gestionOnglets(code)
{
 var onglet = document.getElementById("onglet"+code);
 var contenu = document.getElementById("contenu"+code);
 
 if (onglet!=null)
 {
   onglet.className = "active aspectGeneral";
   if (contenu!=null)
      contenu.style.display="block";
 
   if (oldOnglet!=null && oldOnglet != onglet)
   {
     oldOnglet.className = "desactive aspectGeneral";
     if (oldContenu!=null)
        oldContenu.style.display="none";
   }
 
   oldOnglet = onglet;
   oldContenu = contenu;
 }
}
//-->
</script>
 
</head>
 
<body onkeyup="keyUp(event)" onload="mouseClic('onglet0')">
<div><br /><br /></div>
 
<!-- -->
<div class="onglet">
  <div class="desactive aspectGeneral" id="onglet0" onclick="mouseClic(this.id)"> <span class="souligne">o</span>nglet 0</div>
  <div class="desactive aspectGeneral" id="onglet1" onclick="mouseClic(this.id)"> o<span class="souligne">n</span>glet 1</div>
  <div class="desactive aspectGeneral" id="onglet2" onclick="mouseClic(this.id)"> on<span class="souligne">g</span>let 2</div>
  <div class="desactive aspectGeneral" id="onglet3" onclick="mouseClic(this.id)"> ong<span class="souligne">l</span>et 3</div>
  <div class="desactive aspectGeneral" id="onglet4" onclick="mouseClic(this.id)"> ongl<span class="souligne">e</span>t 4</div>
  <div class="desactive aspectGeneral" id="onglet5" onclick="mouseClic(this.id)"> ongle<span class="souligne">t</span> 5</div>
</div>
 
<div class="conteneur">
 <div class="comm">Ceci est le contenu commun aux onglets....<br />
 bla bla bla<br /><br />bla bla bla
 </div>
 
 <div class="contenu" id="contenu0">
      Contenu 0<br />
      <textarea rows="4" cols="20" id="idTextarea" onfocus="inputFocus()" onblur="inputBlur()"></textarea>
 </div>
 <div class="contenu" id="contenu1">
      contenu 1 avec un overflow...
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 </div>
 <div class="contenu" id="contenu2">
      contenu 2
 </div>
 <div class="contenu" id="contenu3">
      contenu 3
 </div>
 <div class="contenu" id="contenu4">
      contenu 4
 </div>
  <div class="contenu" id="contenu5">
      Tapez votre message :
      <input type="text" value="Par Defaut" id="idText" size="40" maxlength="35" onfocus="inputFocus()" onblur="inputBlur()"/>
 </div>
</div>
<!-- -->
 
</body>
 
</html>

Remarques :
- Page avec un système d'onglets, compatible avec IE et FF, pas testé sur d'autres navigateurs ;
- Valide XHTML 1.1 ;
- Code réservé pour des petites pages : en effet tout est dans la même page, les textes sont dans des div cachés ;
- Le code offre la possibilité de créer des raccourcis clavier pour passer d'un onglet à l'autre (dans l'exemple les touches o, n, g, l, e, t et 1, 2, 3, 4, 5 sont gérées).

Script :
Fonctions :

raccourcis[] : tableau pour les raccourcis clavier
keyUp() : fonction appelée lors d'un onkeyup, pour la gestion du clavier
mouseClic() : fonction appelée lors d'un clic sur un onglet
gestionOnglets(N) : gère l'affichage des onglets et des contenus.
inputFocus() / inputBlur() : utilisé pour désactiver ou activer les raccourcis clavier lorsque que les événements onfocus et onblur ont lieu sur les input ou textarea. Il faut toutefois gérer onblur et onfocus sur ces éléments (cf. exemple).

- Syntaxe des id :
ongletN, contenuN, avec N un nombre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="onglet">
  <div class="desactive aspectGeneral" id="onglet0" onclick="mouseClic(this.id)"> <span class="souligne">o</span>nglet 0</div>
  ....
</div>
<div class="conteneur">
  ...
 <div class="contenu" id="contenu0">
      Ceci est le contenu du div.....
 </div>
 ...
</div>

- Definition des raccourcis clavier / Gestion des raccourcis :
Syntaxe :
raccourcis["caractère"] = "idOnglet";

un caractère de a à z (en minuscule !) ou un chiffre de 0 à 9 (cf. exemple).
Il n'est pas nécessaire de définir un raccourci (voir ci-dessous).

onkeyup=keyUp(event) dans la balise body
=> supprimer cet appel si vous ne voulez pas de raccourci.

- Gestion de la souris :
onload="mouseClic('idOnglet')" dans la balise body
=> pour définir l'onglet à afficher lors du chargement de la page.

onclick="mouseClic(this.id)"
=> pour chaque clic sur onglet

- Feuilles de styles :

onglet, conteneur : style commun aux div conteneurs
styles des onglets
- onglet : aspect du conteneur des onglets
- aspectGeneral : style commun à tous les onglets
- desactive : style de l'onglet lorsqu'il est désactivé
- active : style de l'onglet lorsqu'il est activé
conteneur : div qui conient les éléments à afficher.
comm : style de la partie commune à tous les onglets
contenu : style des div qui contiennent les textes à afficher.
souligne : pour souligner un caractère du titre de l'onglet

=> Utilisez le pixel comme unité (bugs divers FF/IE avec les pourcentages).

Autres exemples de menus à onglets :
http://css.developpez.com/galerie/?p...orizontaux#MH2
http://css.developpez.com/tutoriels/menu-onglets/

le_chomeur · 18/07/2008, 13h44

Source très sympathique, il ne manque qu'une gestion objet ( pouvoir ajouter/supprimer des onglets à la volée) et ce serait nickel !

Auteur · 18/07/2008, 14h32

Ce petit script est une manière de présenter une page. Dans la mesure où tout est statique, j'ai précisé qu'il valait mieux le réserver à des pages ayant "peu" de contenu.

le_chomeur : peux-tu préciser ton idée ?

le_chomeur · 21/07/2008, 10h11

Pouvoir gérer les onglets de façon dynamique , pour par exemple lors d'une application ( ou même au chargement ) n'avoir a écrire qu'une ligne pour créer un nouvel onglet avec son contenu ( chargé par ajax par exemple )

Auteur · 21/07/2008, 15h18

Tu veux dire faire un fichier XML de ce genre là par exemple (je ne sais pas s'il est valide

):

Code xml :

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
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<menu>
<onglet id="onglet1" raccourci="o" titre="Onglet 1">
    <contenu>
        <div class="aspectDiv">
            <div>
              <input type="text" value="coucou" />
 
              <input type="radio" name="radio1" />
              <label>choix 1</label>
              <br />
 
              <input type="radio" name="radio1" />
              <label>choix 2</label>
              <br />
 
              <input type="radio" name="radio1" />
              <label>choix 3</label>
            </div>
 
            <div class="paragraphe">
                ceci est le contenu du paragraphe.....
            </div>
        </div>
    </contenu>
</onglet>
 
<onglet id="onglet2" raccourci="n" titre="Titre de l'onglet 2">
    <contenu>
        <div class="paragraphe">
            Ceci sera affiché dans lorsque l'utilsateur aura
            cliqué sur l'onglet2.<br /><br />
            Coucou tout le monde !!
        </div>
    </contenu>
</onglet>
</menu>

Puis tu charges ce fichier via une requête AJAX ?

le_chomeur · 22/07/2008, 08h47

heu non , uniquement le contenu

les onglet serait géré via une méthode genre :

Code :

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

1
2
3
4
5
6
 
function AddOnglet(contenu){
var id = idgénéré
...
monOnglet.contenu = contenu;
}

Auteur · 22/07/2008, 15h14

hum, je vais essayer...

Mais comme je n'ai jamais fait d'AJAX, je vais essayer de faire un truc pas trop indigeste

Je regarde les tutoriel AJAX, et puis je posterai un code.

[edit 06/08/2008]
J'ai réalisé un code avec AJAX et le résultat n'est pas terrible

Le_chomeur : si tu as quelque chose à proposer

[/edit]

Emcy · 19/08/2008, 10h29

Hello,
cool ce topique, j'ai justement besoin d'un système d'onglet dynamique via AJAX : je peux peut être vous aider ....

Auteur, pas besoin de t'embeter avec la partie AJAX => AJAX permet uniquement de récupérer des valeurs dynamiquement donc autant créer statiquement tes variables (ex : créer un tableau MonContenu[x] et donc afficher son contenu en focntion de l'onglet selectionné)

Auteur · 19/08/2008, 12h15

Si j'ai bien compris ce souhaitait le_chômeur, c'est pouvoir ajouter autant d'onglets que possible sans trop bouleverser la page HTML et donc réaliser des requêtes AJAX qui vont créer la page, à l'image de la fonction include en PHP

Citation:

autant créer statiquement tes variables (ex : créer un tableau MonContenu[x] et donc afficher son contenu en fonction de l'onglet sélectionné)

quelque chose dans ce genre :

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
 
contenu[0] = "";
contenu[0] += '<div class="aspectDiv">';
contenu[0] += '            <div>';
contenu[0] += '              <input type="text" value="coucou" />';
contenu[0] += '              <input type="radio" name="radio1" />';
contenu[0] += '              <label>choix 1</label>';
contenu[0] += '              <br />';
contenu[0] += '              <input type="radio" name="radio1" />';
contenu[0] += '              <label>choix 2</label>';
contenu[0] += '              <br />';
contenu[0] += '              <input type="radio" name="radio1" />';
contenu[0] += '              <label>choix 3</label>';
contenu[0] += '            </div>';
contenu[0] += '            <div class="paragraphe">';
contenu[0] += '                ceci est le contenu du paragraphe.....';
contenu[0] += '            </div>';
contenu[0] += '        </div>';

ce n'est pas très propre

et ensuite faire un innerHTML ?

C'est pour ça que je pensais passer par un fichier XML qui me semble plus facile à gérer.

Emcy · 20/08/2008, 09h17

ce n'est pas très propre mais pour le debug, c'est une solution efficace

pour mettre le contenu du fichier charger avec AJAX, il faut faire un truc du genre :

Code :

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

document.getElementById("DivConteneur").innerHTML = xhr.responseText;

=> xhr étant l'objet AJAX (donc tu peux le remplacer par ton tableau)

=> je ne connais pas trop l'XML donc je ne sais pas si c'est plus facile a utiliser...

le_chomeur · 20/08/2008, 17h28

salut a tous ^^
désolé auteur , je suis en vacances en ce moment mais oui tu as compris le principe ^^
pour les données de retour , deux possibilités => parser le doc xml ( ce qui oblige a passer par une méthode externe pour formater l'affichage voulu par l'utilisateur ) ou un innerHTML pour de l'html brut ( le plus courant

)

je reviens la semaine prochaine

ps : pour l'autre post concernant les stoppropagations on en reparlera par mp si tu veux

anakyl · 25/08/2008, 23h43

Bonsoir à tous,

Je recherche justement un script de ce style, mais la différence c'est que je souhaite afficher le contenu d'une page web (principalement en .php) dans chaque onglet.

Exemple : créer un onglet "Forum", et en cliquant dessus s'affiche la page d'accueil du forum dans l'encadré (forum.php).

Est-ce-que quelqu'un pourrait m'aider car je suis vraiment nul en ajax, javascript, dhml ??

Merci pour votre aide

Emcy · 26/08/2008, 09h22

salut,

1- tu crées un événement onclick sur tous tes onglets => a chaque fois que tu cliques sur un onglet, tu lui affecte la classe "ongletActif" et tu enlèves cette classe à l'onglet précédemment selectionné.

2- en fonction de l'onglet sélectionné, tu fais la requète AJAX qui va bien pour charger ton fichier http://ajax.developpez.com/

3- lorsque tu reçois ta requète AJAX, tu mets sont contenu dans la div de ton onglet : document.getElementById("DivConteneur").innerHTML = xhr.responseText;

Pour l'apparence de tes onglets, tu peux t'inspirer de cet exemple : http://css.developpez.com/galerie/?p...orizontaux#MH5

anakyl · 05/09/2008, 12h34

Je suis désolé de répondre aussi tardivement.

Je souhaitais juste te remercier Emcy de m'avoir répondu si vite..

J'ai pas encore réussi exactement, car je suis débutant, mais je me décourage pas..

Les indications que tu m'as donné m'ont été très utiles.

Merci encore

DoubleU · 08/09/2008, 10h44

Je rejoins le chomeur.

L'idéal serait que ton code soit écrit de façon objet avec un constructeur et un destructeur (pour supprimer tous les handlers sur les evenements) ainsi que des méthodes qui proposent d'ajouter/retirer des ongets, obtenir la div de l'onglet actif, charger un onglet via ajax.

Bref, tout plein de détails qui seraient bien utiles pour automatiser le fonctionnement de ton menu.

kaking · 06/10/2008, 13h42

super ce tuto!!!

merci beaucoup!!!!

par contre j'ai une question : comment faire pour que ce soit l'onglet 1 et non le 5 qui soit révélé par defaut? merci beaucoup!

Auteur · 06/10/2008, 14h36

Citation:

Envoyé par kaking

super ce tuto!!!

merci beaucoup!!!!

merci.

Il faut encore que j'implémente une fonction AJAX pour avoir un peu plus d'interactivité dans la page.

Citation:

Envoyé par kaking

par contre j'ai une question : comment faire pour que ce soit l'onglet 1 et non le 5 qui soit révélé par defaut? merci beaucoup!

par défaut, tu as dans le code :

Code :

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

<body onkeyup="keyUp(event)" onload="mouseClic('onglet0')">

Au démarrage c'est l'onglet 0 pas l'onglet 5 qui est affiché par défaut

Pour changer l'onglet affiché par défaut, remplace "onglet0" (id de l'onglet 0) par l'id de l'onglet que tu veux afficher au chargement de la page, dans ton cas, "onglet1".

kaking · 06/10/2008, 16h14

SUPER!

MERCI BEAUCOUP!

Auteur · 24/10/2008, 04h33

Citation:

Source : Menu à onglets II (avec contrôle de l'espace disponible pour l'affichage des onglets)

Code :

Code x :

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />


<style type="text/css">
<!--
.onglet, .conteneur{
 float: left;
 clear: both;
 padding: 0px;
 margin: 0px;
}

.aspectOnglet{
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 4px;
 padding-bottom: 4px;
 text-align: center;
 margin: 0px 3px 0px 0px;
 cursor: pointer;
 float: left;
 /* propriétés de la police de caractères */
 font-weight: normal;
 font-family: Comic Sans MS;
 font-size: 11pt;
}

.desactive{
 color:#555555;
 background-color: #777777;
 border-top: inset 2px #777777;
 border-left: inset 2px #777777;
 border-right: inset 2px #777777;
 border-bottom: none;
}

.active{
 color:#000000;
 border-top: outset 2px #777777;
 border-left: outset 2px #777777;
 border-right: outset 2px #777777;
 border-bottom: none;
}

.conteneur, .active{
 background-color: #DDDDDD;
}

/* les bordures du conteneur ont les mêmes propriétés que les bordures 
** définies dans la classe "active"
*/ 
.conteneur{
 width: 330px;
 border-top: none;
 border-left: outset 2px #777777;
 border-right: outset 2px #777777;
 border-bottom: outset 2px #777777;
 margin: 0px;
 padding: 5px;
}

.contenu{
 display: none;
 overflow: auto;
 height: 150px;
 padding: 2px;
 margin: 0px;
 border: #FFFFFF groove 3px;
}


.comm{
 font-family: "Comic Sans MS";
 font-size: 10pt;
 letter-spacing: 1px;
 color: #000000;
 height: 50px;
 overflow: auto;
 margin: 3px; /* égales (pour le margin right et left au moins) a l'épaisseur de la bordure de contenu */
}
-->
</style>

<script type="text/javascript">
<!--
/*****************************************/
/** definiton des raccourcis clavier   
*** Syntaxe :
** raccourcis["caractere"] = "idOnglet"
** /!\ Utiliser uniquement des caracteres alphanumeriques :  0-9 ; a-z /!\
** cf. ci-dessous
*****************************************/
var raccourcis = new Array();
raccourcis["0"] = "onglet0";
raccourcis["1"] = "onglet1";
raccourcis["2"] = "onglet2";
raccourcis["3"] = "onglet3";
raccourcis["4"] = "onglet4";
raccourcis["5"] = "onglet5";
raccourcis["6"] = "onglet6";
raccourcis["7"] = "onglet7";
raccourcis["8"] = "onglet8";


/** gestion des événements clavier **/
var objFocus = false;

/* gestion des événements onfocus et onblur sur les input
** => active ou désactive les raccourcis clavier
*/
function inputFocus()
{
 objFocus = true;
}
function inputBlur()
{
 objFocus = false;
}

/* lecture d'une touche clavier :
** si le code de la touche correspond à un raccourci défini ci-dessus, l'onglet est activé
*/
function keyUp(ev)
{
   var c, code, o;

   if (!objFocus)
   {
     code = ev.keyCode;

     if (code>=96 && code<=105) //pave numerique
        c = code-96;    //96 code du 0 du pave numerique
     else
        c = String.fromCharCode(code).toLowerCase();
     o = raccourcis[c]
     if (o!=null)
     {
        mouseClic(o);
        // ajout du gestionnaire d'affichage des onglets
        indexOnglet = parseInt(extractIndexOnglet(o))+1
        affichageOnglets();
     }   
  }
}

/*****************************************/
/** gestion des onglets et des contenus **/
/* variables globales */
var oldOnglet=null, oldContenu=null;


/* permet de connaître l'index de l'onglet sélectionné */
function extractIndexOnglet(objId)
{
  var exp = new RegExp("[^onglet]","gi");
  var n = objId.substring(objId.search(exp), objId.length);
  return n;
}

/* affiche le contenu n de l'onglet n */
function gestionOnglets(code)
{
 var onglet = document.getElementById("onglet"+code);
 var contenu = document.getElementById("contenu"+code);

 if (onglet!=null)
 {
   onglet.className = "active aspectOnglet";
   if (contenu!=null)
      contenu.style.display="block";

   if (oldOnglet!=null && oldOnglet != onglet)
   {
     oldOnglet.className = "desactive aspectOnglet";
     if (oldContenu!=null)
        oldContenu.style.display="none";
   }
      
   oldOnglet = onglet;
   oldContenu = contenu;
 }
}

/* gestion du clic sur un onglet */
function mouseClic(objId)
{
  var n;
  n = extractIndexOnglet(objId);
  gestionOnglets(n);
}

/**********************************************/
/** gestion des boutons précédent et suivant **/
var indexOnglet;
function flecheOver(obj)
{
  obj.className = "active aspectOnglet";
}

function flecheOut(obj)
{
  obj.className = "desactive aspectOnglet";
}

function flecheClic(sens)
{
  indexOnglet = indexOnglet + sens;
  affichageOnglets();
}


function affichageOnglets()
{
  var menuOnglets = document.getElementById("menuOnglets");
  var w = document.getElementById("pages").clientWidth;
  var tabOnglets = menuOnglets.getElementsByTagName("div");
  var n;
 
  if (indexOnglet <= 0)
    indexOnglet = 1;
    
  if (indexOnglet > tabOnglets.length-2)
    indexOnglet = tabOnglets.length-2;      
    
  //if (w < menuOnglets.clientWidth) //enlever le commentaire sur la condition si nécessaire
  {       
    for (n=1; n<tabOnglets.length-1; n++)
      tabOnglets[n].style.display = "block";
  
    n = 1;
    while (w<menuOnglets.clientWidth && n<indexOnglet)
    {
      tabOnglets[n].style.display = "none"; 
      n++;
    }
    
    n = tabOnglets.length-2;
    while (w<menuOnglets.clientWidth && n>indexOnglet)
    {
      tabOnglets[n].style.display = "none";
      n--;
    }
  }  

}

/**********************************************/
/** démarrage du script                      **/
function startScript(objId)
{
  mouseClic(objId);
  indexOnglet = parseInt(extractIndexOnglet(objId))+1
  affichageOnglets();
}

//-->
</script>

</head>

<body onkeyup="keyUp(event)" onload="startScript('onglet0')">
<div><br /><br /></div>

<!-- -->
<div class="onglet" id="menuOnglets">
  <div class="desactive aspectOnglet" onmouseover="flecheOver(this)" onmouseout="flecheOut(this)" onclick="flecheClic(-1)">&lt;&lt;</div>
  <div class="desactive aspectOnglet" id="onglet0" onclick="mouseClic(this.id)">Onglet 0</div>
  <div class="desactive aspectOnglet" id="onglet1" onclick="mouseClic(this.id)">Onglet 1</div>
  <div class="desactive aspectOnglet" id="onglet2" onclick="mouseClic(this.id)">Onglet 2 très long</div>
  <div class="desactive aspectOnglet" id="onglet3" onclick="mouseClic(this.id)">Onglet 3</div>
  <div class="desactive aspectOnglet" id="onglet4" onclick="mouseClic(this.id)">Onglet 4</div>
  <div class="desactive aspectOnglet" id="onglet5" onclick="mouseClic(this.id)">Onglet 5</div>
  <div class="desactive aspectOnglet" id="onglet6" onclick="mouseClic(this.id)">Onglet 6</div>  
  <div class="desactive aspectOnglet" id="onglet7" onclick="mouseClic(this.id)">Onglet 7 très long</div>
  <div class="desactive aspectOnglet" id="onglet8" onclick="mouseClic(this.id)">Onglet 8</div>  
  <div class="desactive aspectOnglet" onmouseover="flecheOver(this)" onmouseout="flecheOut(this)" onclick="flecheClic(1)">&gt;&gt;</div>  
</div>

<div class="conteneur" id="pages">
  <div class="comm">Ceci est le contenu commun aux onglets....<br />
  bla bla bla<br /><br />bla bla bla
  </div>

  <div class="contenu" id="contenu0">
      Contenu 0<br />
      <textarea rows="4" cols="20" id="idTextarea" onfocus="inputFocus()" onblur="inputBlur()"></textarea>
  </div>
  <div class="contenu" id="contenu1">
      contenu 1 avec un overflow...
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <div class="contenu" id="contenu2">
      contenu 2
  </div>
  <div class="contenu" id="contenu3">
      contenu 3
  </div>
  <div class="contenu" id="contenu4">
      contenu 4
  </div>
  <div class="contenu" id="contenu5">
      contenu 5<br />Tapez votre message :
      <input type="text" value="Par Defaut" id="idText" size="40" maxlength="35" onfocus="inputFocus()" onblur="inputBlur()"/>
  </div>
  <div class="contenu" id="contenu6">
      contenu 6
  </div>
  <div class="contenu" id="contenu7">
      contenu 7
  </div>
  <div class="contenu" id="contenu8">
      contenu 8
  </div>  
</div>
<!-- -->

</body>

</html>

Remarques :
- Page avec un système d'onglets, compatible avec IE et FF, pas testé sur d'autres navigateurs ;
- Valide XHTML 1.1 ;
- Code réservé pour des petites pages : en effet tout est dans la même page, les textes sont dans des div cachés ;
- Le code offre la possibilité de créer des raccourcis clavier pour passer d'un onglet à l'autre (dans l'exemple les touches de 0 à 8 sont gérées).

Par rapport un premier script posté :
- Ce code contrôle l'espace disponible pour l'affichage des onglets. Il y a des flèches à gauche et à droite des onglets pour les faire défiler (j'avoue les "boutons" sont moches

).

- Je dois admettre que la fonction affichageOnglets() n'est pas très optimisée

: par exemple, j'affiche tous les onglets avant de cacher ceux dont je n'ai pas besoin. Mais c'est le seul moyen que j'ai trouvé pour passer la condition des boucles while (cependant visuellement, on ne s'aperçoit de rien

).
De même ce test pour déterminer si on est arrivé au dernier onglet est à revoir :

Code :

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

1
2
  if (indexOnglet > tabOnglets.length-2)
    indexOnglet = tabOnglets.length-2;

Script :
Fonctions :

raccourcis[] : tableau pour les raccourcis clavier
keyUp() : fonction appelée lors d'un onkeyup, pour la gestion du clavier (modifiée pour gérer l'affichage des onglets)
mouseClic() : fonction appelée lors d'un clic sur un onglet
gestionOnglets(N) : gère l'affichage des onglets et des contenus.

Fonctions ajoutées (par rapport au script précédent) :

flecheOver() : aspect du bouton des flèches lors du onmouseover
flecheOut() : aspect du bouton des flèches lors du onmouseout
flecheClic() : fonction appelée lors du clic sur les flèches (sens = -1 => on recule d'un onglet ; sens = 1 => on avance d'un onglet)
affichageOnglets() : gère l'affichage des onglets en fonction de la place disponible
startScript() : fonction appelée lors du onload de la page. Elle prend en paramètre l'id de l'onglet que l'on souhaite afficher lors du
chargement de la page

Syntaxe des id :
ongletN, contenuN, avec N un nombre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="onglet">
  <div class="desactive aspectGeneral" id="onglet0" onclick="mouseClic(this.id)"> Onglet 0</div>
  ....
</div>
<div class="conteneur">
  ...
 <div class="contenu" id="contenu0">
      contenu 0
 </div>
 ...
</div>

- Definition des raccourcis clavier / Gestion des raccourcis :
Syntaxe :
raccourcis["caractère"] = "idOnglet";

un caractère de a à z (en minuscule !) ou un chiffre de 0 à 9 (cf. exemple).
Il n'est pas nécessaire de définir un raccourci (voir ci-dessous).

onkeyup=keyUp(event) dans la balise body
=> supprimer cet appel si vous ne voulez pas de raccourci.

- Gestion de la souris :
onload="startScript('idOnglet')" dans la balise body (dans le 1er script c'est la fonction mouseClic() qui est appelée)
=> pour définir l'onglet à afficher lors du chargement de la page.

onclick="mouseClic(this.id)"
=> pour chaque clic sur onglet

- Feuilles de styles

onglet, conteneur : style commun aux div conteneurs
styles des onglets
- onglet : aspect du conteneur des onglets
- aspectGeneral : style commun à tous les onglets
- desactive : style de l'onglet lorsqu'il est désactivé
- active : style de l'onglet lorsqu'il est activé
conteneur : div qui conient les éléments à afficher.
comm : style de la partie commune à tous les onglets
contenu : style des div qui contiennent les textes à afficher.

=> Utilisez le pixel comme unité (bugs divers FF/IE avec les pourcentages).

Emcy · 24/10/2008, 10h10

bravo ça marche nickel

Par contre j'ai une petite remarque : je trouve que le système de flèches pour naviguer dans les onglets n'est pas intuitif (je pense que l'utilisateur lambda risque de ne pas comprendre). Donc je pense qu'il faut utiliser l'une des solutions suivantes :
- on agrandit automatiquement le bloque de façon à ce que tous les onglets soient visibles : on peut mettre les onglets sur plusieurs lignes pour en mettre plus => dans certaines résolutions ça risque de faire moche (si le bloc est trop large).
- On crée un unique bouton avec le nom de l'onglet sélectionné. Lorsque l'on clic dessus, la liste des onglets apparait => il suffira ensuite de sélectionner l'onglet que l'on désir dans la liste pour mettre a jour le contenu du bouton et de la frame => ça me semble la meilleur méthode, non ?

Qu'en pensez-vous ?

18/07/2008, 13h44	#2
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	Source très sympathique, il ne manque qu'une gestion objet ( pouvoir ajouter/supprimer des onglets à la volée) et ce serait nickel ! __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

21/07/2008, 10h11	#4
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	Pouvoir gérer les onglets de façon dynamique , pour par exemple lors d'une application ( ou même au chargement ) n'avoir a écrire qu'une ligne pour créer un nouvel onglet avec son contenu ( chargé par ajax par exemple ) __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

20/08/2008, 09h17	#10
Emcy En attente de confirmation mail Inscription : octobre 2003 Messages : 1 249 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 1 249 Points : 261 Points : 261	ce n'est pas très propre mais pour le debug, c'est une solution efficace pour mettre le contenu du fichier charger avec AJAX, il faut faire un truc du genre : Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById("DivConteneur").innerHTML = xhr.responseText; => xhr étant l'objet AJAX (donc tu peux le remplacer par ton tableau) => je ne connais pas trop l'XML donc je ne sais pas si c'est plus facile a utiliser...
	00

20/08/2008, 17h28	#11
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 563 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 563 Points : 4 025 Points : 4 025	salut a tous ^^ désolé auteur , je suis en vacances en ce moment mais oui tu as compris le principe ^^ pour les données de retour , deux possibilités => parser le doc xml ( ce qui oblige a passer par une méthode externe pour formater l'affichage voulu par l'utilisateur ) ou un innerHTML pour de l'html brut ( le plus courant ) je reviens la semaine prochaine ps : pour l'autre post concernant les stoppropagations on en reparlera par mp si tu veux __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

06/10/2008, 13h42	#16
kaking Débutant Inscription : mars 2008 Messages : 691 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Paris (Île de France) Informations forums : Inscription : mars 2008 Messages : 691 Points : 188 Points : 188	super ce tuto!!! merci beaucoup!!!! par contre j'ai une question : comment faire pour que ce soit l'onglet 1 et non le 5 qui soit révélé par defaut? merci beaucoup! __________________ « Pour garantir la sécurité dans la continuité et la stabilité, la République sera bientôt réorganisée et deviendra la Première Puissance Galactique Impériale ! Pour une société fondée sur l’ordre et la sécurité ! »
	00

18/07/2008, 14h32	#3
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	Ce petit script est une manière de présenter une page. Dans la mesure où tout est statique, j'ai précisé qu'il valait mieux le réserver à des pages ayant "peu" de contenu. le_chomeur : peux-tu préciser ton idée ?
	00

22/07/2008, 15h14	#7
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 796 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 796 Points : 5 119 Points : 5 119	hum, je vais essayer... Mais comme je n'ai jamais fait d'AJAX, je vais essayer de faire un truc pas trop indigeste Je regarde les tutoriel AJAX, et puis je posterai un code. [edit 06/08/2008] J'ai réalisé un code avec AJAX et le résultat n'est pas terrible Le_chomeur : si tu as quelque chose à proposer [/edit]
	00

19/08/2008, 10h29	#8
Emcy En attente de confirmation mail Inscription : octobre 2003 Messages : 1 249 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 1 249 Points : 261 Points : 261	Hello, cool ce topique, j'ai justement besoin d'un système d'onglet dynamique via AJAX : je peux peut être vous aider .... Auteur, pas besoin de t'embeter avec la partie AJAX => AJAX permet uniquement de récupérer des valeurs dynamiquement donc autant créer statiquement tes variables (ex : créer un tableau MonContenu[x] et donc afficher son contenu en focntion de l'onglet selectionné)
	00

25/08/2008, 23h43	#12
anakyl Invité de passage Inscription : juin 2008 Messages : 8 Détails du profil Informations forums : Inscription : juin 2008 Messages : 8 Points : 4 Points : 4	Bonsoir à tous, Je recherche justement un script de ce style, mais la différence c'est que je souhaite afficher le contenu d'une page web (principalement en .php) dans chaque onglet. Exemple : créer un onglet "Forum", et en cliquant dessus s'affiche la page d'accueil du forum dans l'encadré (forum.php). Est-ce-que quelqu'un pourrait m'aider car je suis vraiment nul en ajax, javascript, dhml ?? Merci pour votre aide
	00

26/08/2008, 09h22	#13
Emcy En attente de confirmation mail Inscription : octobre 2003 Messages : 1 249 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 1 249 Points : 261 Points : 261	salut, 1- tu crées un événement onclick sur tous tes onglets => a chaque fois que tu cliques sur un onglet, tu lui affecte la classe "ongletActif" et tu enlèves cette classe à l'onglet précédemment selectionné. 2- en fonction de l'onglet sélectionné, tu fais la requète AJAX qui va bien pour charger ton fichier http://ajax.developpez.com/ 3- lorsque tu reçois ta requète AJAX, tu mets sont contenu dans la div de ton onglet : document.getElementById("DivConteneur").innerHTML = xhr.responseText; Pour l'apparence de tes onglets, tu peux t'inspirer de cet exemple : http://css.developpez.com/galerie/?p...orizontaux#MH5
	00

05/09/2008, 12h34	#14
anakyl Invité de passage Inscription : juin 2008 Messages : 8 Détails du profil Informations forums : Inscription : juin 2008 Messages : 8 Points : 4 Points : 4	Je suis désolé de répondre aussi tardivement. Je souhaitais juste te remercier Emcy de m'avoir répondu si vite.. J'ai pas encore réussi exactement, car je suis débutant, mais je me décourage pas.. Les indications que tu m'as donné m'ont été très utiles. Merci encore
	00

08/09/2008, 10h44	#15
DoubleU Modérateur Inscription : janvier 2006 Messages : 1 107 Détails du profil Informations forums : Inscription : janvier 2006 Messages : 1 107 Points : 1 118 Points : 1 118	Je rejoins le chomeur. L'idéal serait que ton code soit écrit de façon objet avec un constructeur et un destructeur (pour supprimer tous les handlers sur les evenements) ainsi que des méthodes qui proposent d'ajouter/retirer des ongets, obtenir la div de l'onglet actif, charger un onglet via ajax. Bref, tout plein de détails qui seraient bien utiles pour automatiser le fonctionnement de ton menu.
	00

06/10/2008, 16h14	#18
kaking Débutant Inscription : mars 2008 Messages : 691 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Paris (Île de France) Informations forums : Inscription : mars 2008 Messages : 691 Points : 188 Points : 188	SUPER! MERCI BEAUCOUP! __________________ « Pour garantir la sécurité dans la continuité et la stabilité, la République sera bientôt réorganisée et deviendra la Première Puissance Galactique Impériale ! Pour une société fondée sur l’ordre et la sécurité ! »
	00

24/10/2008, 10h10	#20
Emcy En attente de confirmation mail Inscription : octobre 2003 Messages : 1 249 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 1 249 Points : 261 Points : 261	bravo ça marche nickel Par contre j'ai une petite remarque : je trouve que le système de flèches pour naviguer dans les onglets n'est pas intuitif (je pense que l'utilisateur lambda risque de ne pas comprendre). Donc je pense qu'il faut utiliser l'une des solutions suivantes : - on agrandit automatiquement le bloque de façon à ce que tous les onglets soient visibles : on peut mettre les onglets sur plusieurs lignes pour en mettre plus => dans certaines résolutions ça risque de faire moche (si le bloc est trop large). - On crée un unique bouton avec le nom de l'onglet sélectionné. Lorsque l'on clic dessus, la liste des onglets apparait => il suffira ensuite de sélectionner l'onglet que l'on désir dans la liste pour mettre a jour le contenu du bouton et de la frame => ça me semble la meilleur méthode, non ? Qu'en pensez-vous ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email