Effect.Highlight()

L'effet Effect.Highlight permet de faire varier ou "flasher" la couleur d'arrière plan (ndr : 'background-color' en anglais) d'un élément DOM .
La variation de couleurs peut être contrôlée grâce aux options spécifiques à cet effet que sont Effect.Highlight.options.startColor et Effect.Highlight.options.endColor .

Cet effet prend son intérêt notamment lors du rechargement d'éléments DOM suite à des requêtes HTTP (ndr : avec utilisation de Ajax.Request et/ou Ajax.Updater et/ou Ajax.PeriodicalUpdater ).


Le tableau ci après liste les propriétés spécifiques à Effect.Highlight :

Propriété	Type	Défaut	Description
startcolor	String	'#ffff99'	Couleur d'arrière-plan par défaut pour le début de l'effet. La couleur par défaut est un jaune léger.
endcolor	String	'#ffffff'	Couleur d'arrière-plan par défaut pour la fin de l'effet. La couleur par défaut est la couleur blanche.
restorecolor	String	couleur d'arrière-plan par défaut de l'élément	Couleur d'arrière-plan finale de l'élément. Par défaut la valeur courante de couleur d'arrière-plan de l'élément est récupéré.

Cet effet peut être utilisé en tenant compte des nombreuses options disponibles pour les effets (ndr : 'duration', etc...)
!!! :: attention, l'utilisation de cet effet nécessite d'indiquer 'new' devant la définition de l'effet que vous souhaitez. Si 'new' n'est pas précisé, une erreur javascript sera renvoyée.


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

Exemple d'utilisation simple

Ce premier exemple vous permet d'évaluer l'effet Effect.Highlight sur une zone 'div' simple.

toto président toto président

L'exemple présenté ci avant est l'exemple le plus simple que l'on peut présenter sans aucune option spécifique précisée.
Le code HTML de la zone 'div' et du bouton est présenté ci après :
<div id="test_0" style="background-color : #DCDCDC; color : #212121; width : 200px; height : 75px; border : #545454 1px solid;"> toto président toto président </div> <br/> <input type="button" id="ok_0" value="tester Effect.Highlight sur la zone 'div'" onClick="new Effect.Highlight('test_0');" /> <br/>
Ce code permet donc le simple "highlighting" de la zone 'div' grise avec les couleurs de base de l'effet à savoir un jaune de départ.
Un exemple un tout petit peu plus complexe est présenté ci après et permet de faire varier la durée de l'effet (ndr : l'action est effectuée sur l'élément 'div' précédent) :
0.2 0.40.5 0.71.0 1.52.0 3.05.0

Le code de cette version modifiée est présentée ci après avec la zone 'div' de base :
<div id="test_0" style="background-color : #DCDCDC; color : #212121; width : 200px; height : 75px; border : #545454 1px solid;"> toto président toto président </div> <br/> <select id="duration_0"><option value="0.2">0.2</option> <option value="0.4">0.4</option><option value="0.5">0.5</option> <option value="0.7">0.7</option><option value="1.0">1.0</option> <option value="1.5">1.5</option><option value="2.0">2.0</option> <option value="3.0">3.0</option><option value="5.0">5.0</option> </select> <br/> <input type="button" id="ok_1" value="tester Effect.Highlight sur la zone 'div' avec la durée d'effet" onClick="new Effect.Highlight('test_0',{ duration : $F('duration_0') });" /> <br/>

Définition d'un intervalle de couleurs pour l'effet

Cet exemple montrer comment préciser un intervalle de couleurs pour l'effet.

L'exemple est testable ci après :

toto président toto président

Durée de l'effet : 0.2 0.40.5 0.71.0 1.52.0 3.05.0
Couleur de départ (startcolor) : #FF8000 (orange) #212121 (variante noir, couleur de base)#B3FF66 (vert pomme) #8CDAFF (bleu ciel)#FFB3D9 (variante rose)
Couleur d'arrivée (endcolor) : #FFB3D9 (variante rose) #212121 (variante noir, couleur de base)#B3FF66 (vert pomme) #8CDAFF (bleu ciel)#FF8000 (orange)
Couleur Finale (restorecolor) : #212121 (variante noir, couleur de base) #FFB3D9 (variante rose)#B3FF66 (vert pomme) #8CDAFF (bleu ciel)#FF8000 (orange)


Le code de cet exemple est repris ci après :
<div id="test_1" style="background-color : #212121; color : #DCDCDC; width : 200px; height : 75px; border : #989898 1px solid;"> toto président toto président </div> <br/> Durée de l'effet : <select id="duration_1"><option value="0.2">0.2</option> <option value="0.4">0.4</option><option value="0.5">0.5</option> <option value="0.7">0.7</option><option value="1.0">1.0</option> <option value="1.5" selected>1.5</option><option value="2.0">2.0</option> <option value="3.0">3.0</option><option value="5.0">5.0</option> </select> <br/> Couleur de départ (startcolor) : <select id="couleur_0"><option value="#FF8000">#FF8000 (orange)</option> <option value="#212121">#212121 (variante noir, couleur de base)</option><option value="#B3FF66">#B3FF66 (vert pomme)</option> <option value="#8CDAFF">#8CDAFF (bleu ciel)</option><option value="#FFB3D9">#FFB3D9 (variante rose)</option> </select> <br/> Couleur d'arrivée (endcolor) : <select id="couleur_1"><option value="#FFB3D9">#FFB3D9 (variante rose)</option> <option value="#212121">#212121 (variante noir, couleur de base)</option><option value="#B3FF66">#B3FF66 (vert pomme)</option> <option value="#8CDAFF">#8CDAFF (bleu ciel)</option><option value="#FF8000">#FF8000 (orange)</option> </select> <br/> Couleur Finale (restorecolor) : <select id="couleur_2"><option value="#212121">#212121 (variante noir, couleur de base)</option> <option value="#FFB3D9">#FFB3D9 (variante rose)</option><option value="#B3FF66">#B3FF66 (vert pomme)</option> <option value="#8CDAFF">#8CDAFF (bleu ciel)</option><option value="#FF8000">#FF8000 (orange)</option> </select> <br/> <input type="button" id="ok_2" value="tester Effect.Highlight sur la zone 'div' avec la durée d'effet" onClick="new Effect.Highlight('test_1',{ duration : $F('duration_1') ,startcolor : $F('couleur_0') , endcolor : $F('couleur_1') , restorecolor : $F('couleur_2') });" />

: 06/01/2007 21:19:58 | : Scriptaculous, Scriptaculous.js, Effect.Highlight, Highlight, Effect, CoreEffects, multibrowser, comptatibility, opacity, visibility, filter,

Aucun commentaire enregistré