Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original de Christian Wenz: Manipulating DropShadow Properties from Client Code
Présentation▲
Le contrôle DropShadow de l'AJAX Control Toolkit étend un panel avec une ombre portée. Les propriétés de cette extension peuvent être changée depuis le code JavaScript du client.
Étapes▲
Le code commence avec un Panel qui contient quelques lignes de texte:
<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
</asp:Panel>Le classe CSS associée donne au Panel une jolie couleur de fond:
<style type="text/css">
.panel {background-color: navy;}
</style>Le DropShadowExtender est ajouté pour étendre le Panel avec un effet d'ombre, l'opacité est de 50%:
<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
TargetControlID="panelShadow" Opacity="0.5" Rounded="true" />Ensuite, le contrôle ScriptManager de l'ASP.NET AJAX permet au Control Toolkit de fonctionner:
<asp:ScriptManager ID="asm" runat="server" />Un autre Panel contient deux liens JavaScript pour modifier l'opacité de notre ombre portée: Le lien “moins” diminue l'opacité de l'ombre,le lien “plus” l'augmente.
<asp:Panel ID="panelControl" runat="server">
<br />
<label id="txtOpacity" runat="server">0.5</label>
<a href="#" onclick="changeOpacity(-0.1); return false;">-</a>
<a href="#" onclick="changeOpacity(+0.1); return false;">+</a>
</asp:Panel>La fonction JavaScript changeOpacity() doit tout d'abord trouver le contrôle DropShadowExtender dans la page. L'ASP.NET AJAX définit la méthode $find() pour cette tâche. Ensuite, la méthode get_Opacity() récupére l'opacité courante, et la méthide set_Opacity() la définie. Le code JavaScript suivant applique la valeur acutelle de l'opacité à l'élément <label>:
<script type="text/javascript">
function changeOpacity(delta)
{
var dse = $find("dse1");
var o = dse.get_Opacity();
o += delta;
o = Math.round(10 * o) / 10;
if (o <= 1.0 && o >= 0.0)
{
dse.set_Opacity(o);
$get("txtOpacity").firstChild.nodeValue = o;
}
}
</script>
