Effect.Scale()

L'effet Effect.Scale permet de mettre à jour les dimensions d'un élément DOM en transformant ces propriétés 'width' et 'height' en unités 'em'.
Ces unités permettent de représenter un autre ordre de dimensionnement que l'unité habituellement utilisée, le pixel.

06/01/07 : plus d'informations sont nécessaires au sujet de ces 'em', mise à jour à faire

Options spécifiques à l'effet

Voici le tableau d'options spécifiques à l'effet Effect.Scale :

Propriété	Type	Défaut	Description
scaleX	Boolean	true	Indique si l'élément doit être réajusté horizontalement.
scaleY	Boolean	true	Indique si l'élement doit être réajusté verticalement.
scaleContent	Boolean	true	Indique si le contenu de l'élément doit être réajusté ou non.
scaleFromCenter	Boolean	false	Indique si l'élément doit être réajusté de façon à ce que le centre soit toujours à la même position sur l'écran.
scaleMode	String ou Object	''	Option qui accepte deux types d'argument. Le type String permet de spécifier 'box' ou 'content' (ndr : 'box' permet de réajuster la partie visible de l'élément tandis que 'content' réajuste l'élément dans sa totalité). Le type Object correspond à un objet type { originalWidth : 400 , originalHeight : 250 }.
scaleFrom	Number	100.0	Permet de préciser un pourcentage de départ avant réajustement (ndr : scaling).

Des exemples d'utilisation sont présentés ci après :

Lien hypertexte autoagrandissant

Ce premier exemple est repris de la documentation officielle et consiste en un lien hypertexte placé au sein d'un élément 'div'.
Le click sur le lien provoque une application d'un Effect.Scale qui agrandit le container (ndr : parentNode en DOM) du lien de 120%.
L'exemple est testable ci après :

Cliquer le lien


totowebjax

!!! :: attention cet exemple peut provoquer un agrandissement très fort de la page en cours si le nombre de clicks est important.
Le code de l'exemple est présenté ci après :
<div> <a href='javascript:void(0);' onClick='new Effect.Scale(this.parentNode,120);'>Cliquer le lien</a> <br/><input type="button" name="test_0" id="test_0" value="toto && webjax === true" /><br/> <input type="text" id="test_1" value="toto président toto président" /><br/> <select id="test_2"><option value="toto">toto</option><option value="webjax">webjax</option></select> </div>

Test de l'option 'Effect.Scale.options.scaleFrom'

Cet exemple permet de tester l'option 'scaleFrom' sur un élément 'div' de 300*200px sur lequel on applique un Effect.Scale de 100 avec un scaleFrom à 1.

L'exemple est testable ci après :

toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien

Le code de l'exemple est présenté ci après :
<div style="background-color : #878787; border : #EAEAEA 1px solid; color : #FAFAFA; text-shadow : white : 1px; width : 300px; height : 200px;" id="test_3"> toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien toto président, toto président, webjax c'est bien, webjax c'est bien </div> <br/> <input type="button" id="ok_1" value="tester le scaleFrom" onClick="new Effect.Scale('test_3',100,{scaleFrom:1});" />

: 06/01/2007 21:10:38 | : Scriptaculous, Scriptaculous.js, Effect.Scale, Scale, Effect, Effect, CoreEffects, multibrowser, comptatibility,

Aucun commentaire enregistré