Systeme d'onglets tricolore

**HerQuLe** · 17/07/2008, 02h36

Hello

bon je sais pas trop si ca a sa place ici, ca irait peut etre bien dans CSS ou Javascript mais tempis

Voila pour vous donner une idée je veux faire un systeme avec 3 onglets de couleur différente, situés dans le div top, et un contenu situé dans le div content. Y a rien de dynamique ou d'ajax ou quoi que ca soit mais je voulais savoir si c'etait possible, sans recharger la page, et sans javascript, de changer a la fois le css de content (arriere plan qui ira avec l'onglet cliqué ^^), et le contenu

Pour simplifier j'ai le code suivant en gros

Code :

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

1
2
3
4
<div id="main">
  <div id="top"></div>
  <div id="content"></div>
</div>

Enfin bon je suppose que c'est pas possible sans javascript mais je demande quand meme ^^

Et avec vous feriez comment? un javascript avec content->innerHTML par exemple ou il y a d'autres moyens? et c'est possible de changer le css d'un div a partir de javascript, en direct?

Merci d'avance

**Bovino** · 17/07/2008, 08h15

Impossible sans javascript...

**Auteur** · 17/07/2008, 11h02

bonjour,

j'avais fait une page avec un système d'onglets (compatible avec IE et FF, pas testé sur d'autres navigateurs).

Voici un exemple complet :

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
224
225
 
<!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>

pour le "fun" j'avais même ajouté une fonction pour créer des raccourcis (tape o, n, g, l, e, t ou 1, 2, 3, 4, 5 sur ton clavier pour passer d'un onglet à l'autre). Les touches de raccourcis sont automatiquement désactivées si tu écris dans un input ou un textaera (cf. exemple). Il faut toutefois gérer onblur et onfocus sur ces éléments.

Voici une documentation succincte du script :

- Script
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.

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">
      contenu 0
 </div>
 ...
</div>

- Definition des raccourcis clavier :
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).

Gestion des raccourcis :
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

**HerQuLe** · 17/07/2008, 17h23

merci pour les réponses je vais tester ca

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

autre exemple de menu à onglets :
http://css.developpez.com/galerie/?p...orizontaux#MH2

Systeme d'onglets tricolore

JavaScript

Discussions similaires

Partager

Partager