Javascript
Administrateur
Sep 16
|13:15
Mise à jour le Mardi, 16 Septembre 2008 13:17
Scriptaculous est un superbe framework permettant d'animer votre site web. Il est simple et en général, le résultat est vraiment impressionnant. Voyons donc aujourd'hui comment modifier l'opacité d'un élément d'une liste lorsque ceux-ci sont sélectionné.
.png)
Inclure les librairies
Il faut tout d'abord commencer par inclure Scriptaculous et Prototype. Insérer donc le code suivant entre vos balises <head></head>.
<script src="/scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
Le code HTML
Voici une liste de bloc <div> créée pour les besoins de l'exemple ci-dessous.
<div id="el1">
<img src="/pic-user/user_pckult.jpg" align="left" style="margin-right:10px;"/>
<span class="check">
<input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)">
</span>
<span class="title">Base de données: Terminer le modèle de données</span>
<span class="desc">Compléter avec le DBA le modèle de données</span>
</div>
<img src="/pic-user/user_pckult.jpg" align="left" style="margin-right:10px;"/>
<span class="check">
<input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)">
</span>
<span class="title">Base de données: Terminer le modèle de données</span>
<span class="desc">Compléter avec le DBA le modèle de données</span>
</div>
Lorsque vous cliquez sur la case à cocher, l'événement changeOpacity() est déclanché. Celui-ci modifie l'opacité du bloc <div> de 100% à 30% est inversement. Vous pouvez ajouter un nombre infini de bloc <div>, en autant que vous suiviez la même numérotation de vos ID (el2, el3, el4 ...). Par la suite, il ne vous suffira qu'à modifier l'argument passé en paramètre à la fonction changOpacity(X) en fonction du numéro du bloc <div> que vous êtes (el2 -> changeOpacity(2), el3 -> changeOpacity(3) ...)
Le code Javascript
Maintenant, passons au code Javascript. Il ne vous suffira qu'à inclure ce code entre les balises <head></head> de votre page.
<script type="text/javascript">
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
// Si la case a été coché, mettre à 30%
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
// Si la case a été décocher, remettre à 100%
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
// Si la case a été coché, mettre à 30%
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
// Si la case a été décocher, remettre à 100%
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
Envoyer par mail
Vu: 4042
Commentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Réseaux sociaux
Connexion
Publicités
MeilleursPrix.ca
|
|
