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)
Eh oui ! Nous voulons qu'une fenêtre comme celle-ci s'ouvre lorsque l'on clique sur un bouton, par exemple :
Ajoutons alors un bouton dans notre code XHTML :
Code : HTML 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 | <!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>Gestions 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" />
</head>
<body>
<p>
<input type="button" value="Fenêtre 1" />
</p>
<!--
<div class="fenetre">
<div class="haut">
<div class="haut_gauche"></div>
<div class="haut_droite"></div>
<div class="haut_centre"></div>
</div>
<div class="milieu">
<div class="milieu_gauche"></div>
<div class="milieu_droite"></div>
<div class="milieu_centre"></div>
</div>
<div class="bas">
<div class="bas_gauche"></div>
<div class="bas_droite"></div>
<div class="bas_centre"></div>
</div>
</div>
-->
</body>
</html>
|
(Je mets tout le code XHTML de la fenêtre en commentaire parce que justement, on veut le refaire avec une fonction Javascript.
)
Passons maintenant aux choses sérieuses !
Créez un fichier Javascript (moi, je le nomme
fenetres.js) et ajoutez-le dans votre document :
Code : HTML1 | <script type="text/javascript" src="fenetres.js"></script>
|
Maintenant, commencez l'écriture de notre fonction ; ce que vous avez à faire est simple si vous avez compris les diverses méthodes dont j'ai parlé dans le chapitre précédent.
En tout cas, voilà mon code à moi, commenté pour votre plaisir
:
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 | function creer_fenetre(){
var fenetre = document.createElement("div"); //Création du bloc principal
fenetre.className="fenetre"; //On donne un attribut class à cette div
//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);
document.body.appendChild(fenetre); //On insère le tout dans notre document, dans le corps
}
|
Si vous ne comprenez rien, c'est que vous n'avez pas bien assimilé
le tuto de Fedaykin.
Maintenant, appelons cette fonction lorsque l'on clique sur le bouton créé précédemment :
Code : HTML1 | <input type="button" value="Fenêtre 1" onclick="creer_fenetre()" />
|
Pour finir, vérifions que notre code fonctionne bien ; actualisez, puis cliquez sur le bouton : c'est magique ! Une fenêtre apparaît.
Ajout d'arguments à notre fonction : taille et position de la fenêtre
Ne serait-ce pas mieux de pouvoir donner à notre fonction les 4 arguments que sont les attributs de style :
width,
height,
left et
top ?
Modifions alors le prototype de notre fonction :
Code : JavaScript1
2
3 | function creer_fenetre(left,top,width,height) {
//Ici le contenu de notre fonction
}
|
On va modifier le contenu de notre fonction pour attribuer les valeurs à notre bloc
fenetre :
Code : JavaScript1
2
3
4
5
6 | var fenetre = document.createElement("div");
fenetre.className="fenetre";
fenetre.style.left=left+"px"; //Modification de l'attribut left du style de notre div
fenetre.style.top=top+"px";
fenetre.style.width=width+"px";
fenetre.style.height=height+"px";
|
On peut alors retirer les mêmes attributs devenant inutiles dans notre CSS :
Code : CSS1
2
3 | .fenetre {
position: absolute;
}
|
À présent, modifions l'appel de la fonction sur notre bouton :
Code : HTML1 | <input type="button" value="Fenêtre 1" onclick="creer_fenetre(100,50,500,100)" />
|
Si tout fonctionne, une fenêtre de 500 pixels sur 100 devrait s'ouvrir à 100 pixels du bord gauche et à 50 du bord haut.
Actualisez et testez maintenant... Ça marche !
.
Vous souhaitez ouvrir plusieurs fenêtres ?
Pas de problème ! Vous pouvez créer un autre bouton ouvrant une autre fenêtre aux dimensions différentes et à un autre emplacement :
Code : HTML1
2 | <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)" />
|
Actualisez puis cliquez sur le bouton 1, puis sur le second :
Youpi ! Ça marche !
Pourquoi la deuxième fenêtre se retrouve au-dessus ?
Tout simplement parce qu'elle a été ouverte en dernier et par conséquent, elle se retrouve au-dessus.
Si vous cliquez d'abord sur le bouton 2 puis sur le 1, on arrive naturellement à cela :
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
177 Zéros connectés |
8 requêtes |
0.0446s (0.0336s)
