• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2013

Finalisation du script de fenêtres

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ce dernier chapitre sur la gestion des fenêtres n'est pas essentiel pour la suite. Nous allons juste faire quelques petites améliorations pour avoir un script terminé totalement.
Passez votre chemin si vous n'êtes pas intéressés par le système de fenêtres ou si vous voulez juste vous servir du script sans rien comprendre, lisez la conclusion. :p

Une histoire d'ordre

On peut créer toute une armée de fenêtres uniquement avec les classes et les styles CSS. Mais il se pose un dernier problème (si vous avez testé le dernier exemple) : la fenêtre en cours de déplacement ne passe pas au-dessus des autres.

Pour régler l'ordre de superposition des blocs, on utilise la propriété CSS z-index. Plus z-index est grand, plus il est placé devant les autres blocs. Pour faire revenir un bloc au premier plan, il faut connaître le z-index maximum sur la page pour placer notre nouveau bloc au-dessus des autres.

On va donc faire une boucle pour récupérer le plus grand z-index et en trouver un encore plus grand :

//à rajouter dans drag_onmousedown
var elements = document.getElementsByTagName('*'); //On récupère tous les éléments de la page
var zIndex = 0;
for( var i=0; i < elements.length; i++)
{
  zIndex = Math.max(zIndex,elements[i].style.zIndex);
}
fenetre.style.zIndex = zIndex + 1; //toujours plus haut que le plus haut

Tester : les blocs passent les uns au-dessus des autres

Le vrai style CSS

Je vous avais dit que les styles CSS left et top indiquent la position horizontale et verticale du bloc par rapport au premier ancêtre en position absolue. C'est pour cela qu'on avait mis la condition :

element.style.position != 'absolute'

Seulement, cette condition est fausse car la propriété style ne prend pas en compte les feuilles de style externes.
Voilà un exemple :

<style type="text/css">
#bloc
{
  position: absolute;
}</style>
<!-- ... -->
<div id="bloc">contenu</div>
<button onclick="alert(document.getElementById('bloc').style.position);">Tester</button>

Le alert va afficher une chaîne vide "", car position a été indiqué dans la feuille de style et non pas dans l'attribut HTML style.

Il nous faut donc récupérer la véritable valeur du style (ici, la position), et je vous propose cette fonction (sans vraiment vous expliquer comment elle fonctionne :p ) :

//utilisation : au lieu d'écrire element.style.position, on écrira getCssStyleValue(element,"position");
function getCssStyleValue(element /*element html*/, style/*style recherché*/)
{
  if( element.currentStyle )
  {
    return element.currentStyle[style];
  }
  else
  {
    return window.getComputedStyle(element,null).getPropertyValue(style);
  }
}

Notre boucle qui calcule le décalage horizontal (variable eX) et vertical (variable eY) devient donc :

//Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
  } while( element && getCssStyleValue(element, 'position') != 'absolute'); //<--

Pensez aussi à copier-coller la fonction getCssStyleValue dans votre code source ;) .

Maximiser

Le script pour maximiser / minimiser était assez simplet, en voilà une version améliorée qui conserve les anciennes positions et dimensions initiales (avant maximisation) :

(en fait, il n'y a pas grand-chose à expliquer, le code parle de lui-même)

//Nouvelle fonction min_max
function min_max(fenetre)
{
  if( ! fenetre.max )
  {
    fenetre.max = true;
    fenetre.oldTop = fenetre.style.top;
    fenetre.oldLeft = fenetre.style.left;
    fenetre.oldWidth = fenetre.style.width;
    fenetre.oldHeight = fenetre.style.height;
     
    fenetre.style.top = 0;
    fenetre.style.left = 0;
    fenetre.style.width = '100%';
    fenetre.style.height = '100%';
  }
  else
  {
    fenetre.max = false;
    fenetre.style.top = fenetre.oldTop;
    fenetre.style.left = fenetre.oldLeft;
    fenetre.style.width = fenetre.oldWidth;
    fenetre.style.height = fenetre.oldHeight;
  }
}
 
//À modifier aussi, pour empêcher le déplacement lorsque maximisé :
//Au début de start_drag():
function start_drag(objet,event)
{
  if( objet.max) return; //on quitte la fonction
 
  dragged = objet;
  //[...]

Tester :)

Cloisonnement

Pour éviter les conflits entre plusieurs scripts, on a utilisé addEventLister (et attachEvent). Les variables et les fonctions que l'on utilise ne sont pas utilisées (de l'extérieur) car on se base uniquement sur les classes ; il n'est donc pas utile de rendre les variables globales et on évitera ainsi des problèmes de compatibilité avec d'autres scripts.

Les variables (et fonctions) déclarées à l'intérieur d'une fonction sont inaccessibles de l'extérieur : c'est le principe des cloisons en Javascript. On va créer une fonction anonyme qui va contenir tout notre code. Et cette fonction anonyme sera lue immédiatement :

(function () { //Début du cloisonnement
  
  //Code invisible de l'extérieur
 
})(); //Fin du cloisonnement

Plus d'informations sur Alsacreations.

Notre script est fini ! :)
On aurait pu aussi gérer le redimensionnement mais c'est assez répétitif à coder (droite, gauche, haut, bas, diagonales...) et pas très dur, alors je vous laisse le faire. :p

Récapitulons le fonctionnement de ce script.
Il fonctionne sur la base des classes (attribut class en HTML) que l'on place sur chaque balise HTML.
Il y a au total 4 classes :

  • window-base qui est à placer sur la balise de la fenêtre elle-même.

  • window-move à placer sur les balises qui vont déclencher le déplacement de la fenêtre (barre de titre par ex.) ;

  • window-min-max qui indique un bouton pour maximiser / restaurer une fenêtre ;

  • window-close pour les boutons qui ferment la fenêtre.

Ce qui donne par exemple le code HTML suivant :

<div class="window-base">
  <div class="window-move" >
    <button class="window-close">X</button>
    <button class="window-min-max">[]</button>
    Barre de titre
  </div>
  Contenu
</div>

Avec le code CSS suivant :

.window-base
{
        position: absolute;
        width: 400px;
        height: 200px;
        background-color: #DDD;
        border: 1px solid #000;
}
 
.window-close , .window-min-max
{
        float: right;
        background-color: #EEE;
}
 
.window-move
{
        width: 100%;
        height: 30px;
        background-color: #00D;
        color: #FFF;
        cursor: move;
}

Pour utiliser le script dans la page, il suffit de l'insérer (dans la partie <head>) avec le code HTML :

<script type="text/javascript" src="fenetres.js"></script>

Et voilà le fichier complet.

Exemple de certificat de réussite
Exemple de certificat de réussite