[SRC] Menu à onglets

**Auteur** · 17/07/2008, 17h46

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;
}

[SRC] Menu à onglets

Contribuez

Vue hybride

Discussions similaires

Partager

Partager