Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
En quoi consiste la mise au premier plan d'une fenêtre ?
C'est exactement la même chose que pour votre Windows, Mac OS ou autre : lorsque l'on clique sur une fenêtre, celle-ci passe au premier plan.
Comment définir l'ordre d'apparition des éléments ?
Vous connaissez sûrement la réponse : le
z-index en CSS permet de définir l'ordre de superposition des éléments (en position
absolute) dans votre page.
Plus celui-ci est élevé, plus votre élément prévaudra sur les autres.
Si celui-ci n'est pas précisé, les éléments se retrouvent au-dessus les uns des autres en fonction de l'ordre d'arrivée dans le document. C'est pour cela que quand on ouvre une nouvelle fenêtre dans notre document, celle-ci se retrouve au-dessus de l'autre.
On en déduit notre manière de procéder
Nous allons devoir créer une variable globale, nommée
zindex, qui contiendra le
z-index de la fenêtre au-dessus des autres.
Nous allons ensuite créer une fonction qui va se charger de mettre la fenêtre souhaitée au premier plan et qui va donc incrémenter cette variable.
Cette fonction sera donc appelée lorsque l'on clique sur une fenêtre, et également lorsque l'on ouvre une fenêtre (bah oui, lorsque l'on ouvre une fenêtre, elle se met au premier plan !).
Ça vous paraît difficile ? Attendez de voir le code, vous verrez que nous n'avons besoin que de quelques lignes.
Tout d'abord, pour le fun, nous allons rajouter un autre bouton ouvrant une troisième fenêtre :
Code : HTML1
2
3 | <input type="button" value="Fenêtre 1" onclick="creer_fenetre(100,50,500,100)" />
<input type="button" value="Fenêtre 2" onclick="creer_fenetre(200,100,300,200)" />
<input type="button" value="Fenêtre 3" onclick="creer_fenetre(400,150,300,200)" />
|
On obtient ainsi trois fenêtres :
Maintenant, écrivons notre variable globale
zindex en haut de notre fichier Javascript :
Code : JavaScript1
2
3
4 | var zindex=0;
function creer_fenetre(left,top,width,height){
//etc
|
Puis écrivons notre fonction qui va accueillir un argument, une variable définissant la fenêtre concernée :
Code : JavaScript1
2
3
4 | function premier_plan(fenetre) {
zindex++; //On incrémente la variable globale
fenetre.style.zIndex=zindex; //On affecte sa valeur au z-index de la fenêtre concernée
}
|
Comme dit précédemment, on veut mettre une fenêtre au premier plan dès sa création et lorsque l'on clique dessus.
On va donc ajouter un appel à cette fonction dans notre fonction de création de fenêtre :
Code : JavaScript1
2
3
4 | //etc
premier_plan(fenetre); //On met au premier plan notre fenêtre
document.body.appendChild(fenetre);
}
|
Puis on va ajouter un évènement dynamiquement au sein même de notre fonction de création de fenêtre car on veut que lorsque l'on clique sur notre fenêtre, celle-ci passe au premier plan :
Code : JavaScript1
2
3
4
5
6
7
8
9 | var fenetre = document.createElement("div"); //Création du bloc principal
fenetre.className="fenetre"; //On donne un attribut class à cette div
fenetre.style.left=left+'px';
fenetre.style.top=top+'px';
fenetre.style.width=width+'px';
fenetre.style.height=height+'px';
if(document.all) fenetre.attachEvent("onmousedown",function (){premier_plan(fenetre)}); //Pour IE
else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true); //Pour les autres
//etc
|
Maintenant, actualisez et testez le résultat : c'est magique ! Lorsque l'on clique sur une fenêtre, elle passe au premier plan ; on peut ainsi basculer entre les fenêtres.
Bon, allez ; pour ceux qui sont un peu perdus, voici le contenu de nos deux fichiers.
index.html
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Gestion de fenêtres en JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="fenetres.js"></script>
</head>
<body>
<p>
<input type="button" value="Fenêtre 1" onclick="creer_fenetre(100,50,500,100)" />
<input type="button" value="Fenêtre 2" onclick="creer_fenetre(200,100,300,200)" />
<input type="button" value="Fenêtre 3" onclick="creer_fenetre(400,150,300,200)" />
</p>
</body>
</html>
|
fenetres.js
Code : JavaScript 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 | var zindex=0;
function creer_fenetre(left,top,width,height){
var fenetre = document.createElement("div"); //Création du bloc principal
fenetre.className="fenetre"; //On donne un attribut class à cette div
fenetre.style.left=left+'px';
fenetre.style.top=top+'px';
fenetre.style.width=width+'px';
fenetre.style.height=height+'px';
if(document.all) fenetre.attachEvent("onmousedown",function (){premier_plan(fenetre)});
else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true);
//On crée de la même manière la div "haut":
var haut = document.createElement("div");
haut.className="haut";
//On crée ensuite les trois div qui y figureront :
var haut_gauche = document.createElement("div");
haut_gauche.className="haut_gauche";
var haut_droite = document.createElement("div");
haut_droite.className="haut_droite";
var haut_centre = document.createElement("div");
haut_centre.className="haut_centre";
//Puis on les insère une par une dans notre bloc "haut" :
haut.appendChild(haut_gauche);
haut.appendChild(haut_droite);
haut.appendChild(haut_centre);
//On insère le tout (la div "haut" et les trois div à l'intérieur) dans le bloc "fenetre" :
fenetre.appendChild(haut);
//On fait de même pour la div "milieu"
var milieu = document.createElement("div");
milieu.className="milieu";
var milieu_gauche = document.createElement("div");
milieu_gauche.className="milieu_gauche";
var milieu_droite = document.createElement("div");
milieu_droite.className="milieu_droite";
var milieu_centre = document.createElement("div");
milieu_centre.className="milieu_centre";
milieu.appendChild(milieu_gauche);
milieu.appendChild(milieu_droite);
milieu.appendChild(milieu_centre);
fenetre.appendChild(milieu);
//On fait de même pour la div "bas"
var bas = document.createElement("div");
bas.className="bas";
var bas_gauche = document.createElement("div");
bas_gauche.className="bas_gauche";
var bas_droite = document.createElement("div");
bas_droite.className="bas_droite";
var bas_centre = document.createElement("div");
bas_centre.className="bas_centre";
bas.appendChild(bas_gauche);
bas.appendChild(bas_droite);
bas.appendChild(bas_centre);
fenetre.appendChild(bas);
premier_plan(fenetre);
document.body.appendChild(fenetre); //On insère le tout dans notre document, dans le corps
}
function premier_plan(fenetre) {
zindex++;
fenetre.style.zIndex=zindex;
}
|
Voilà
. Vous savez désormais comment basculer entre les fenêtres et par la même occasion, vous avez appris comment changer le
z-index d'un élément.
Nous allons, dans le chapitre suivant, voir comment déplacer une fenêtre. Vous allez voir, c'est plus dur...
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
453 Zéros connectés |
8 requêtes |
0.0386s (0.0221s)
