Salut, je viens de finir le tuto sur le système de fenêtres à la façon d'un web os
Mais étant donné que je suis très limité en JavaScript je ne peut pas trop le continuer..
Je code actuellement une appli php/sql pour un gestionnaire de contacts et le principe de fenêtre me plait bien pour ce genre de prog php
Donc la fin du tuto n'y est pas... Il n'y as pas de suite pour le redimensionnement des fenêtre ni comment y intégrer du texte o0
Pourrait-on m'expliquer la manière dont je dois my prendre pour y intéger mes scripts php et ainsi y faire fonctionner mon appli ainsi que la manière dont redimensionner une fenêtre et si possible la mettre en petit en bas de page?
Merci à vous.
Voici le code de ma page actuelle :
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
<!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>Gestionnaire de contact</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
                        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 <link href="style_menu.css" rel="stylesheet" type="text/css" media="screen" />
           <script type="text/javascript" src="js/fenetre.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
        </head>
 
      <body onmousemove="deplacer_fenetre(event)">
        <div id="menu_haut">
                <div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#" ><img src="images/home.png" alt="home" /><span>Accueil attention ferme toutes les fen?tres!</span></a> 
  <a class="dock-item" href="#" onclick="creer_fenetre(10,80,1000,650)"><img src="images/email.png" alt="contact" /><span>Voir les contact</span></a> 
</div>
</div>
                </div>
<script type="text/javascript">
        
        $(document).ready(
                function()
                {
                        $('#dock').Fisheye(
                                {
                                        maxWidth: 50,
                                        items: 'a',
                                        itemsText: 'span',
                                        container: '.dock-container',
                                        itemWidth: 40,
                                        proximity: 90,
                                        halign : 'center'
                                }
                        )
                }
        );
 
</script>
<div class="bas">
</div>
        </body>
</html>
Et mon code js fentetre.js
Code : 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
var zindex=0;
var fenetre_deplacee=0;
var fenetre_deplacee_difx=0;
var fenetre_deplacee_dify=0;
 
function creer_fenetre(left,top,width,height) {
        var fenetre = document.createElement("div");
        fenetre.className="fenetre"; //On donne un attribut class à cette div
        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";
		addEvent(fenetre,"mousedown",function (){premier_plan(fenetre)});
 
        //On créé de la même manière la div "haut":
        var haut = document.createElement("div");
        haut.className="haut";
		addEvent(haut,"mousedown",function (event){commencer_deplacement(event,fenetre)});
		addEvent(haut,"mouseup",arreter_deplacement);
        //On créé ensuite les trois div qui seront dedans:
        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); //On met au premier plan notre fenêtre
        document.body.appendChild(fenetre); //On insère le tout dans notre document, dans le corps
}
 
 
function premier_plan(fenetre) {
        zindex++; //On incrémente la variable globale
        fenetre.style.zIndex=zindex; //On affecte sa valeur au z-index de la fenetre concernée
}
 
function commencer_deplacement(ev,fenetre) {
        fenetre_deplacee=fenetre; //On défini quelle fenêtre est en cours de déplacement
        old_mouseCoords=mouseCoords(ev); //On récupère la position de la souris
        old_windowCoords=getPosition(fenetre); //Et la position de notre fenêtre
        //On stocke les différences dans les variables globales
        fenetre_deplacee_difx=old_mouseCoords.x-old_windowCoords.x;
        fenetre_deplacee_dify=old_mouseCoords.y-old_windowCoords.y;
}
function arreter_deplacement() {
        fenetre_deplacee=0; //La variable vaut 0
}
 
function deplacer_fenetre(ev) {
        if(fenetre_deplacee!=0) {
                var souris=mouseCoords(ev);
                fenetre_deplacee.style.left=(souris.x-fenetre_deplacee_difx)+'px'; //On soustrait l'abscisse du curseur par rapport au coin gauche de la fenêtr
                fenetre_deplacee.style.top=(souris.y-fenetre_deplacee_dify)+'px'; //On fait de même avec l'ordonnée
        }
}
 
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
 
function commencer_deplacement(ev,fenetre) {
        fenetre_deplacee=fenetre; //On défini quelle fenêtre est en cours de déplacement
        old_mouseCoords=mouseCoords(ev); //On récupère la position de la souris
        old_windowCoords=getPosition(fenetre); //Et la position de notre fenêtre
        //On stocke les différences dans les variables globales
        fenetre_deplacee_difx=old_mouseCoords.x-old_windowCoords.x;
        fenetre_deplacee_dify=old_mouseCoords.y-old_windowCoords.y;
}
 
function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
}
 
function getPosition(e){
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e     = e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
}
Si ça peut vous aider?
Merci