Webjax.eu :: Effect.Opacity()

Visualisation d'une page Webjax

Effect.Opacity()

L'effet Effect.Opacity() permet de jouer sur la visibilité, l'opacité, la transparence d'un élément.
L'objet permet de faire varier la propriété CSS 'opacity' ou 'filter' selon le navigateur utilisé pour rendre la page.

Un exemple d'utilisation de l'effet est présenté ci après :

Réduction progressive d'opacité
L'exemple ci après permet de réduire l'opacité d'un champ de saisie texte grâce à Effect.Opacity().
L'exemple est utilisable via le bouton ci après.

Le code nécessaire pour la mise en place de l'exemple est présenté ci après (ndr : code html du bouton et du champ texte, puis code Javascript) :
<input type="text" id="test_0" value="toto président, toto président" readonly /> <br/><input type="button" name="ok_0" value="appliquer l'effet d'opacité réduite" onClick="reduireOpacite('test_0');" />

<script type="text/javascript"> function reduireOpacite (idEl) { new Effect.Opacity(idEl, { from : 1.0, to : 0.2, duration: 2.0, afterFinish: apresFinish, beforeStart: avantStart, afterUpdate: apresUpdate, beforeUpdate: avantUpdate } ); } function apresFinish (obj){ alert("apresFinish : l'effet a bien été appliqué à l'élément."); } function avantStart (obj){ alert("avantStart : l'effet va être appliqué à l'élément."); } function apresUpdate (obj){ alert("apresUpdate : le redraw de l'élément a eu lieu."); } function avantUpdate (obj){ alert("avantUpdate : le redraw de l'élément va avoir lieu."); } </script>

On peut remarquer que ce premier exemple utilise les méthodes dites de "callback" qui permettent d'insérer du code à divers moments de l'exécution de l'effet.
Ces "callbacks" peuvent être utiles dans les cas de mise en place d'interfaces complexes.

Définition d'opacité
L'exemple ci après propose un petit widget permettant de jouer simplement sur l'opacité d'éléments DOM.
L'exemple est utilisable ci après via la bouton d'action final.

Sélectionner le champ pour l'effet :
Durée de l'effet :
Opacité de départ :
Opacité finale :

 <input type="button" name="ok_1" value="appliquer l'effet à l'élément sélectionné" onClick="reduireOpaciteMod0($F('champ'),$F('opaciteDepart'),$F('opaciteFin'),$F('duree'));"/>
Le code Javascript :
function reduireOpaciteMod0 (idEl,fromV,toV,durationV) { new Effect.Opacity(idEl, { from : Number(fromV), to : Number(toV), duration: Number(durationV), afterFinish: apresFinish, beforeStart: avantStart, afterUpdate: apresUpdate, beforeUpdate: avantUpdate } ); }

ico time

: 06/01/2007 21:09:33 | ico tag

ico tag

: Scriptaculous, Scriptaculous.js, Effect.Opacity, Opacity, Effect, CoreEffects, multibrowser, comptatibility,

ico com

Aucun commentaire enregistré