Projet:Scripts et gadgets/Notices/MoveResizeAbsolute

PROJET SCRIPTS ET GADGETS

Centraliser les fonctions JavaScript, Vue et CSS pour éviter la dispersion du code.

MoveResizeAbsolute est un code javascript contenant des fonctions génériques destinées à créer des zones de dragage (mouvement) ou de redimensionnement.

Les éléments à bouger ou redimensionner sont définis avec l'attribut position:absolute

Pour des fonctions similaires en position:fixed, voir MoveResizeFixed

Description

MoveResizeAbsolute_AddMoveArea(elementArea, elementsToMove, LeftLimit, TopLimit);

Cet appel permet de définir une zone pour bouger un élément dans la page.

L'élément qui sert d'ancre est contenu dans la variable elementArea tandis que les éléments à bouger sont contenus dans la variable de type Array elementsToMove
Les variables LeftLimit et TopLimit (facultatives) permettent de définir des limites à gauche et en haut pour chaque élément. Elles doivent également être incluses dans une variable de type Array.

MoveResizeAbsolute_AddResizeArea(elementArea, elementsToResize, MinWidth, MinHeight);

Cet appel permet de définir une zone pour redimensionner un élément dans la page.

L'élément qui sert d'ancre est contenu dans la variable elementArea tandis que les éléments à redimensionner sont contenus dans la variable de type Array elementsToResize
Les variables MinWidth et MinHeight (facultatives) permettent de définir des limites minimum de largeur et de hauteur pour chaque élément. Elles doivent également être incluses dans une variable de type Array.

Les autres fonctions sont des fonctions subalternes qui renvoient le type de navigateur ainsi que la hauteur et la largeur de l'écran.

Exemple d'application

obtenir('MoveResizeAbsolute');
addOnloadHook(MoveResizeAbsolute_Test);

function MoveResizeAbsolute_Test(){

// Création d'un cadre
     var Menu = document.createElement('div'); 
     Menu.id = "MoveResizeTest"
     Menu.style.position = "absolute";
     Menu.style.zIndex = 5000;
     Menu.style.top = "200px";
     Menu.style.left = "5px";
     Menu.style.width = "150px";
     Menu.style.height = "250px";
     Menu.style.border = "3px double black";
     Menu.style.backgroundColor = "silver";
     document.body.appendChild(Menu);

// Création de la zone de "Move"
     var MoveH5 = document.createElement('h5'); 
     MoveH5.style.border = "1px dashed white";
     MoveH5.style.backgroundColor = "yellow";
     MoveH5.innerHTML = "<center>Move</center>";
     Menu.appendChild(MoveH5);

// Création de la zone utilitaire
     var MenuBody = document.createElement('div'); 
     Menu.appendChild(MenuBody);

// Remplissage de la zone utilitaire
     var Ul = document.createElement('ul');
     MenuBody.appendChild(Ul);
     for(var a=0;a<10;a++){ 
          var Ligne = document.createElement('li');
          Ligne.innerHTML = '=== Test ===';
          Ul.appendChild(Ligne);
     }

// Création de la zone de "Resize"
     var ResizeH5 = document.createElement('h5'); 
     ResizeH5.style.position = "absolute";
     ResizeH5.style.bottom = "0px";
     ResizeH5.style.right = "0px";
     ResizeH5.style.border = "1px dashed white";
     ResizeH5.style.backgroundColor = "green";
     ResizeH5.innerHTML = "<center>Resize</center>";
     Menu.appendChild(ResizeH5);

// Application des fonctions "Move" et "Resize"
     var ElementsToMove = new Array(Menu);
     var ElementsLeftLimit = new Array("0");
     var ElementsTopLimit = new Array("0");
     MoveResizeAbsolute_AddMoveArea(MoveH5, ElementsToMove, ElementsLeftLimit, ElementsTopLimit);

     var ElementsToResize = new Array(Menu);
     var ElementsMinWidth = new Array("50");
     var ElementsMinHeight = new Array("50");
     MoveResizeAbsolute_AddResizeArea(ResizeH5, ElementsToResize, ElementsMinWidth, ElementsMinHeight);
}