Source : Menu à onglets avec la possibilité de créer des raccourcis clavier pour passer d'un onglet à l'autre
Code :
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
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/
[SRC] Menu à onglets
Répondre avec citation
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 
):
Envoyé par kaking
Par rapport un premier script posté :
Partager