Projet:Scripts et gadgets/Notices/MoveResizeAbsolute
PROJET SCRIPTS ET GADGETS
Centraliser les fonctions JavaScript 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
[modifier | modifier le code]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
[modifier | modifier le code]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);
}
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
Cover photo is available under {{::mainImage.info.license.name || 'Unknown'}} license.
Cover photo is available under {{::mainImage.info.license.name || 'Unknown'}} license.
Credit:
(see original file).
