`ExtensionElement`

Un objet JavaScript
permettant d’étendre et replier un élément

Cet objet permet de déployer et replier un élément graduellement, depuis son côté gauche ou son côté haut, ou depuis son angle supérieur gauche. Accessoirement, une méthode permet de masquer l’élément. Voici le prototype :

ExtensionElement (idElement, minimumX, maximumX, decalageX,
          minimumY, maximumY, decalageY, intervalle)

Télécharger l’objet avec fichier d’exemple (.zip)

Utilisation

1 – Insérer l’objet ExtensionElement dans l’élément head de la page :

<script src="objet-extension-element.js"
          type="text/javascript"></script>

2 – Définir l’élément à déployer dans le code HTML, ici une <div>, qui doit être identifié par un attribut id :

<div id="a_deployer">
     contenu de la div…
</div>

3 – Créer une instance de l’objet ExtensionElement, placée dans le code HTML après la définition ci-dessus. La variable JavaScript créée doit porter le nom de l’attribut id de l’élément correspondant, comme a_deployer dans cet exemple :

var a_deployer = new ExtensionObjet ("a_deployer", -200, 300,
          10, 0, 750, 15, 10)

4 – Lancer les extension et repliement, ici depuis 2 liens :

<a href="#" onclick="if (!a_deployer.enMvt)
          a_deployer.etendre()"> … </a>
<a href="#" onclick="if (!a_deployer.enMvt)
          a_deployer.replier()"> … </a>

… ou en bascule depuis un seul lien :

<a href="#" onclick="if(!a_deployer.on && !a_deployer.enMvt)
          a_deployer.etendre()else if(a_deployer.on && !a_deployer.enMvt)
          a_deployer.replier()"> … </a>

À savoir

Vérifier que nomObjet.enMvt est à false avant de lancer un mouvement d’extension ou de repliement : relancer un mouvement en cours a pour effet de l’accélérer ;
La rapidité du déplacement dépend de l’intervalle intervalle séparant chaque mouvement ; les pas horizontal et vertical decalageX et decalageY permettent de régler la fluidité du mouvement d’extension ;
Pour le positionnement de l’élément dans la page, utiliser les propriétés CSS margin-top ou margin-left et non les propriétés de positionnement top ou left ;
Pour une extension depuis une ligne horizontale les tailles minimum et maximum horizontales minimumX et maximumX doivent êtres identiques, et le pas horizontal decalageX doit être mis à 0 ;
Pour une extension depuis une ligne verticale les tailles minimum et maximum verticales minimumY et maximumY doivent êtres identiques, et le pas horizontal decalageY doit être mis à 0 ;
Dans le cas d’une extension dans les 2 directions, le nombre de mouvements doit être le même dans les 2 directions. Par exemple, pour un déploiement horizontal de 400 pixels (minimumX=0 et maximumX=400), un pas de 20 pixels (decalageX=20) donne 20 mouvements. Un déploiement vertical compatible sera par exemple de 300 pixels pour un pas de 15 pixels (minimumY=0, maximumY=300 et decalageY=15), ce qui donne 20 mouvements également.
Pour une extension ponctuelle depuis le point haut-gauche de l’élément, le nombre de mouvements doit être le même dans les 2 directions ; les tailles minimum horizontale et verticale minimumX et minimumY doivent êtres mises à 0.

Paramètres
Tous les paramètres sont obligatoires
`idElement`	Chaîne ID de l'élément à étendre
`minimumX maximumX`	Entiers tailles horizontales minimum et maximum (pixels)
`minimumY maximumY`	Entiers tailles verticales minimum et maximum (pixels)
`decalageX decalageY`	Entiers pas horizontal et vertical en pixels
`intervalle`	Entier millisecondes entre chaque mouvement

Propriétés
`nomObjet.on`	Booléen vaut `false` lorsque l’élément est replié et `true` lorsqu’il est étendu
`nomObjet.enMvt`	Booléen vaut `true` lorsque l’élément est en mouvement d'extension ou de repli et `false` sinon

Méthodes
`etendre()`	Extension de l’élément
`replier()`	Repliement
`cacher()`	Masquage

imprimer

télécharger

haut de page

ExtensionElement

Un objet JavaScriptpermettant d’étendre et replier un élément

Utilisation

À savoir

François Delègue

`ExtensionElement`

Un objet JavaScript
permettant d’étendre et replier un élément