Projet:Scripts et gadgets/Notices/MoveResizeFixed

Projet
Fonctions disponibles
Notices
Discussion
Rapport de bug
Demande de fonction
PROJET SCRIPTS ET GADGETS
Centraliser les fonctions JavaScript, Vue et CSS pour éviter la dispersion du code.

MoveResizeFixed 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:fixed

Description

MoveResizeFixed_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.
MoveResizeFixed_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('MoveResizeFixed');
addOnloadHook(MoveResizeFixed_Test);

function MoveResizeFixed_Test(){

// Création d'un cadre
     var Menu = document.createElement('div');
     Menu.id = "MoveResizeTest"
     Menu.style.position = "fixed";
     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");
     MoveResizeFixed_AddMoveArea(MoveH5, ElementsToMove, ElementsLeftLimit, ElementsTopLimit);

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

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.